InCorio

During the initial analysis of the website www.incorio.com as part of its Performance Pack, we proposed to our client to focus the action plan on Core Web Vitals: Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP). These indicators defined by Google play a crucial role in optimizing web performance.

Cumulative Layout Shift (CLS) is a user-centric metric that assesses the visual stability of a web page by measuring unexpected layout shifts (visual jumps), with a low CLS indicating a high-quality user experience.

sFor In Corio, the CLS achieved was improvable, particularly on the mobile version of category and product pages. 

Our actions for this case consisted of : 

• Setting block sizes to prevent any unexpected shifting or resizing using placeholders on the web page.
• Fixing inefficient lazy loading to improve page performance and avoid post-loading displays for images above the fold.
• Removing a 'hourglass' loading image that hindered the overall user experience.

Largest Contentful Paint (LCP) evaluates the loading speed of pages by measuring the time required to display the largest element of the page (above the fold).

It is a crucial indicator for enhancing the user experience. When a page takes a long time to load due to a heavy or poorly defined visual element, the user experience can quickly become negative, and the page bounce rate increases.

The build time is directly related to the LCP result. An increase in build time leads to a proportional increase in LCP. To improve this, we adjusted the Varnish cache system (previously implemented) to have a 24-hour expiration for product pages. This ensures that accessing a product page has a higher chance of receiving a fast response due to a non-expired cache.

We also took the following actions to improve this indicator :

• Base64 encoding of the first 4 images on the category page and the thumbnail images of the product listings.

Converting an image to base64 involves transforming it into a string of characters. As a result, the original image no longer exists as a physical file on the server but is instead directly integrated into the page as code.
This process is not recommended for heavy images as it can significantly increase page load time. We only worked on lightweight images.

• Resizing of the main image and the thumbnails on the left side of the category page. Using a file that corresponds to the displayed size on the screen is not only lighter but also eliminates the need for the browser to perform resizing calculations. 
• Creation of a specific mobile image for the main image on the category page.

Below, you will find the initial values of CLS scores and LCP times, as well as the results obtained.

Please note that we have chosen to highlight both overall results and specific details for both desktop and mobile versions. The scores and times obtained may naturally vary depending on the platform used and the analyzed page. 

The indicators presented here represent a wide range of improvements made.

To learn more about LCP and CLS indicators, we invite you to read the following article dedicated to Core Web Vitals, these essential web signals for the SEO of your PrestaShop.