Tof Paris

Specific Actions to Reduce Construction Time

Firstly, the goal is to reduce construction time since it has a notable impact on one of the key indicators among the Core Web Vitals defined by Google: the LCP (Largest Contentful Paint).

In fact, the shorter the construction time, the better the LCP score.

Following a preliminary analysis, we were able to identify several points to implement in order to reduce construction time and, by extension, the LCP.

1/ The first step involved benchmarking the construction times of pages, identifying three main bottlenecks.

2/ The second step was to place caches on the following modules :

• stfeaturedslider
• stlovedproduct
• stspecialslider
• productsasvariants

After implementing these caches, a new benchmarking was carried out. It identified other modules that required caching :

• ganalyticspro
• stthemeeditor
• spmreviewsadv

3/ The final step in these actions is to reconfigure cache settings in the back office to further optimize performance.

Here is the list of additional actions, in addition to construction time, taken to optimize the LCP on tof-paris.com : 

• Removal of lazy loading on the largest image of the product page.

Lazy loading is generally quite useful for optimizing page loading times. (Learn more about lazy loading here : https://www.profileo.com/blog/optimiser-site-prestashop-avec-le-lazy-loading/)
However, in the case of images above the fold, it is not recommended at all. In our case, it was even a hindrance to achieving a good LCP optimization.

• Regeneration of category and product page images to match the file size displayed on the screen, avoiding browser resizing calculations.

You can find all our recommendations on ideal product image formats in the following blog article : https://www.profileo.com/blog/optimisation-prestashop-travailler-ses-images-de-fiche-produit/

• Compression of slideshow images without loss of quality using https://tinypng.com/

 
Additional actions taken during Search Console tracking.

• Optimization of the largest image (LCP) on the product page by converting it to base64.
• Reduction in the size of the cookie banner to no longer be considered the largest element on the page.
• Elimination of lazy loading on the first 4 category page images and conversion of these four images to base64. The following images are loaded using native lazy loading.
• For the category page, 8 images were converted to base64 encoding, with the second row on some screens above the fold

Converting an image to base64 involves transforming it into a character string. Instead of being a separate file, the image is directly embedded into the page as code, avoiding browser file downloads. It's worth noting that this technique is primarily suitable for lightweight images, as excessive use on larger images can lead to page overload.