Pratikkumar P. Gaikwad | 08 min read | Feb 06, 2020

All About GTMetrix

  • 5.Wrapping Up
  • When it comes to testing the results, GTmetrix is one of the best alternatives to PageSpeed Insights.
    At OSC, along with other performance testing methods, we use GTmetrix every day to support our customers inspect their pages and apply their feedback.
    While PageSpeed primarily concentrates on colours and ratings, GTmetrix has a classic GUI to direct users in its suggestions and its waterfall is the big one.
    Many configuration options (test server area, browser style, etc.) make the GTmetrix experience complete and dependable.
    In this guide we will dive deeper into GTmetrix and you will discover why it is a very valid tool to determine the actual performance of the website.

    2.Working of GTMETRIX

    GTmetrix is the free performance testing platform developed by the people of GT.net, a Vancouver based hosting company. They provide dedicated clustered and private cloud infrastructure options, with a broad performance-dedicated toolkit: GTmetrix is among them.
    We suggest the first thing that is to create a free account before you check the performance with GTmetrix.
    It helps you to configure the test and get a more consistent outcome in results.

    How to tailor the check on GTmetrix?

    There are various options you can configure to tailor your GTmetrix research experience. Let’s dig into them.

    Location (Test Region)

    There are 30 evaluation servers which can be accessed. The first move in achieving reliable results for speed tests is to choose a place as close to your server as possible.

    It suggests that checking your speed from Canada will give you a deceptive outcome if your server is based in Europe unless you are targeting Canadian viewers too. Don’t forget to enable a CDN at your site in this case!

    You can locate the positions of GTmetrix Servers here.

    Browser

    You can choose between:

    Firefox for Desktop

    Chrome for Desktop

    Chrome for Android (Galaxy Nexus)

    Connection

    Now that Google has moved to mobile-first indexing, it’s important to be mindful of how the site performs across different network styles.GTmetrix gives you several possibilities:

    Unthrottled Connection

    Broadband (slow, fast, and normal)

    3G Mobile

    2G Mobile

    LTE Mobile

    56K Dial-up

    3. HOW TO READ GTMETRIX TABS AND INTERPRET THEIR RESULTS

    Once you have launched a GTmetrix report you will see all the information regarding your site’s results.
    Next, you have a summary of the options you have selected for testing:
    The good thing about GTmetrix is that it can show many forms of metrics, including tools such as PageSpeed and Yslow.
    This is why you will see the official results (GTmetrix does not measure one by itself) on the left, and page details on the right:

    4. Diving into the Waterfall Chart of GTmetrix

    Click on the third tab and read GTmetrix’s Waterfall chart to learn more about the performance of your site.The Waterfall Map explains the page’s loading behavior by dissecting each request and calculating its timing.

    This includes either script, media file or external tool that is included in the page being tested

    This tab is very useful for getting an idea of what resources your page will load, and in what order.
    For each file, you have a load time, represented by horizontal bars: the longer the row, the slower the request for download / execution takes.The GTmetrix Waterfall Chart is composed of five columns, from left to right:

    1. The requested resource file name.
    2. HTTP Response Status retrieved from the server for that tool.
    3. Source file, this is where the resource comes from.
    4. For each resource, file Size.
    5. Load Time Breakdown, which represents the time it takes for each resource to download / execute.

    If you hover over the file name, you can read the entire path of the selected file. And if you Ctrl+Click on it, you can open the file in a different tab, to identify it better and see its content.If you are using WordPress, it’s going to be easy to grasp if that file comes from one of the plugins or themes that you use.

    At this point, there is a very clear picture before you of how well the website is doing.

    Until heading to the load breakdown segment, keep an eye on the Fourth column, the file size.

    Note down the file and try to fix it when you find large file sizes.

    Load Time Breakdown

    The color code designed by GTmetrix is useful for differentiating the different parts of the loading process for each resource.

    Hovering on the load time bar for each resource will open a pop-up where the various phases of the loading process of the resource are expressed in different colours.

    GTmetrix also indicates the event timing in addition to the relative time of each phase of request execution, which is the specific timing at which certain milestones are reached.

    There’s also a color code for event timings:

    • A green line represents the moment when the screen (initial paint) begins the very first rendering;
    • The blue line shows when the user finds the DOM accessible;
    • The red line is the Onload, that is when the user installs and executes the website and all of its components;
    • We see the fully loaded case with the purple line: the Onload has shot and there has been no network operation for 2 seconds.

    Some of these lines often occur in the next GTmetrix column, which is named Timings.

    The Timings tab

    The tab is very helpful because it explains the various times at which page loading is interrupted, in a simple and concise way.

    You can see the information contained therein in the image above. The time required for eventual redirections, links and the duration of the bottom end will also be indicated. You will then be able to see how long Time to First Bytes takes, accompanied by immersive time from DOM, First Paint, Contentful Paint, activated DOM and Onload.

    What we like most is the time taken by the GTmetrix team to explain the definition of each metric in plain English.
    So useful to get a first basic education on a complex page loading process!

    Video and History are the last two tabs to any GTmetrix chart.

    The former captures a screenshot of your website loading (including bottlenecks), while the latter displays the performance history of the same page checked.

    5.WRAPPING UP

    In this article, you have to learn GTmetrix, one of the best performance testing tools you can use as a PageSpeed Insights substitute (or alongside).

    The good thing about GTmetrix is that it includes not only immediate pace and efficiency metrics (such as loading time in seconds, and scores), but also a comprehensive set of categories to explore: from the Waterfall Charts to the Event Timings, to the Timings page, plus a bunch of excellent observations and performance measures explanations.

    Magento Extensions Built by our In-house Team of Magento

    Use our powerful magento extensions built in-house by our team of certified magento developers to take your ecommerce store to the next level.

    For Further Details or Additional Information

    OR

    If you want to know more about our Services