What is the score calculated by Google Pagespeed Insights or GTMetrix?

Tools like Google Pagespeed Insights or GTMetrix calculate a percentage that allows to evaluate the performance of websites. This score is not directly related to the loading time of the web page but mainly to its design quality. In other words, the Pagespeed score tells you if the page is built to be displayed very quickly or not.

Why is the score on mobile different from the score for desktop? Simply because the tool will take into account the connection speed which is slower on a mobile. Some elements such as the size of the images, the number of requests, etc. will have more importance. We also consider that mobiles are less efficient than computers, so the CPU load (javascript execution) will have a more important part in the calculation of the score.

How to reach the Pagespeed score of 100/100?

With the Prestashop CMS I can tell you that it is almost mission impossible on a real site. Why is that? Simply because you will always have CSS rules and Javascript code unused by the displayed web page that are added by modules or even the theme but for other pages. Typically the following opportunities cannot be fixed:

  • Reduce unused JS resources
  • Reduce unused CSS resources

However, there are several problems reported by Pagespeed Insights that can be corrected to get as close as possible to the 100/100 score.

Here is the list of the most frequent problems and how to solve them or optimize them

Optimization related to server performance

Optimization related to images

  • Delay the loading of off-screen images: Google recommends you to set up the delayed loading of images or videos, ie not to display immediately the content that is not visible on the screen. This is especially relevant on cell phones with small screens and the visitor will not necessarily scroll down, so there is no need to load photos or videos that he will never see. Themes often offer this "Lazy Loading" feature, otherwise you can use a module like Speed Pack (Page Cache Ultimate + WEBP + SQL Profiling + Database cleaning) .
  • Distribute images in new generation formats: Google has created the optimized image format WEBP which reduces the size of the files while keeping a very good image quality. To compress your images in WEBP format, you need a module like WEBP compression , which unlike other modules, will compress all the images in your store, not just those of products and categories.
  • Encode images efficiently: indicates that your images could be more compressed. If you use the WEBP format this problem will also be solved.
  • Image elements do not have explicit width and height: when the browser starts displaying the web page it has not yet downloaded the images but will reserve their location by using the width and height attributes contained in the HTML (theme or module templates). If these attributes are missing then the browser can't reserve the necessary space and each time an image will be downloaded the content of the page will move, this is very unpleasant for the visitor (causes CLS). You must therefore modify your templates to add these attributes.

Optimization related to the server configuration

  • Activate the text compression: under Apache you have to activate the mod_deflate which will compress all the textual content such as CSS, JS, HTML files, etc. You can for example add the code below in the .htaccess file at the root of your store:
<IfModule mod_deflate.c>

   SetOutputFilter DEFLATE

   <IfModule mod_filter.c>

       AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

       AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript

       AddOutputFilterByType DEFLATE application/rss+xml

       AddOutputFilterByType DEFLATE application/xml

       AddOutputFilterByType DEFLATE application/json

   </IfModule>

</IfModule>
  • Distribute static elements thanks to efficient caching rules: in Prestashop, in the Performance page, you must activate the "Apache optimizations" option. Be aware that you will not be able to correct this problem for files that are not hosted on your server (Google Analytics, Facebook, etc.)

Optimization related to the Prestashop theme

  • Make sure that the text remains visible during the loading of web fonts: you use a font on your store that the browser must download. During this time you must tell the browser to use a system font, such as Arial for example, otherwise it can not display anything and it is blocking. To do this you need to add the option "font-display: swap;" to the CSS rule that defines the font (@font-face).
  • Reduce unused JavaScript resources: impossible to optimize because of Prestashop design
  • Reduce unused CSS resources: impossible to optimize with Prestashop design
  • Eliminate resources that block the rendering: impossible to optimize because it must be done from the beginning in the theme
  • Reduce the size of CSS resources: normally fixed by enabling the "Smart Cache CSS" option in the Performance page and by enabling the Apache mod_deflate
  • Reduce the size of JavaScript resources: normally fixed by enabling the "Smart Cache CSS" option on the Performance page and enabling Apache mod_deflate
  • Avoid excessive DOM size: indicates that there is too much information on your page, more precisely the HTML is too large. This is often related to too many products on the page; you can reduce this number or enable an infinite scroll option that allows the products to be downloaded when the visitor scrolls to the bottom of the list.
  • The page does not use passive event listeners to improve scrolling performance: this is a Javascript issue brought by the theme or a module. It will be difficult for you to identify it.
  • Avoid creating critical request strings: this means that files refer to other files, so the browser can only start downloading them after downloading and reading these parent files. To reduce this waste of time, you should reference these files directly in the HTML using the "preload" attribute.

Does the score have an impact on SEO?

Google does not say that it uses this score to rank search results, however I think there is an indirect effect.

Indeed, Google measures what is called "Dwell Time", which is the time that has elapsed between 2 clicks in a list of results. It knows if the visitor stayed there for a long time or not at all. For example, if this Dwell Time is less than 3 seconds, we can think that he is not interesting and risks to be demoted.

To conclude

It is obviously very complicated to implement all these optimizations! The ideal is to take them into account during the development of the theme and modules, that's why I created the Prestashop JPresta Origin theme and the modules that accompany it

A very good loading speed of your store pages will not make you sell more, but a slow website will make you lose customers for sure!