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 :
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 :
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.
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.
|CLS (Cumulative Layout Shift)||0,25||0|
|LCP (Largest Contentful Paint)||1,3 s||0,553 s|