08/04/2022
+20% performances

Performance pack

The company Rolling Beers, located on the outskirts of Montpellier in Baillargues, in the Hérault region, is made up of a small team.

Rolling Beers was born out of a passion for amateur beer brewing. Always aware that the raw materials and equipment needed for amateur brewing can be hard to come by, especially in regions with less of a brewing culture, the company took the initiative to offer a complete range of products specifically designed for homebrewers and microbreweries.

Whether through their online sales website or through their physical store in the southern region of France, Rolling Beers is committed to promoting the culture of amateur beer brewing in these regions.

The Performance Pack offers a comprehensive solution to address slowdown issues that can affect a PrestaShop store.

 

When we were approached to work on the Rolling Beers website, our first step was to conduct a thorough analysis of the performance of their online store.

This exhaustive evaluation relied on various sources of information, including an exploration of the back office, an assessment of Core Web Vitals, as well as online tests using the GTMetrix tool. These elements provided a complete overview of the situation.

 

Once the audit was completed, we collaborated with our client to develop a detailed action plan aimed at optimizing the entire workflow. This stage allowed us to clearly define the actions to be implemented to improve the overall performance of their store.

 

The results achieved through these actions are compelling, as evidenced by the comparison of tests conducted on GTMetrix. All performance indicators showed significant progress in the desired direction, demonstrating a notable improvement in the overall performance of Rolling Beers' online store.

Before



After


 Beforeafter
Perf. grade
66/ 100
85/ 100
08/04/2022
-1,45s Largest Contentful Paint

Actions on core web vitals

The detailed analysis of Google Search Console data revealed two key areas where we could significantly improve the essential web signals of your site. Therefore, our team of developers implemented a diverse set of strategic actions to optimize these crucial indicators. Here is a detailed summary of these improvements :

 

Improvement of Cumulative Layout Shift (CLS):

  • Regeneration of product thumbnails to the correct dimensions: We ensured that product thumbnails are generated with the appropriate dimensions, ensuring that the image file matches the displayed size perfectly. This optimization will significantly reduce annoying visual shifts during page loading.

  • Preloading character fonts: To enhance the user experience, we implemented strategies to preload character fonts. This will allow fonts to display quickly and without interruptions, contributing to reducing CLS.

  • Fixing block sizes: We determined and fixed block dimensions on the page to prevent any unpleasant jumping or shifting during page loading. This measure aims to provide a smooth and seamless browsing experience.

 

Improvement of Largest Contentful Paint (LCP):

  • Removal of lazy loading of the main product image: To increase the Largest Contentful Paint (LCP), we decided to remove lazy loading of the main product image. This change ensures that the main content of the page loads faster, improving the perception of speed for visitors.

 

To learn more about these improvements and deepen your understanding of Web Vitals, we highly recommend checking out our dedicated blog articles on the Google Page Experience & PrestaShop update: Part 1 and Part 2. These resources will provide you with additional information on best practices and the potential benefits of these optimizations.

Impact on Google Search Console curves


Mobile Version


Desktop Version

 beforeafter
CLS score0.140.03
LCP score1.6s0.15ms
08/04/2022
-50% of Blocking Time

Additional actions

The audit made it possible to target problems specific to this website. The following actions have been implemented:

 

  • Disabling the gamification module which slowed down the back office
  • Identifying backup folders on the hosting
  • Re-configuring PrestaShop native cache behavior
  • Keeping only a single CDN VS 3 in place, this is more efficient with the HTTP2 standard
  • Fixed issue with favicon being loaded twice

 

These cumulative actions improve performances results such as the Total Blocking Time* from 689 ms to 689 ms. 337 ms, a reduction of nearly 50%.

 

*Total blocking time measures how long the browser waits while the page loads.

 

For a resource, the blocking time is a waiting time during which the browser does nothing with it, this generally slows down loading times. Reducing the total blocking time as much as possible clearly lowers the bounce rate.

08/04/2022
+20% performances

Performance tracking

In order to ensure the sustainability of the actions taken during the implementation of the Performance Pack for our client, we have created a specific technical documentation tailored to their case.

 

This documentation is of utmost importance because it will allow us to track improvements in the long term. Indeed, data from Google Search Console, as well as the results of performance tests, can evolve over time. It is essential to analyze them in-depth and monitor them continuously to be able to act swiftly in case of regression.

 

Thanks to this documentation, we have a set of technical benchmarks, reference measures, and key indicators that will enable us to maintain the gains achieved and react proactively to any fluctuations or deterioration in performance. This proactive approach will ensure that your online store continues to provide an optimal user experience and maintains high levels of performance over time.