How to get good WebPageTest results with Magento
You may be familiar with PageSpeed Insights, one of Google’s free tools to test the performance of your Magento site… If you want to go even further in analyzing your loading times, you should use WebPageTest. Thanks to all the data it offers, you will get a lot of information about the loading time of your pages, which will allow you to know what actions to put in place to optimize your website .
How to use this tool and make the most of it? How to improve the webperf scores and metrics of your Magento site ? We give you the basics to get the best results on WebPageTest, and thus promote your SEO on Google and the conversion rate on your e-commerce site. Because with quality content, the speed of a site is a major criterion for a successful customer experience , in addition to supporting your actions to optimize your SEO!
Optimizing Magento Page Loading Time: A Little Reminder
Before you run your first performance test with WebPageTest, keep in mind a few basic rules to ensure your pages load as quickly as possible :
- use the latest version of Magento, accepting the updates offered by the platform;
- optimize multimedia content so that it is as light as possible (adapted resolution, compression and resizing of images, etc.);
- enable the CMS’s “Full-Page Cache” feature;
- do not clutter yourself with unnecessary extensions;
- choose efficient web hosting that is suited to your needs ;
- enable Magento production mode, and proceed with minification of CSS and JavaScript codes.
Once you have all this in place, you will have set the stage for more in-depth analysis using the WebPageTest tool. You will then be able to know more precisely what may be lacking on your site and gain a few more tenths or hundredths of a second, or even whole seconds on the page loading speed.
Introduction to WebPageTest: How to perform a test
You absolutely must know how to set up your performance tests to obtain relevant data. Once you are on the tool , you will have to fill in several fields:
- the address of the page to be tested (WebPageTest does not test entire sites, but pages independently);
- the location (choose a location that is relevant to your target : if you sell mainly to customers in France and you are not targeting an international market, it is not necessarily wise to know what the loading time of your page is in Beijing or Sydney!);
- the browser (don’t hesitate to consult Google Analytics data to find out which browsers are most used to view your website on PC and mobile);
- advanced settings (here you will find values and features selected by default, but you can customize the test, for example by choosing “First View and Repeat View” to also evaluate the performance of cached pages ).
Analyzing test results: how to read the data
Once the test is launched, you get the results after a few dozen seconds. The amount of data presented and the apparent complexity of the graphs can certainly be a little scary, but you will see that all this will be of great use to you for the optimization of your website.
The performance results summary already gives you a lot of useful information to see what is optimized and what is lacking. If you see that the scores with the letters at the top of the page are mostly red and orange, then you have some work to do!
Then, in the table, you can rely on various indicators, including:
- the First Byte, corresponding to the time for the first byte to arrive at the browser from the server;
- the Start Render column, showing the time it takes for users to see the first element appear on the page and for it to no longer be completely white;
- the Speed Index, or the time required for elements to be loaded above the waterline
- Core Web Vitals, the metrics that Google takes into account to assess the quality of the user experience.
To get the average of the data collected during the different test series, simply click on “Plot Full Results”.
Below this table, you have access to a graph that may seem cryptic at first glance: the Waterfall . At first glance, you won’t be able to get much out of it, but a deeper analysis of this diagram will help you optimize your pages. And reading it is not so inaccessible after all. All the resources needed to load the page are presented in the form of a list, and you can easily see which ones take the longest to load, and which ones you will therefore have to optimize.
WebPageTest even gives you the option to watch a video showing how the page you tested loads. Why is this useful? Because seeing in real conditions how fast a page loads on a computer or mobile is complementary to figures expressed in milliseconds or as scores.
Improve performance: know what actions to implement using WebPageTest
Now that you have a general understanding of how the WebPageTest tool works, it’s time to mobilize your resources and start implementing corrections to improve your results!
The first step is to click on the scores displayed in red at the top of the page. You will then see a score out of 100, but more importantly, you will get WebPageTest’s recommendations . Here is an example: if your Compress Image score is D, clicking on it will direct you to a list of images that could be compressed to make your site load faster. Another illustration: by clicking on the Cache Statistic Content score, you will see which elements of the page are not taken into account in caching, and thus slow down the loading of pages for users who have already visited the page. It is then up to you to modify the cache settings or use other methods to call the files that do not exploit caching.
To further improve your results, you will need to focus on Waterfall analysis , which presents the different requests and their loading times. We will not go into the details of this analysis here, but remember the following information:
- if you notice that the graph is “stair-stepped” (requests are not made at the same time), it is probably because you are not using HTTP/2 , which allows simultaneous and therefore faster loading (request multiplexing);
- if the TTFB, or Time To First Byte, is greater than 200 ms on the first line of the table (you can view it by clicking on this line), this may be a sign of weaknesses at the backend level, and that you may need to optimize your hosting , or even change your host, web server configuration or CDN;
- if loading produces too many requests (lots of lines), ask yourself if they are all useful to the page and a good experience for customers (maybe you could remove extensions, third-party scripts, images, custom fonts, combine CSS files, etc.).
If you apply all of these recommendations, you should significantly improve the performance of your Magento site (or designed with the WordPress CMS or another website creation solution). By gaining in loading speed, you will improve the user experience, your conversion rates, and it will also be beneficial for your SEO. Thus, you maximize the chances that new customers will buy your products and become loyal to your brand!
We recommend these other pages:
