21/03/2023
-20% of construction time

Web Essential Signals-Focused Performance Pack

Here is a case study focused on the positive impacts generated by the implementation of a "Performance Pack" within TOF Paris, a renowned French brand known for its collections of sensual clothing designed specifically for men. This brand offers a diverse range of high-quality underwear, sportswear, and swimwear for men.

 
Our client's request primarily targeted an improvement in Core Web Vitals to enhance the SEO of their online store.

Let's discover how the introduction of this initiative has revitalized and improved the entire website.

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.

 before772424.com
Perf. grade
67/ 100
93/ 100
Construction time764 ms397 ms
LCP  (Largest Contentful Paint)2 s954 ms
CLS  (Cumulative Layout Shift)0,560

 

 

Product Sheets GtMetrix Indicator Readings :

Before

After

17/03/2023
10 % LCP reduction

Specific actions to optimize the LCP

Among the Core Web Vitals, it is essential to emphasize the Largest Contentful Paint (LCP). In connection with the previously mentioned construction time, LCP measures the time it takes for the largest element on the page to be displayed.
Naturally, a reduction in this delay is favorable for a better user experience.
To be considered satisfactory, it is desirable for this figure to be below the 2.5 second threshold.

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/

 
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.

 before772424.com
LCP  (Largest Contentful Paint)2 s954 ms

 

Reference framework :

17/03/2023
-20 % of the CLS score

Specific actions to optimize the CLS

The CLS (Cumulative Layout Shift) score evaluates the visual stability of a web page by considering layout disruptions that can occur as users navigate.

These disruptions, potentially annoying for visitors, can result from the movement of elements during page loading, resizing of widgets, or even the gradual appearance of blocks. To ensure a high-quality user experience, Google recommends maintaining a CLS score below 0.1.

 

We focused our CLS optimization efforts specifically for mobile on category pages and product pages (which were causing issues with Google) :

  • Essentially, this involves reserving spaces and fixing positions for the various components and blocks on the site's pages.
  • During the verification iterations via Google Search Console as part of our monitoring, we were able to gradually refine these optimizations.

 before772424.com
CLS  (Cumulative Layout Shift)0,560

 

 

Reference framework : 

 

To learn more about the Core Web Vitals, including the CLS and LCP indicators, we invite you to read the dedicated article on this topic.

14/07/2023
100% of Fast URLs

Impact on Google Search Console charts


Monitoring the trends through the Google Search Console tool helps highlight the changes resulting from various actions taken.

 

The summary page of the "Core Web Vitals" report in the Search Console details the data based on the device used to view the URL, whether it's on mobile or desktop. The data is categorized based on the URL status, either "Poor," "Needs improvement," or "Good."

 

An URL is considered fast when all the measured indicators (core web vitals) are in the "Good" range.

 

Before our interventions, the number of fast URLs was low, especially with a score of zero fast URLs for the mobile version.

 

After the implementation of our interventions starting on 17/03/203, the improvement trend has increased to achieve a 100% optimization result: all URLs are now fast, both on desktop and mobile versions.

Before

After