Le rucher La reine des Vosges

Le rucher La reine des Vosges

www.lerucherlareinedesvosges.fr
11/02/2022
- 39% LCP time

Improvement of the LCP

The LCP (Largest Contentful Paint) is one of the Essential Web Signals* (Cores Web Vitals) taken into account in the Google algorithm.
It corresponds to the time required before the display of the largest element of the page without scrolling.


Procedure of the intervention:

Following an analysis of the Google Search Console, an LCP score problem was detected on the blog part of the website and in particularly on the main image, i.e. the largest element displayed without scrolling .


Several actions were necessary to reduce this loading time:

  • Remove lazy loading. All images visible without scrolling should have instant display.
  • Resize image: The displayed image was smaller than the associated file. Its file weight was increased, and this involved a resizing calculation for the browser.
  • Preloading: Technique consisting in prioritizing the loading of an element of the page before displaying its rendering.
  • This last action was ultimately not enough. We were able to offer an alternative with base64 encoding.
  • Encode the image in base64: The image is directly in the html, which allows the browser to display it instantly, without downloading any file.

The LCP score as been improved from 2.3 to 1.4 seconds, which represents nearly a 40% reduction of this indicator, which must be as small as possible.


The strengths of an optimized LCP:

  • Faster visual loading
  • An optimized user experience
  • Rank higher in Google search results

Evolution of LCP score

Evolution of the LCP score

 beforeafter
 Perf.grade
74/ 100
88/ 100
 LCP Reduction2,3s1,4s