Welcome to this exciting blog series, where over a series of articles, we’ll embark on a comprehensive exploration of GTmetrix, a renowned tool used by web developers and SEO experts worldwide to analyse website performance and speed.
What to expect
- Understanding GTmetrix: We’ll start with the basics, introducing GTmetrix and its importance in today’s digital landscape. We’ll delve into how GTmetrix evaluates website performance, the metrics it uses, and why these metrics are critical for a superior user experience.
- Behind the Scenes: A closer look at the technology and algorithms that power GTmetrix. Understand the core principles of web performance metrics like load time, page size, request counts, and more.
- Replicating GTmetrix Functionality: This is where things get hands-on. We’ll guide you through coding sessions where you’ll learn to replicate some of GTmetrix’s core functionalities. These tutorials will cover various programming languages and tools, providing practical experience in building performance analysis tools.
For the purposes of this series, we are going to delve mainly into the grading and performance metrics provided by GTmetrix, while we may look into some of the structure elements, we won’t be investigating in detail or replicating them directly. The aim of this series is not for you to be able to build your own fully working GTmetrix clone, but instead for you to understand whats going on behind the scenes.
Table of Contents
Who should follow this series?
This series is designed for web developers, SEO specialists, and anyone passionate about website performance and optimization. Whether you’re a beginner looking to learn the basics or an experienced professional seeking deeper insights into GTmetrix, this series has something for you.
Technology stack
Within this series, we are going to focus on implementing GTmetrix functionality using a combination of PHP and NodeJs. We will be using the Laravel framework to get our web application started.
What is GTmetrix?
GTmetrix is a powerful tool designed for website performance analysis. It’s widely used by web developers, SEO experts, and digital marketers to evaluate and improve the loading speed and overall efficiency of websites. In this section, we’ll explore what GTmetrix is, how it works, and why it’s essential for anyone managing or developing websites.
Understanding GTmetrix
GTmetrix stands out as a comprehensive tool for analyzing web pages, primarily focusing on factors that impact their performance and loading speed. At the core of its functionality, GTmetrix meticulously examines various aspects of a web page, presenting a detailed report that encompasses a range of performance metrics. These include the PageSpeed Score, YSlow Score, Fully Loaded Time, Total Page Size, and the number of requests made. These metrics provide a holistic view of a website’s performance, offering critical insights into areas needing improvement.
One of the standout features of GTmetrix is its use of Google’s Lighthouse and Yahoo’s YSlow for comprehensive scoring. The PageSpeed Score, sourced from Google’s Lighthouse, concentrates on several crucial factors like mobile-friendliness and SEO. Meanwhile, the YSlow Score is influenced by Yahoo’s guidelines for high-performance websites, with a particular emphasis on the frontend structure and overall performance. Each GTmetrix report is rich in information, not just scoring websites but also offering practical, actionable recommendations. These suggestions cover a wide spectrum, from image optimization and browser caching to minimizing redirect chains and enhancing server response times.
In addition, GTmetrix introduces a distinctive feature: the waterfall chart. This graphical representation is instrumental in showing how each element of a web page loads over time. It’s an invaluable tool for pinpointing specific bottlenecks or issues that may be hindering the page’s speed. Furthermore, understanding that website speed can vary based on geographic location, GTmetrix allows users to test their site’s performance from different global locations. This feature is crucial in gauging a website’s global performance and user experience.
Its worth noting that GTmetrix doesn’t just stop at analysis; it also offers monitoring services. Users can schedule regular tests to track their website’s performance over time. This continuous monitoring is complemented by the ability to set alerts, ensuring users are promptly notified if their website falls below set performance thresholds. This aspect of GTmetrix not only aids in maintaining optimal website performance but also plays a vital role in proactive web management.
Why does website speed matter?
In today’s digital landscape, the significance of user experience (UX) cannot be overstated. A key component of UX is website speed. Sites that load quickly are more likely to retain visitors, leading to lower bounce rates and higher levels of engagement. This directly enhances user satisfaction, which in turn can positively influence SEO rankings. As users become increasingly impatient with slow-loading pages, the speed at which a website loads becomes a critical factor in maintaining a positive user experience.
Search Engine Optimization (SEO) is another critical area profoundly affected by website speed. Major search engines like Google have explicitly stated that site speed is a significant ranking factor. This means that websites optimized for speed are more likely to secure higher positions in search results. A fast-loading website is not just about providing a better user experience; it’s also about improving visibility in search engine results pages (SERPs). This is where tools like GTmetrix come into play, offering detailed insights into how a website performs and what can be done to improve its speed and, consequently, its search engine ranking.
The impact of website speed extends beyond user experience and SEO; it also has a direct correlation with conversion rates. Faster websites create a smoother experience for visitors, encouraging them to stay longer and engage more deeply with the content. This increased engagement can lead to higher conversion rates, whether that’s in the form of sales, sign-ups, or other desired actions. In a digital marketplace where every second counts, the speed of a website can be a deciding factor in turning a visitor into a customer.
Ultimately, in a highly competitive online environment, having a fast-loading website can be a game-changer. In the race to capture and retain user attention, speed is a critical factor. GTmetrix offers valuable insights that can help website owners understand how their site performs in terms of speed and what they can do to improve it. By leveraging the data and recommendations provided by GTmetrix, website owners can enhance their site’s performance, giving them a significant edge over their competitors. In essence, GTmetrix is not just a tool for analysis; it’s a strategic asset in the pursuit of digital excellence.
The GTmetrix workflow
In order to understand how GTmetrix analyses websites, we first need to take a look at their workflow, and see if it provides us any clues on how it works under the hood. Lets analyse this website to see what happens.
First of all, I’m going to submit this web address into the homepage:
Once submitted, I get the following screen, which shows that the GTmetrix website is offloading my request to a queue, which makes sense, as this process could take several seconds to execute, and given the number of sites GTmetrix analyse every hour, they would want this to be distributed.
A couple of seconds later, the webpage is updated, and now its reported that the website is being fetched. This can be seen below.
Given that our site has been fetched, we can see a preview of the website on the left, the second to last stage is “Analyzing with Lighthouse”, as seen below.
The final stage that GTmetrix reports to us is that a report is being generated, as seen below.
And with that, a few seconds later, I am taken the report to see my performance rating, structure rating and timeline.
How does GTmetrix get its performance data?
GTmetrix’s apporach to gather performance data is deeply interwined with its use of Google Chrome, one of the most popular browsers globally. Chrome, or Chromium more specifically, provides comprehensive performance metrics right out of the box, and this is what underpins the data in the report on GTmetrix.
For example, if I visit my website, RichardAnderson.co.uk, in Google Chrome and run the following command in the console through DevTools (press F12);
JSON.stringify(window.performance.getEntries());Then Google Chrome will spit out all the information related to performance on my page load, as seen below. There is a lot of information here, so I won’t directly copy and paste, but we will be extracting out relevant information a bit later.
The KEY performance metrics are located in the first element of the returned array, as seen below;
{
"name":"https://richardanderson.co.uk/"
"startTime":0
"duration":427.19999999925494
"fetchStart":2.099999999627471
"domainLookupStart":8.599999999627471
"domainLookupEnd":8.599999999627471
"connectStart":8.599999999627471
"secureConnectionStart":35.89999999944121
"connectEnd":58.09999999962747
"requestStart":58.09999999962747
"responseStart":94.59999999962747
"firstInterimResponseStart":0
"responseEnd":96.19999999925494
"transferSize":12405
"encodedBodySize":12105
"decodedBodySize":38089
"responseStatus":200
"unloadEventStart":0
"unloadEventEnd":0
"domInteractive":300.5
"domContentLoadedEventStart":300.5
"domContentLoadedEventEnd":300.69999999925494
"domComplete":427.19999999925494
"loadEventStart":427.19999999925494
"loadEventEnd":427.19999999925494
"type":"navigate"
"redirectCount":0
"activationStart":2099.199999999255
"criticalCHRestart":0
}The information above, directly correlates with information on the GTmetrix report! I’ve attempted to map the GTmetrix performance metrics to the associated entry in the JSON above, however please be aware, some of these may be incorrect.
- First Contentful Paint: domContentLoadedEventStart / domContentLoadedEventEnd
- Time to Interactive: domInteractive
- Speed Index: duration
- Total Blocking Time: domInteractive – domContentLoadedEventStart
We can also see some of the browser timings in here as well, such as the Connection Duration, Time to First Byte, Domain Lookup, etc. All of the metrics provided are useful in their own right for diagnosing potential performance issues, and you have access to them directly from your computer at no extra cost!
Network Performance
In addition to performance metrics on the main website, the array returned by Google Chrome also includes information on every dependency or external script, image or font that was requested during the load of the page, this is really a text representation of the network tab in Google Chrome DevTools.
An example of one of these requests in JSON format can be seen below;
{
"name":"https://richardanderson.b-cdn.net/wp-content/plugins/qi-blocks/assets/css/plugins/animate/animate.min.css?ver=6.4.1"
"entryType":"resource"
"startTime":97.09999999962747
"duration":84
"initiatorType":"link"
"deliveryType":""
"nextHopProtocol":""
"renderBlockingStatus":"blocking"
"workerStart":0
"redirectStart":0
"redirectEnd":0
"fetchStart":97.09999999962747
"domainLookupStart":0
"domainLookupEnd":0
"connectStart":0
"secureConnectionStart":0
"connectEnd":0
"requestStart":0
"responseStart":0
"firstInterimResponseStart":0
"responseEnd":181.09999999962747
"transferSize":0
"encodedBodySize":0
"decodedBodySize":0
"responseStatus":0
"serverTiming":[]
}Conclusion
Within the first article of this series, we’ve understood what GTmetrix is and why it’s important, and have had a brief look at their workflow, including understanding where they get their data from.
The next article will focus on extracting the information on performance metrics programatically, as well as extracting screenshots of the website for the timeline and overall completed render.