GTmetrix Speed Test: A Complete Breakdown of Speed Testing

Do you want to take the GTmetrix speed test to check the performance of your website?

There are many website speed test services on the web that can give you a lot of insight about your site performance.

However, GTMetrix and Pingdom are widely popular tools.

In this article, I am going to talk about the GTMetrix Test of a WordPress site, so we could better understand the data and information it provides.

The majority of speed testings tools gives grade, ratings, and suggestions to improve the site speed. The warning and recommendations provided by these tools could overwhelm anyone.

That’s why it is essential to understand them, so you can easily solve them and improve the speed as well as the test grade of the site.

But keep in mind that what matters most is the performance of the site.

These grades could change with the updates in the software. The loading speed of the website must remain consistent.

• What is GTmetrix Speed Test?
• GTmetrix Speed Test Pro Version
• GTmetrix Speed Test Tool
• PageSpeed Recommendations
• YSlow Recommendations
• Waterfall Chart
• History

What is GTmetrix Speed Test?

GTmetrix is a product of Carbon60, which is a managed cloud company. They created the tool for their customer in 2009, but they released it for the public.

From then on, the tool has gone through various upgrades and updates, and what we see today is one of the best website performance testing tools on the internet.

Our lots of customers use this tool to check the speed of their site, and they contact us to solve the suggestions that came to the GTmetrix test report.

This is one of the reasons for writing this post.

However, GTmetrix is easy to use program, and one can quickly understand how to run test on it.

It uses a combination of Google PageSpeed Insights and YSlow to generate scores and recommendations, that becomes the base for the Grade.

GTmetrix Speed Test Pro Version

There two version of GTmetrix – Basic and Paid

The basic is free, and it is enough to run a speed test. You don’t even need to make an account to gain access to this feature.

GTmetrix also offers a premium plan. But we will only talk about the free plan as not everyone have access to the GTmetrix Pro.

But let’s see what Premium version offer.

Priority access:

You get to take the test earlier than the free accounts.

There are finite number of GTmetrix Speed test that can run at a single time. So until one test runs, other have to wait.

But with pro version you can skip the queue and get your site’s test at priority.

Monitoring from remote locations

This is to change the location of the test. You can choose the location from where you want to run the speed test on your site.

The physical location is important as the latency does affect the site speed.

If your site is hosted in India, and you take a test from Canada, speed would not be the same as of the test that is taken in India.

Currently available locations include:

• Dallas, USA
• Hong Kong, China
• London, UK
• Mumbai, India
• Sydney, Australia
• São Paulo, Brazil
• Vancouver, Canada

You can get this feature by creating an account.

Choose your Browser

You can select whichever browser you want to use. You can test with Chrome or Firefox.

For the mobile version, you will need a premium plan.

There is also option to increase or reduce the connection speed, so you can check how longer the page take to load in low connection.

All these metric becomes useful when optimising the pages for fast speed.

Video Captures

Gtmetrix will create a video of the rendering of the page.

This will help to resolve the issues as you can see every step of the page loading. You can pinpoint the elements that are taking time, to resolve later.

Few other features

The Adblock Plus features block the 3rd party ads on your site. Then it runs the test.

With this feature you get to know the full impact of the ads on your webpage.

Then you can compare the two reports: One with ads, and without ads. It will give you a clear picture.

GTmetrix Speed Test Tool

The web page you are looking at your screen right now is not only made of images and text.

It is made up of many assets, like HTML, JavaScript, CSS, and images. Each of these resources sends requests to the server, to fetch the content to render on the page. The more assets you have, the more there will be requests. Which means the page will take more time to load.

Now I am going to dissect each function of the GTmetrix test.

I will also keep explaining everything, and how it affects the loading time and what you can do to reduce it.

But you must not get strict with getting an A grade. These grades are temporary.

What we are aiming here is to speed up the site, and improve the performance. The good rating will follow with fast speed.

Basics of GTmetrix

After running the site through the GTmetrix test, the page will display a performance report.

The basic information about your site is divided into two boxes.

The first box is “Performance Scores”.

It includes:

• PageSpeed Score
• YSlow Score

The second box gives the Page Details.

• Fully Loaded Time
• Total Page Size
• Requests

We will dive in all of them later in the article.

For now let’s run more test.

As you can see that the results are fluctuating.

The reason for these changes results is caching that is going on. DNS caching and Server caching improves the page speed the second time.

So that’s why I said, you should not pursue the grades.

If the loading speed of the site is fast, it will get good score at every test.

PageSpeed Recommendations

GTmetrix follows the Google Page Speed Insight Rules and gives your site a score according to it. The rating is from 0 to 100 (F to A).

In page speed section, there are nearly 25 recommendations.

I will explain all the popular ones that most of the website owner encounters. They are the point you have to improve to get a faster loading page.

Serve Scaled Images

A scaled image means image whose size matches the size defined in CSS and HTML.

It means the size of the image you are uploading is equal or bigger than the size CSS or HTML allows.

For example:

If a user upload an image that is 500 x 500 pixels, but the thumbnail only allow the 50 x 50 Pixels image. Now the CSS has to scale the image to the smaller size before displaying it to visitors.

This process is time consuming and increase the loading time of the page.

That’s why, when it comes to images, always upload the scale images instead of letting the CSS scale them. Or else you will get the ‘serve scaled images’ recommendation.

If you are on WordPress, your image would be scaled by default when you upload them to the media library.

However you must check your setting that you will find under ‘Setting>Media’.

Ensure that the max width the image could have is less than the width of your site.

You can also use any Image Optimisation Plugin to serve the scaled images automatically.

Inline Small CSS

It is not much recommended for large websites. For the small sites, it would make more difference in performance.

Inlined CSS reduces the files the browser need to download before displaying the webpage. For the external CSS file, the browser will load your HTML first, and then your CSS file.

After inlining the CSS, the browser will only download the HTML file.

Now, downloading one file is faster is than downloading many files. However if the file has a large size then it is better to download the HTML first and then the CSS.

As I said, this is a solution for small site with low amount of requests.

You can easily inline your CSS with the help of Plugins.

Autoptimize Plugin can do this job. Turn the ‘Inline Function’ on from the setting and the plugin will handle from there.

Inline Small JavaScript

As you inline the CSS, you inline the JavaScript as well.

Again, it is only recommended for the small sites that does not send many requests.

Putting your JS into the HTML will save the few trips from web browser to server, as you are no longer asking for a separate JavaScript file.

But it will add the JS into that HTML file, hence, increasing the size of the file.

To Inline the JavaScript, you can enable the ‘Inline JS’ from the Autoptimize Plugin setting.

Leverage Browser Caching

This is most common recommendation made by the GTmetrix as many people struggle with it.

Browser Caching means that the browser remembers the resources that the browser has previously loaded. So, when visitors move to another page of the website, there are many assets that do not need to be load again.

There are many elements on the webpage that are common across the site, and they don’t need to fetch from webserver every time, because the browser can remember them.

Leverage browser Caching means using this to improve the speed of the site.

After implementing this, the second page of your site will load much faster.

The most common and simple method to begin the browser caching is to add expire header code in the .htacess file.

Code:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Save the .htacess file, and refresh the webpage to activate it.

But this will only work for the resources of your site. You cannot do much against the third party headers.

Serve Resources From a Consistent URL

Serve Resources from a Consistent URL means you need to fetch the same files via same source.

You have to check the identical files and make sure that they are coming from the same URL.

Or else they will bring up the loading time and duplicacy issues. It will hurt your SEO from two sides. This happens when query strings are involved.

You need to load identical files from the same source, to avoid duplication.

To solve this issue, you have to find all the problematic URLs. Then you can redirect or delete them, as you see fit.

However, the CDN can also solve much of the problem.

Defer Parsing of JavaScript

When the site is load, the browser receives the content from the server in the HTTP response. Then it executes and loads the code from top to bottom.

Everything goes smoothly until the JavaScript arrives. The loading process would not go further until the entire JS loads. Which increases the loading time.

By parsing the JS, you give the browser a pass to load the page without waiting for JS loading. This simple function remove the negative impact the JS having on the loading time.

JavaScript is vital part of web, and one cannot stop using it.

You can implement parsing of the JavaScript with plugins, that is the easiest method.

• Free Async JavaScript Plugin
• WpRocket Plugin
• Speed Booster Pack

You can enable it from the setting of these Plugins.

Minify CSS and JavaScript

Ever seen an HTML, CSS or JavaScript file?

The first rule of coding is to make it readable.

That’s why there are so many line-breaks and white-space. All it makes the code easier to read and understand, but it also increases the size of the file.

Minifying the code means removing all the unnecessary characters and spacing from the code while keeping its functionality intact.

This small task free up the data, and speed up the loading process.

There are many plugins that can do this task.

• Fast Velocity Minify
• Better WordPress Minify
• Autoptimize

Install any plugin and activate it.

Find the option to enable the optimisation of CSS and Java and turn it on.

If you want to do it without the help of the Plugin, you will need a web developer. There are lots of online tools that a developer can use to minimize the scripts.

Optimize Image

If you are not optimising the images for the web, then whatever you do will not make the web page load fast.

Large images slow down the web page because it takes much longer to fetch the large images.

Optimization of Image means to reduce the size of the image so they load fast, while not losing their clarity. Lossy and lossless compression are two ways one can compress the image.

As a website owner, you should try to upload each image after compressing and optimizing it. However, that is not possible when there are lots of images on the server.

Like Pinterest, or Unsplash, or large eCommerce store.

For such instances, you can use WordPress plugins, that will automatically compress the image the moment you upload them on the site.

Plugins like Smush Images, Image Optimiser, TinyPng are excellent to perform this task.

Minify HTML

HTML is the basic building block of Web. It is everywhere on the Web.

Minifying HTML also reduces the file size, and it works similarly to the minification of CSS and JS. Minified HTML does not consist of unnecessary characters and white spaces.

Many Cache Plugins allows you to Minify HTML. Autoptimize Plugin also have this function.

Enable the HTML Minification and you will see that the loading speed of the site has improved.

Enable GZIP Compression

This is the stanndard web practice, and if you get this GTmetrix suggestion, then you should keep it on priority.

Browser sends the HTTP requests to Web Server, for the files necessary to load the webpage. In response, webserver sends the file back.

But, the file comes in GZIP compression.

GZIP compression is a way to reduce the size of file by counting the repetitive binary as a single unit. You can chek out the post to read in detail.

GZIP compression is a server-side setting, that allows to decreasing the size of your HTML, JS files, and other assets. However, it does not work on images, but this method can reduce the size of file by 50-70%.

Majority of the hosting companies enable the GZIP compression by default.

Simply add the following code to your .htaccess file to enable GZIP compression in Apache:

<IfModule mod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\\\\.0[678] no-gzip

BrowserMatch \\\\bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

</IfModule>

Add this code to Nginx.conf file if your site is running on Nginx server:

gzip on;

gzip_disable "MSIE [1-6]\\\\.(?!.*SV1)";

gzip_vary on;

gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Make sure to read our in-depth post on how to enable GZIP compression.

Minimize Redirect

When the location of the file changed on your website, you would not like visitors to visit the old location. That’s where the redirects come handy.

The redirection allows you to move the visitor from one file to another automatically.

There are many types of redirection; each one of them affects the page speed.

Minimizing HTTP redirects is the ideal solution. Only 1 or 2 redirects could lead to high loading time.

Make a list of all the redirects on the page, and tackle each one of them accordingly.

If there must be a redirect, then make it server-side, so it could be cached.

Specify a Cache Validator

A cache validator is a small yet important part of the HTTP requests header. It helps in finding out if the resource from the browser’s cache could be used. These cache validators decide if the request for the files should be sent to the server, or the locally saved files are good enough to load.

Sending request and getting a response from the webserver takes more time, than loading the resources from the browser’s cache.

However, if this is missing, then the new request would be made to the server every time, hence increasing the load time.

Adding the caching headers can improve the site speed and saves you a lot of bandwidth. Overall, a better experience for the user.

You can only fix the issue that is on your site. So, if the problem is due to third-party apps, there is little you can do.

Specify Image Dimensions

When the browser loads the page, it loads many assets. One of them is the image.

If the browser know the dimension of your image (HTML), it can quickly wrap the text around that dimension and be done with it

When there is no specific dimension, the browser loads the page, and wait for the image to load. Once the image loads, the browser will get to know the dimension, and then it will wrap the text around the image. It will happen for every image.

Having the specific image dimension inside the HTML allows the browser to leave that much space on the page for the image.

Incorrect

<img src="<https://domain.com/images/image1.png>">

Correct

<img src="<https://domain.com/images/image1.png>" width="200" height="100">

Adding the height and width of the image in HTML helps in the fast loading of the page.

Remove Query Strings From Static Resources

Query strings are the URLs that end with “?” or “&.”

CSS and JavaScripts have the version of the file in their URL.

For example:

example.com/style.css?ver=3.6

Now, these query strings make it hard to cache the pages. Most of the CDN overlooks the files with query strings. The same thing goes with the Proxy server; they also do not cache query strings properly.

After you remove the query strings from the site, the caching tools can enable the caching of static resources.

Add this code to the function.php file of your site:

//* TN - Remove Query String from Static Resources

function remove_css_js_ver( $src ) {

if( strpos( $src, '?ver=' ) )

$src = remove_query_arg( 'ver', $src );

return $src;

}

add_filter( 'style_loader_src', 'remove_css_js_ver', 10, 2 );

add_filter( 'script_loader_src', 'remove_css_js_ver', 10, 2 );

You can also use plugins to do this task. Many caching plugins have this option under the tool belt.

Furthermore, there are plugins to perform this function exclusively.

Specify a Vary: Accept-Encoding Header

The browser sends the HTTP request to the webserver. In response, the webserver sends the requested data.

However, the webserver requires some information regarding the system the request has been sent.

One of them is whether the browser can handle the compressed version of the resources or not.

Accept-Encoding Header is an HTTP header that consists of this information. Without it, the webserver might send the uncompressed version of the file.

That will increase the file size and overall loading time of the page.

Add this code to .htaccess file to fix this issue in Apache:

<IfModule mod_headers.c>

<FilesMatch ".(js|css|xml|gz|html)$">

Header append Vary: Accept-Encoding

</FilesMatch>

</IfModule>

For Nginx, locate Nginx.conf file, and add this line to the file:

gzip_vary on

But you can enable it only for your site. You don’t have any control over the third-party URLs.

YSlow Recommendation

YSlow is another metric used by GTmetrix to score a website.

There is more than 15 recommendation that comes under the YSlow section. I will cover all the important ones in this article.

If you work on these recommendations, you will surely watch your page loading faster than before.

Make Fewer HTTP Requests

If the page does not make lots of HTTP requests to the webserver, it will load fast.

This is the reason that site built with HTML load faster than the site made with combined JavaScript, PHP, and other languages.

The page with text will open faster than the image with lots of images.

If the page is heavy and has lots of elements that need to be load, then it will surely take more time to load.

For faster speed, keep the page lightweight and don’t use unnecessary CSS, JS, and Plugins.

Keep the HTTP request minimum for faster loading.

Add Expires Headers

Leveraging browser cache means the browser will automatically save the files to the browser memory. If the user decides to visit the web pages on your site, there will be no need to load all the content from the webserver.

But how long should the browser stores the data?

For this, we add expiry time to the headers. Because we do not want users to revisit the same file even after updating the file.

To add the Expires header in Apache, simply add the following code to your .htaccess file.

## EXPIRES HEADER CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType application/javascript "access 1 month"

ExpiresByType application/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 7 days"

</IfModule>

## EXPIRES HEADER CACHING ##

To add Expires headers in NGINX, simply add the following code to your config file.

location ~* \\\\.(js|css|png|jpg|jpeg|gif|ico)$ {

expires 7d;

}

You can also use WordPress plugins to add the Expires Headers to the site.

Add Expires Header Plugin allows lots of functions for this task.

Use a Content Delivery Network (CDN)

Latency plays an important part in the loading speed of the page.

If your data is located on the server of Asia and someone opens up the page from the United States, then the data has to travel across the globe.

A CDN keeps the cached copy of the data at the POPs located nearest to the visitors.

The CDNs cache copy of the content reduces the latency and improve the loading speed of the site. There are many free CDN available on the Internet.

CloudFlare is most popular, but there are many alternatives to CloudFlare that you can use.

Use Cookie-Free Domains

HTTP cookies are essential for the web as they improve the all-around user experience.

These cookies collect the data related to your website activities such as user preferences, customer login, which pages visitors visited previously, etc.

In a way, these cookies help to make the site more personalised for the user.

However, there is no need to have HTTP cookies while loading the images, JavaScript, and CSS… but the server sets cookies for the entire domain and sends them in response to all the HTTP requests.

Cookies for such content are not necessary, and they just add the load to the file.

One way to fix this is to use the CDN and strip the cookies for the static assets.

Another way is to set up a sub-domain and load the cookie there.

Reduce DNS Lookups

IP Addresses are complicated to remember and not brandable. That’s why we use Domain Names.

Domain Names are connected to the IP address, and when the user puts the domain name in the browser, the browser finds the IP address the domain is connected to.

DNS means Domain Name System — It keeps the record of which domain name is connected to which IP address.

The browser performs the DNS lookup to find the associated IP address. After it is done, the browser begins downloading the content from the webserver.

This process takes time.

If your page has many third-party apps, that means the browser has to perform the DNS lookups for each one.

It will increase the loading time of the page.

Tips to reduce DNS lookup:

• Host third party resources locally
• Use DNS cache to your advantage
• Prefetch the DNS
• Minimize the number of CNAME records
• Use a fast DNS provider

Make Favicon Small and Cacheable

A favicon or favicon.ico small image icon file that goes on the tab of your site. It is useful for branding, and make it easy for the user to know at what tab the page is open.

Overall, it is an image icon that represents your site.

This is not going to make much difference for the page speed. As tiny as they are, they must be optimized as well. Because if you can save even a bit, you should try to save it.

Favicon file could be PNG, Gif, or ICO. But the ideal format is .ico because it will give you the smallest file size.

You can use an online Favicon generator to create a Favicon, or you can hire a professional to do it.

Configure Entity Tags (ETags)

Etags header is the part of the cache validator.

The Etags is an unique identifier given to the resource file by the webserver.

When the browser tries to load a file, the server reads the Etags of the file to compare the version server has, and the locally saved version. If the Entity tags are identical, then the server responds with 304 (not modified), and the browser fetches the file from the cache.

ETags are enabled by default for Apache 2.4 or higher. Since 2016, Nginx has also enabled the Etag header by default.

There is a rare chance that you will see this warning. If GTmetrix text pop out this one, contact your hosting to upgrade the technical stack.

Make sure to read this detailed article about Entity tags.

GTmetrix Waterfall Chart

The third section in GTmetrix performance report is of WaterFall Chart.

You can watch all the requests made by the webpage here.

On the top, you see the file formats you want to analyze.

There is a tab for the HTML, CSS, JS JS, XHR, Fonts, Images, and other miscellaneous requests made by the page.

The first tab is of all that has all the requests in one place.

File Name

This displays the name of the file requested by the browser.

The prefix is stripped, and all remain is the name of the file.

You don’t need to know each one of them. However, they are easy to understand.

The one that ends with .png or .jpeg are images, CSS ends with .css, and Java ends with .js.

If you read the complete name, you will surely find the keyword indicating what file they are.

Status Code

This one is pretty straight forward.

They are the status code from the response.

You can learn more about them in our Status Code post.

You can check any of them by moving the cursor over them.

Domain

This segment tells the source of the file.

Either the file will come from your server or the third-party server.

A glance at this segment will reveal the domain and IP of the source.

File Size

Clear from the name; this shows the size of the file transferred.

You can click on the File size to arrange it in increasing order and decreasing order.

It will show you the largest and smallest file on the web page.

Load time Break Down

This section is where the Waterfall Chart breaks down the specific duration time required to load each request.

Hover your mouse on any one, and a box will pop-up.

You may not understand a lot of terms, but don’t worry.

I will explain them in this article. This is one of the most exciting features of the GTmetrix speed test.

Blocking (Brown)

Blocking is the time the request spent waiting before it could be sent.

There could be multiple reasons for it happening.

• Maybe you have hit the maximum connection allowed, and the request is waiting for a connection to drop so it can make a connection
• Maybe the browser is downloading JavaScript and CSS
• HTTP is taking longer to authorize the connection

Most of the time, it’s the JS and CSS that delay the process; however, modern browsers are getting smarter in minimizing them.

If you see blocking taking more time, you need to eliminate the rendering of the JS and CSS.

DNS Lookup (Teal)

As I already mentioned in the article, DNS lookup is a process to map the domain name to an IP address. The computer reads the IP address, but the human use Domain name for the sake of readability and other factors.

When you run your website through the GTmetrix test first time, it will take its time to perform a lookup. However, if you do the test second time, you will observe that DNS lookup takes less time.

This is because, at the time of the second test, it is using the cache memory to knows the IP information. It is not performing DNS lookup this time.

Running the speed test several times will give you a better understanding of DNS lookup time. Write down the DNS lookup time after the GTmetrix speed tests, and take the average.

You don’t need to worry about this much, but if you want to improve the time, you can get a Premium DNS.

Connecting (Green)

The connecting time is the time it takes to establish a connection between client and server.

A TCP connection is a way how the server and browser communicate and sends data to each other.

Sending (Red)

As the name suggests, it is time it takes for the browser to send the request to the server.

If it’s a PUT or POST request, then this will also include the time spent uploading any data with that request.

Waiting (Purple)

GTmetrix calculates the waiting time with TTFB.

TTFB is an abbreviation for ‘time to the first byte.’ This is a measurement of time a browser (user) has to wait to receive the first byte of data from the server-side. The longer the server takes to process the request and responds accordingly, the longer it will be TTFB.

It should be as less as possible. However, anything under 100 ms is good enough and acceptable.

If the GTmetrix test is showing high TTFB, it means servers are not configured properly.

It is also an indication that you need to upgrade to better hosting.

There are many ways to reduce it, such as using CDN and utilizing the Caching.

Read this complete TTFB Guide to learn more about it.

Receiving (Grey)

As the name suggests, receiving time is the time the browser takes to download the files sends by the server.

Things that can contribute to long receiving time includes:

• Downloading of large files
• Hitting bandwidth limits with multiple concurrent files downloading
• Network issues

Fast WordPress hosting will take care of it.

Event Timings

These lines tell the specific time it takes to complete an element. Each color represents a milestone.

First Paint (Green Line):

The browser takes the time to render the first element of the page. The time is taken by the first dot to appear on the page.

DOM Loaded (Blue Line):

It is the point at which some sort of content begins to appear — the content that is defined in Document Object Model. It could be text, image, or video.

Onload (Red Line):

Onload means that the page is complete, and all resources on the page (images, CSS, Java, Text, Videos, etc.) are finished downloading.

Fully Loaded (Purple Line):

Fully loaded means that the Onload event has already fired, and no network activity has occurred for 2 seconds.

HTTP Response Headers

If you click on any request, it will open up the request and response header.

Like this one:

The header provides lots of information about the site.

As you can see that this header has:

• Accept Vary Encoding
• Expires header
• Cloudflare CDN
• Gzip Enabled

The header of each request could be read, and you will find the valuable information there.

GTmetrix Speed Test History

Then there is the history tab at the end.

Here you can view the results of your past tests. For free accounts, there is a limited number of tests data GTmetrix store for you.

You can download the report, and the past test reports in one click.

Another useful feature of GTmetrix is that you can choose past reports to compare side by side.

During optimization, this comparison helps in finding which optimization is working, and what is not working. You have to keep testing to see if you are making any improvements or not.

Final Words

Now, after reading this article, you can use the GTmetrix and understands all the metrics.

All the charts and data will help your team to optimize the WordPress site with a more data-driven approach. You will know which points you need to improve.

Waterfall analysis tells you how your assets are loading individually.

GTmetrix is a fantastic tool, and offer a lot of data at no cost. Pingdom has the same function.

But you must not compare both of them, as Pingdom has a different approach than the GTmetrix. Choose one and make changes according to it.

In the end, what is important is your WordPress site load fast. Many of these suggestions can be solved by a fast WordPress hosting.

I hope this article helped you. If you want to share anything, leave it in comments.