Albelli

The Challenge

Albelli wanted to prepare for the release of the new Core Web Vital (CWV): Interaction to Next Paint (INP). INP is a new 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.

CWVs are used as a ranking factor, so Albelli wanted to ensure they were performing well for this metric and make sure their site visibility and keyword rankings were not impacted once the new CWV came into effect.

Our Strategy

We ran field data on two priority sites, www.albelli.nl and www.albelli.be. This allowed us to prioritise the important markets while 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 this time, 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 starts
• Client developers work on fixes, with NOVOS supporting 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: 

Solution:

• 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

The 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)