Driving a 56% Increase in PDP’s for Albelli

Working with Albelli

Albelli is a leading online photo platform, providing high-quality photo prints in a range of products including calendars, cards, and more. They approached us seeking a reliable SEO agency to support them in preparing for the introduction of the new Core Web Vital: Interaction to Next Paint.

The Challenge

At time of writing, INP is the latest Core Web Vital metric (coming into effect in March 2024) that assesses a page’s overall responsiveness to user interactions by observing the latency of all click, tap and keyboard interactions that occur throughout a user’s visit to a page.

With that in mind, our aim was to:

1. Ensure Albelli were performing for this metric to drive stronger rankings for competitive terms
2. Ensure their site visibility and keyword rankings were unaffected once the new CWV came into effect

Our Strategy

We ran field data on two priority sites, and to prioritise key markets whilst also understanding if the INP issues were shared between sites, which may allow the same issues to be corrected across other Albelli sites.

This project took place over a two-month period, during which the following steps were taken to identify INP issues and test our solutions:

• RUMVision snippet loaded onto Albelli NL & DE
• After two weeks of data collection, the analysis begins
• Client developers work on fixes, with NOVOS supported by running additional lab tests to confirm relevant changes.
• NOVOS re-review field data to confirm fixes (RUMVision code gets re-added for 7 days)
• RUMVision has provided us with a deep dive into which page templates are causing issues for INP. Below is an overview of what we assess as the priority fixes.

To fix these issues, we implemented the following solutions:

• Implement browser ‘mouseover’ event to preload images
• Give the server a warning to preload assets
• Test different button types aside from radio buttons
• Focus on the input delay phase
• Test fixes for buttons “Staand,” “Liggend,” and “Vierkant”
• Planned JavaScript cleanup and reduction in event listeners by Albelli
• Implement browser ‘mouseover’ event to lazy-load required elements
• Utilise content visibility = auto to lazy-load elements
• Use scheduler.yield to pause long tasks during user interaction
• Remove unneeded filter buttons
• Ensure filter buttons with “0” (e.g. Out of Stock) are not shown
• Remove the “0” filter button appearing at the bottom of all filters
• Remove unused scripts causing INP issues
• Implement browser ‘mouseover’ event to preload assets
• Implement browser ‘mouseover’ event
• Lazy-load any third-party JS libraries
• Use tree-shaking to reduce unused code and initial bundle size

Results

As a result of our strategy, Albelli experienced the following results:

Results for Albelli.be:

• PDPs: 52% increase in INP
• • Before: 409 milliseconds (Moderate)
  • After: 193 milliseconds (Good)
• PLPs: 10% increase in INP
• • Before: 208 milliseconds (Moderate)
  • After: 187 milliseconds (Good)
• Homepage: 19% increase in INP
• • Before: 224 milliseconds (Moderate)
  • After: 182 milliseconds (Good)

Results for Albelli.nl:

• PDPs: 56% increase in INP
• • Before: 403 milliseconds (Moderate)
  • After: 176 milliseconds (Good)
• PLPs: 3% increase in INP
• • Before: 192 milliseconds (Good)
  • After: 187 milliseconds (Good)
• Homepage: 13% increase in INP
• • Before: 192 milliseconds (Good)
  • After: 168 milliseconds (Good)