When we are interested in the question of how to improve our webperf scores and metrics on a Magento site , it is difficult to ignore the two main web performance measurement tools made available by Google: PageSpeed Insights and Google Lighthouse . They are useful for improving the user experience of an e-commerce, regardless of the CMS (Magento, WordPress, Shopify, Prestashop, etc.).
There are many webperf audit and site speed testing tools , and the common mistake is to use several at the same time. Indeed, the indicators and calculation methods used are not always identical, so the results and optimization recommendations may be different.
To measure your performance using Google’s free tools, and track the evolution of your scores over time, PageSpeed Insights and Lighthouse are an avenue to explore. You can easily share this data internally to raise awareness of web performance among all teams (technical, product, marketing, e-commerce, etc.).
Let’s find out how these free solutions work, and how to optimize your Magento site’s scores.
How PageSpeed Insights and Lighthouse work for a Magento site
Google, the most popular search engine, provides free tools for auditing the performance of any website.
Lighthouse (which serves as the basis for establishing the PageSpeed Insights score) allows you to evaluate different performance indicators. It assigns a performance score based on criteria of loading speed, accessibility, SEO, and more broadly good web practices.
PageSpeed Insights, also a free tool, allows you to evaluate the performance of a web page on mobile and computer . A score, from 0 to 100, is calculated according to several criteria relating to loading speed, including Core Web Vitals.
Obtaining a score of 100/100 should not be the primary objective, it is not necessarily achievable for your Magento site. Why? Because this score does not reflect the quality of the user experience (a site with a score of 100 can still offer a bad experience). Also, keep in mind that Google itself does not only use this score for its ranking of sites on its search engine .
Auditing your site with PageSpeed Insights or Lighthouse helps identify problems and blocking points when loading your e-commerce pages. Google’s tools list optimization recommendations to reduce the loading time of Magento site pages, which will help reduce the bounce rate, improve conversion rates and sales, and support the SEO strategy… but you need to know how to apply them intelligently for them to be effective. An expert opinion or a web performance automation solution is then essential.
Optimizing your Magento site’s PageSpeed Insights and Lighthouse scores
Now, let’s take a look at some of the recommendations that PageSpeed Insights and Lighthouse make to optimize your site’s performance.
Reduce the number of requests needed to load a page
A browser must send requests to your server to display a page. These requests may concern third-party resources, such as tracking or analytics tags (Google Analytics), advertising, features published by third parties, etc. The fewer requests to generate, the faster your page will load. Also, using caching and pre-loading key requests saves time and speeds up page loading.
What is the maximum number of requests for a web page? There is no predefined number, because everything depends on the number of resources needed to display your page. However, limiting their number and prioritizing them helps optimize the user experience, and make display and interactions faster.
Eliminate resources blocking page rendering
Blocking resources are mostly related to scripts, especially JavaScript . The more scripts a page contains, the more its loading speed can be degraded because the user’s browser must read and execute these scripts. As long as the browser is busy with these tasks (that is, every time it encounters a script in the page’s code), it cannot process the rest of the page’s code, which can block rendering and interactions.
In some cases, it may be useful to embed JavaScript and/or CSS in the HTML file so that the content is displayed more quickly, or to defer these JavaScripts so that their processing does not prevent the page content from being displayed.
Limit CSS file size by code minification
CSS files (like JavaScript and HTML files) can be large. They can contain line breaks, spaces, etc., data that makes it easier to read for human eyes, but is useless for a search engine to understand the code. Minifying resources (CSS or JS) therefore allows you to remove all unnecessary characters , and therefore the size of the file which will contain less data, without altering the reading of the code by the browser.
The use of an extension is necessary to carry out this optimization work automatically, and webperf optimization solutions natively ensure code minification.
Finally, it is also important to remove unused CSS and JavaScript files.
Reduce the TTFB of a Magento site (server response time)
TTFB , Time To First Byte , is the time it takes for the user’s browser to receive the first byte of data from the server. Several factors can increase server response times.
Although server response time is not directly part of the indicators linked to the speed perceived by users, a good TTFB is a source of improvement in site performance , user experience and natural SEO referencing.
We recommend these other pages:
