While PageSpeed mostly focuses on colors and score to guide users through its recommendations, GTmetrix counts on a more classic interface, where its waterfall plays the leading role.<\/p>
Several customization options (test server region, type of browser, etc.) make the experience with GTmetrix complete and reliable.<\/p>
In this tutorial we\u2019re going to deep dive into GTmetrix, and you\u2019ll understand why it\u2019s a very valid tool to assess the real performance of your website.<\/p>
What Is GTmetrix and How Does It Work?<\/h2>
GTmetrix is the free performance testing tool built by the people of GT.net<\/a>, a hosting company based in Vancouver, Canada. They provide dedicated, clustered, and private cloud hosting solutions, plus a specific toolset dedicated to performance: among them, there\u2019s GTmetrix.<\/p> The first thing we suggest doing before running a performance test with GTmetrix, is to create a free account.<\/strong><\/p> This allows you to customize your test and have a more reliable performance result.<\/p> There are several options that you can tweak to customize your testing experience with GTmetrix. Let\u2019s see them together. There are 30 test servers available to try. As we mentioned in our article about how to correctly measure your website\u2019s speed<\/a>, the first step to get reliable results for speed tests is to choose a location as close as possible to your server<\/strong>. This means that if your server is located in Europe, testing your speed from Canada would give you a misleading result, unless you\u2019re targeting Canadian audience, too. In this case, don\u2019t forget to enable a CDN on your site<\/a>!<\/p> You can find GTmetrix servers\u2019 locations here<\/a>.<\/p> You can choose between:<\/p> Now that Google switched to mobile-first indexing<\/a>, being aware of how your site performs on different types of networks is crucial.<\/p> GTmetrix gives you several possibilities:<\/p> With this option you can see the impact Ads have on your site. When you tick the AdBlock option, GTmetrix will scan your URL while ads are blocked.<\/p> You can check a real case example on GTmetrix\u2019 site, where they used Smashing Magazine website<\/a>.<\/p> This will stop the speed test right after the Onload <\/em>event, <\/em>instead of after 2 seconds of network inactivity (which is the default for GTmetrix, and is referred to as Fully loaded time<\/em>). <\/em> The inconvenience of using this option is that, sometimes, not all the elements of the page are downloaded before the Onload<\/em> event fires (think about JavaScript based images carousels, or similar behaviors)<\/p> As a result, page load times measured when this option is enabled could be inconsistent.<\/p> That\u2019s why, by default, GTmetrix will test your site considering the Fully loaded time<\/em>: it waits for the Onload<\/em> event to fire (including ads and below the fold elements) and then waits for a network inactivity of 2 seconds. It\u2019s important to consider that a website can be perfectly usable in a shorter amount of time than that indicated by the Fully loaded time<\/em>.<\/p> If you want to see how your page loads exactly, you can enable the Video<\/em> option.<\/p> GTmetrix will record a video where you\u2019ll see your page loading 4x slower, so it would be easier to detect eventual loading issues.<\/p> Once you launch a GTmetrix report, you\u2019ll see all the info concerning the performance of your site.<\/p> First of all, you have a summary of the testing options you chose:<\/p> The nice thing about GTmetrix is that it allows you to see several types of metrics, including those coming from other testing tools, like PageSpeed and Yslow<\/a>. <\/p> That\u2019s why you\u2019ll see the external performance scores on the left (GTmetrix doesn\u2019t calculate one of its own), and the page details on the right: The page details are the most important and immediate info you can have on your website performance:<\/p> This is a great start to understand how your site is performing. \ud83d\ude42<\/p> As we explained in our guide about page speed optimization for WordPress<\/a>, different speed tools can provide different load times or performance results.<\/p> This statement becomes immediately clear when looking at GTmetrix\u2019 tabs. <\/p> Here\u2019s the list of recommendations in the PageSpeed tab: And here\u2019s how, the same website, scores under the YSlow tab:<\/p> To dive deep into the details of your site\u2019s performance, you have to click on the third tab and read GTmetrix\u2019 Waterfall Chart.<\/p> The Waterfall Chart describes the loading behavior of your page, by dissecting every request and measuring its timing. <\/p> It contains every script, media file or external resource included in the tested page. This tab is very useful to have an idea of what resources your page loads, and in which order.<\/p> For every request you have its loading time, represented by horizontal bars: the longer the bar, the slower the request will take to download\/execute. GTmetrix Waterfall Chart includes five columns; from left to right:<\/p> Source:<\/em> GTmetrix Blog<\/a> If you hover the file name, you\u2019ll be able to read the full path of the selected file. And if you Ctrl+click on it, you can open the file in another tab, to better identify it and see its content. Since you\u2019re using WordPress, it will be easy to understand if that file is coming from one of the plugins or theme you\u2019re using. At this point, you have in front of you a very clear picture of how well your site is doing. <\/p> Before proceeding to the load time breakdown section, keep an eye on the fourth column, File Size<\/em>. If you notice large file sizes here, note down the file and try to fix it: are they images or videos? In this case, have a look at our comprehensive guide on how to optimize images and reduce their file size<\/a>.<\/p> The color code that GTmetrix designed is helpful to distinguish the different parts of the loading process for each resource.<\/p> Hovering on the load time bar for each resource will open a pop-up where the different phases of the resource\u2019s loading process are expressed in different colors:<\/p> In addition to the relative time of each phase of the request execution, GTmetrix also indicates the event timing<\/strong>, which is the specific timing at which certain milestones are reached.<\/p> There\u2019s a color code for event timings as well:<\/p> Some of these lines are represented also in the next GTmetrix tab, labeled as Timings<\/strong>.<\/p> This tab is very helpful because it provides a clear and visual explanation of the different moments in which the loading time of your page is being split. In the image above you can see the info included in it. You\u2019ll have an indication of the time needed for eventual redirects, connection, and backend duration. Then you\u2019ll be able to see how long the Time to First Bytes takes, followed by DOM interactive time, First Paint, Contentful Paint, DOM loaded and Onload. What we like the most about the tab, is how GTmetrix team takes the time to explain the meaning of every metric,<\/strong> in plain English. The last two tabs of any GTmetrix report are Video<\/em> and History<\/em>. <\/p> The first one records a video of your page loading (bottlenecks included), while the second one shows the history of the performance of that same tested page.<\/p>![\"GTMetrix](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-screen-when-logged-in-1024x226.png\")
<\/figure>How to Customize Your GTmetrix Test?<\/h3>
<\/p>![\"GTMetrix](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-screen-when-logged-in-extended-view-1024x544.png\")
<\/figure>Location (Test Region)<\/h4>
<\/p>Browser<\/h4>
Connection<\/h4>
AdBlock<\/h4>
Stop Test Onload<\/h4>
The Onload <\/em>event <\/em>is when the overall processing of the page is over, and all the resources of the page have been downloaded. <\/p>
<\/p>Create Video<\/h4>
How To Read GTmetrix Tabs and Interpret Their Results<\/h2>
![\"GTMetrix](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-Options-Summary.png\")
<\/figure>
<\/p>![\"GTMetrix](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-performance-score-and-page-details-1024x148.png\")
<\/figure>
<\/p>![\"PageSpeed](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-tabs-PageSpeed.png\")
<\/figure>![\"YSlow](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-tabs-YSlow.png\")
<\/figure>Diving Into the GTmetrix Waterfall Chart<\/h3>
<\/p>![\"GTMetrix](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-Waterfall-chart-1024x662.png\")
<\/figure>
<\/p>![\"GTMetrix](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-Waterfall-Chart-Columns.png\")
<\/figure>
<\/p>
<\/p>
<\/p>
<\/p>Load Time Breakdown<\/h3>
![\"GTMetrix](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-Waterfall-Chart-hover.png\")
<\/figure>![\"GTMetrix](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-Waterfall-Chart-Event-Timings-1024x438.png\")
<\/figure>The Timings tab<\/h3>
<\/p>![\"GTMetrix](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/GTMetrix-Timings-Tab-1024x596.png\")
<\/figure>
<\/p>
Super useful to have a first grounding on the complex process of page loading!<\/p>