GTMetrix Guide for Website Speed Analysis
For website owners, the speed of the website is one of the things that must be considered. To check the speed of the website, you can choose from several tools to check the speed of the website, the other Sala is GTMetrix.
Gtmetrix uses an assessment system and gives you an apabile warning of an error on the website. Sometimes they can look confusing and you need time to understand understanding each error message given by GTMetrix.
If you understand the purpose of the factor and value, GTMetrix can help to improve the performance of your website.
Understanding of GTMetrix
Gtmetrix is a tool developed by GT.net, a Canadian company. This tool aims to help their web hosting customers to see the performance of their website easily. Gtmetrix is one of the tools to check the speed of the most famous and most widely used websites other than Pingdom.
Compared to other Developer Tools, Gtmetrix is quite easy to use, even for beginners. GTMetrix uses a combination of Google PageSpeed Insights and YSlow to produce its values and recommendations.
You can use the Basic Gtmetrix version for free and paid. But for this article, we will discuss the free version of Gtmetrix.
How to Work and GTMetrix Server Location
You can use Gtmetrix without an account, but we recommend registering an account because you will get some additional features.
First, you can choose the location or checking the website speed. The selection of this location is very important because the speed of the website is one of the important factors in the assessment of search engines.
So, make sure you choose the speed check location that matches your website audience target.
Some locations available are:
- Dallas, USA.
- Hong Kong
- London, UK
- Mumbai, India
- Sydney, Australia
- Sao Paulo, Brazil
- Vancouver, Canada
You can use all browsers to use this tool. To use the mobile version, you must subscribe to the GTMetrix Premium Plan.
GTMetrix also facilitates you to change internet speed settings, so you can simulate various types of connections to see how they affect your website loading.
Gtmetrix also provides an option to create a video. This option can help you debugging on your website.
Another option you might want to try is Adblock Plus. If you run a third-party ad network like Google AdSense, you can activate this option to see the full impact on the loading time of your site.
This is an example of a comparison report on the Smashing Magazine website and the results show that the page has a loading time 2.3 seconds slower when the ad is activated.
Other additional options include stopping the onload test, the ability to send cookies with your request, use HTTP authentication, and the ability to enter the Whitelist URL and Blacklist.
Analysis Using the GTMetrix Speed Test Tool
In this section, we will discuss each part of the GTMetrix and explain what the information they provide is about the performance of your site and what you can do based on the recommendations they provide.
Keep in mind that the most important thing is how this Speed Test results can help increase the speed of your website, not the value provided by GTMetrix
GTMetrix Summary (Performance value and details)
After you enter and analyze your website URL to the column provided by GTMetrix, you will get a performance report, including PageSpeed Score, YSLOW SCORE, Fully Loaded Time, Total Page Size, and the number of requests obtained by your website.
It should be noted that the results of each website speed test can vary. We try to enter the same address to Pingdom and get faster results.
These results are not wrong because these tools have different ways to calculate loading time for websites. In choosing a website speed counter tool, you should be consistent in the use of the tool.
Since February 2017, GTMetrix Speed Test uses the method they call fully loaded time. According to them, Fully Loaded Time is the point after onload events and no network activity for 2 seconds.
Simply put, now they will wait until your page stops transferring data before completing the test, thus making a more consistent load page time.
Previously they used the onload time which in some cases did not produce several things in performance reports, such as ads loaded asynchronously or screenshots that did not appear.
GTMetrix uses the same rules as Google PageSpeed Insight in giving value to your site. The rating that you can get is between 0 to 100 (F to A). You will also get more than 25 recommendations.
We will discuss several recommendations that are popular and often obtained by website owners. If you follow the recommendations provided by GTMetrix, you will see an increase in loading time websites.
SERVE SCALED IMAGES
If you upload images to the website, try to upload images with the right size that cannot be changed by CSS. If you let CSS change the size, you will get a recommendation for the serve scaled image.
WordPress users, by default, sometimes change their image size when you upload images to the media library. You can change the settings in Settings> Media.
In this way, CSS will not try to change the size of your image to fit the width of your site. You can also automatically change its size with image optimization plugins.
Inline Small CSS.
CSS Inlining is usually not recommended because it will increase the overall size of your page request. However, if your site is small with a minimum request, this step can improve the performance of your site. To do inlining easily, you can use a free plugin like an autoptimize.
Caching browser leverage
Leverage Browser Caching is one of the recommendations that many people often get. This is common because there are HTTP error cache headers on your web server. You can only fix this if you have control over the resource on your website. For example, if you see this problem in a third-party ad network, you can’t do anything.
SERVE RESOURCES FROM A CONSISTENT URL
If you see the SERVE Resources from a Consistent URL in the GTMetrix report, you are likely to have various resources that are distributed from the same URL. Usually, this can happen if there is a string query involved. Once this problem is gone, they should no longer load twice.
According to HTTP Archive, starting from April 2017, the image accounts for 66% of the total loading time of a web page. So, if you intend to optimize your WordPress site, the image size is the first thing you should pay attention to.
Ideally, each image must be compressed and optimized before it is uploaded to WordPress. But unfortunately, sometimes people forget to do this. One way to help you is to install the image optimization plugin.
This plugin will help you compress the image automatically, change the size if needed, and ensure that they are not too large.
Enable Gzip Compression.
GZIP will not work for images because they have been compressed in different ways. Some people have seen a 70% reduction in data size after compression. This is probably one of the easiest optimizations you can do if you use WordPress.
Inline small CSS.
CSS Inlining is Usually Not Recommended Because it Will Increase The Overall Size of Your Page Request. However, if your site is small with a minimum request, this step can improve the performance of your site. To do inlining easily, you can use a free plugin like an autoptimize.
Caching browser leverage
Leverage Browser Caching is One Of The Recommendations That Many People Often Get. This is common because there is an HTTP error cache on your web server. You can only fix this if you have control over the resource on your website. For example, if you see this problem in a third-party ad network, you can’t do anything.
SERVE RESOURCES FROM A CONSISTENT URL
If you see the server resources from a consistent URL in the gtmetrix Report, You Are Likely To Have Various Resources That Are Distributed From The Same Url. Usually, this can happen if there is a string query involved. Once this problem is gone, They Should No Longer Load Twice.
According to HTTP Archive, Starting from April 2017, The Image Accounts for 66% of the Total Loading Time A Web page. So, if you Intend to Optimize Your WordPress Site, The Image Size is the First Thing You Should Pay Attention to.
Ideally, Each Image must be compressed and optimized before it is uploaded to WordPress. But unfortunately, sometimes people forget to do this. One Way To Help You Is To Install The Image Optimization Plugin.
This Plugin Will Help You Compress The Image Automatically, Change The Size if Needed, And Ensure That They Are Not Too Large.
Enable Gzip Compression.
Gzip Will Not Work For Images Because They Have Been Compressed In Different Ways. Some People Have Seen 70% Reduction in Data Size After Compression. This is probably one of the Easiest Optimization you can do if you use WordPress.
Remove Query Strings from Static Resources
So by removing it, you can sometimes fix caching on your website. This can be easily done with free code or WordPress plugins.
Specify A Vary: Accept-Encoding Header
This is an HTTP header and must be included at each Origin server response because it notifies the browser whether the client can handle the compressed content version or not. Usually, when compression gzip is activated, this is also corrected.
GTMetrix also uses YSLOW to give your website value. In this section, there are more than 15 recommendations that you might get. The same as the recommendations on the page speed, if you follow this recommendation, you will see an increase in your website loading time.
Make fewer HTTP requests
As you might know, all that is loaded on your websites like plugins, pictures, and fonts do HTTP requests.
Add expires headers.
HTTP Caching: Cache-Control Header is defined as part of the HTTP / 1.1 specification and replaces the previous header used to determine the response caching policy.
All modern browsers support cache-control, then only that you need. However, it doesn’t hurt if you have both, but remember only one to be used.
Expires headers use the actual date, while the cache-control header allows you to determine the amount of time before expiration.
Use a Content Delivery Network (CDN)
CDN keeps a copy of the cached content in the POPS located closer to visitors, so it will speed up loading time by reducing latency. Cloudflare is one of the highly recommended CDN providers that you can use easily with the WordPress site.
Use Cookie-Free Domains
This warning is usually seen on the site with a large number of requests. Some ways to fix them include using CDN providers that remove cookies or make separate domains and subdomains to serve cookies.
Reduce DNS Lookups
Every domain you are looking for produces the first DNS search until it is cached. So for example, say you load 10 assets from CDN, 2 of Google web fonts, and 5 of third-party advertisers. This will produce 3 DNS searches because each group query in one domain.
DNS search can quickly release control when you start adding external services. One example way to reduce this is to host the Google font on your CDN, which will get rid of DNS searches to Google.
Make favicon small and cacheable
Favicon, or favicon.ico, is a small image icon file that is associated with your website and appears in the browser address column (or when you set it as a bookmark). Even though the favicon is very small, you must always optimize it.
Configure Entity Tags (etags)
Etag headers are very similar to the last-modified header. It is also used to validate the file cache. If you run Apache 2.4 or newer, the Etag header has been added automatically using the file etag directive. And if you use Nginx, since 2016 Etag headers are activated by default.
Gtmetrix Waterfall Chart
GTMetrix Waterfall Chart displays all requests on your page. You can analyze each request to see anything that causes the delay and issue of performance on your website. They will appear inline color. Here is an explanation for each line that appears in the report.
DNS Lookup (Teal)
DNS Lookup is a collection of servers called the domain name servers that store all information about your website and to the IP address where your website traffic will be directed.
When I first entered the website URL to be analyzed by GTMetrix, they would do a new lookup. Because they need to ask DNS to get IP address information, this requires a longer lookup time.
Connecting on GTMetrix is the time needed to make a TCP connection. In essence, this is a method of communication between hosts or clients with servers that must go.
Sending time is the time needed to send data from the browser to the server.
Waiting time or waiting on GTMetrix is the time for first bytes, also known as TTFB in several tools. TTFB is a measurement used as an indication of the responsiveness of web servers or other network sources.
Generally, numbers below 100 ms are pretty good TTFB. If your website waiting time is at 300-400 ms, there may be configuration errors on your server or maybe it’s time to upgrade.
Receiving time is the time you need your browser to receive data from the server.
Every time you load a web page, the server requires time to present the page.
- First Paint (green line): The first point where the browser is rendered on the page, such as displaying the background color.
- Dom Loaded (Blue Line): The point where DOM (Document Object Model) is ready.
- OnLoad (Red Line): When processing the page is complete and all sources on the page (images, CSS, etc.) have been loaded.
- Fully Loaded (Purple Line): The point after the onload event turns on and there is no network activity for 2 seconds.
HTTP response headers.
You can also click on individual requests for HTTP Response Headers.
In this choice you can see things like gzip enabled on a web server, the web runs on HHVM, the web is served from the cache, cache-control headers, server architecture (this is not always visible), expires headers, browser-agent browsers, and more,
On the History tab, you can see all the speed tests ever done. For free accounts, there are limits for the number of URLs stored. You can also save the URL you want to monitor to see the changes in the web performance.
Knowing how the GTMetrix speed test tool works a little better and what the graphic means can help you make decisions based on data in terms of improving the performance of the website.
One of the GTMetrix features that are very helpful is waterfall analysis because you can find out how your assets are loaded. Remember, use just one tool to ensure the consistency of the test results and take the right steps.
For your business to grow and increase the number of customers you don’t forget to advertise through the Froggy Ads service, you can start by advertising your product, so that later you can improve visitors in your online business portal. FROGGY ADS is an online advertising service that can help you control all your product campaigns. Helps you target the targeting target you want and give you many choices to market your product.