GTMetrix Guide to Website Speed Analysis
For the owner of the website , the speed of the website is one of the things that must be considered. To check speed website , you can choose from several tools to check website speed , one of which is GTmetrix .
GTMetrix uses a rating system and gives you a warning if something goes wrong on the website . Sometimes they can seem confusing and you need time to understand each error message that GTMetrix gives you.
|GTMetrix Guide to Website Speed Analysis |
If you understand the meaning of these factors and values, GTMetrix can help to improve the performance of your website .
You can check my site speed at GTMetrix - https://gtmetrix.com/reports/www.spiderblogging.in/loFzjDJB/
Definition of GTMetrix
GTMetrix is a tool developed by GT.net, a Canadian company. tool This aims to help customers web hosting their see the performance of website to easily their . GTMetrix is one of speed checking tools website the most popular and widely used besides Pingdom .
Compared to developer tools other , GTMetrix is quite easy to use, even for beginners. GTMetrix uses a combination of Google PageSpeed Insights and YSlow to generate its scores and recommendations.
You can use the version of GTMetrix basic for free and paid. But for this article, we will cover the free version of GTMetrix.
How GTMetrix Server Works and Locations
You can use GTMetrix without an account, but we recommend signing up for an account as you will get some additional features.
First, you can choose a location to check speed website . The choice of location is very important because website speed is one of the important factors in search engine evaluation.
So, make sure you choose a speed check location that suits your target audience website's .
Some of the available locations are:
- Dallas, USA
- Hong Kong
- London, UK
- Mumbai, India
- Sydney, Australia
- Sao Paulo, Brazil
- Vancouver, Canada
GTMetrix also allows you to change internet speed settings, so you can simulate different types of connections to see how they affect your website's loading time .
Another option you might want to try is Adblock Plus. If you run a third party ad network like Google AdSense, you can enable this option to see the full impact of ads on your loading time site's .
Other additional options include stopping the onload test , the ability to send cookies with your request , using HTTP authentication, and the ability to URLs whitelist and blacklist .
In this section, we'll cover each part of GTMetrix and explain what the information they provide about your site's performance means and what you can do based on their recommendations.
Keep in mind that the most important thing is how the results of this speed test can help increase the speed of your website , not the value provided by GTMetrix
Before reading the GTMetrix analysis category speed test , you can watch this GTMetrix guide video to help you understand GTMetrix better.
GTMetrix Summary (Performance scores and details)
After you enter and analyze your URL website into the fields 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 your received website .
It should be noted that the results of each speed test website may vary. We tried entering the same address into Pingdom and got faster results.
This result can not be said to be wrong because tool this has a different way to calculate website loading time . In selecting a tool speedo website , you should be consistent in the use of these tools.
Since February 2017, GTMetrix Speed Test uses a method they call fully loaded time . According to them, fully loaded time is the point after the Onload events and there is no network activity for 2 seconds.
Simply put, they will now wait until your page stops transferring data before finishing testing, resulting in times page load more consistent .
Previously they used times onload which in some cases did not result in some things in the performance report, such as ads loading asynchronously or screenshots not showing up.
GTMetrix uses the same rules as Google PageSpeed Insights in assigning value to your site. The rating you can get is between 0 to 100 (F to A). You will also get more than 25 recommendations.
We will discuss some of the recommendations that are popular and often obtained by owners website . If you follow the recommendations given by GTMetrix, you will see an increase in website loading times .
Serve Scaled Images
If you upload an image to a website , try to upload an image of the right size that cannot be changed by CSS. If you let CSS resize it, you'll get a recommended serve scaled image .
For WordPress users, by default , they sometimes resize your images when you upload images to the media library . You can change the settings in Settings > Media .
This way CSS won't try to resize your images to fit your site's width. You can also automatically resize it with an plugin image optimization .
Inline Small CSS
Inlining CSS is usually not recommended as it will increase the size download overall of your page request. However, if your site is small with minimal demand, this step can improve your site's performance. To do inlining easily, you can use a plugin free like Autoptimize .
Leverage Browser Caching
Leverage browser caching is one of the recommendations that many people often get. This usually happens because there is an HTTP error cache headers on your web server . You can only fix this if you have control over the resources on your website . For example, if you see this issue on a third-party ad network, you can't do anything about it.
Serve Resources From a Consistent URL
If you look at serve resources from a consistent URL in the GTMetrix report, you most likely have multiple resources deployed from the same URL. Usually this can happen when there is a query string involved. Once this problem is gone, they should no longer load twice.
Optimize ImagesAccording to the HTTP Archive , as of April 2017, images accounted for 66% of total loading time a page's web . So, if you intend to optimize your WordPress site, image size is the first thing you should pay attention to.
Ideally, every image should be compressed and optimized before being uploaded to WordPress. But unfortunately, sometimes people forget to do this. One way to help you is to install an plugin image optimization .
This plugin will help you to compress images automatically, resize if needed, and ensure that they are not too large.
GZIP will not work for images because they are already compressed in a different way. 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
Minimize RedirectsMinimizing HTTP redirects from one URL to another reduces additional RTT and waiting time for users. For those of you who use WordPress redirects, they slow down your website's loading time . Therefore, it's a good idea to take the time to minimize the number of redirects visitor .
Specify a Cache ValidatorThe specify a cache validator recommendation will appear if any HTTP caching headers are missing. This should be included on every origin server response, as it both validates and sets the cache length.
If the header is not found, it will generate a new request for the resource every time, which increases the load on your server .
Utilizing caching headers ensures that subsequent requests don't need to be loaded from the server , thereby saving bandwidth and improving your performance website's .
Also keep in mind that you can't fix it if this problem arises from resource a third-party .
Specify Image DimensionsYou should specify the dimensions of the image you uploaded. This means inserting the width and height of your image in the HTML code.
<img src=”https://domain.com/images/image1.png” width=”200″ height=”100″>
Remove Query Strings from Static Resources
So by deleting it, you can sometimes fix caching on website your . This can be easily done with free WordPress code or plugins.
Specify a Vary: Accept-Encoding Header
This is an HTTP header and should be included in every origin server response, as it tells the browser whether or not the client can handle the compressed version of the content. Usually, when GZIP compression is enabled, this is also fixed.
GTMetrix also uses YSlow to give your website value. In this section there are more than 15 recommendations that you might get. Similar to the recommendations on Page Speed, if you follow these recommendations, you will see an increase in your website's loading time .
Make Fewer HTTP Requests
As you probably already know, everything that is loaded on your website such as plugins , images, and fonts makes HTTP requests.
Add Expires Headers
HTTP Caching: The Cache-Control header is defined as part of the HTTP/1.1 specification and replaces the header previously used to define response caching policies.
All browsers modern support Cache-Control, so that's all you need. However, there is nothing wrong if you have both, but remember only one will be used.
The Expires Header uses the actual date, while the Cache-Control header allows you to specify the amount of time before expiration.
Use a Content Delivery Network (CDN)
CDN save a copy of the content already be cached on POPs which is located closer to the visitors, which will accelerate the loading time by reducing latency . Cloudflare is one of the highly recommended CDN providers that you can easily use with your WordPress site.
Use Cookie-Free Domains
This warning is usually seen on sites with a fairly large number of requests. Some ways to fix this include using a CDN provider that deletes cookies or creating separate domains and subdomains to serve cookies.
Reduce DNS Lookups
Each domain you search for results in a DNS lookup the first time it gets cached . So for example, let's say you load 10 assets from a CDN, 2 from Google web fonts, and 5 from a third-party advertiser. This will result in 3 DNS lookups as each of those groups performs queries in a single domain.
DNS lookups can quickly spiral out of control when you start adding external services. One example of a way to mitigate this is to host Google fonts on your own CDN, which will get rid of DNS lookups to Google.
Make Favicon Small and Cacheable
A favicon, or favicon.ico, is a file thumbnail icon that is associated with your website and appears in your address bar browser's (or when you set it as a bookmark ). Even though the favicon is very small, you should always optimize it.
Configure Entity Tags (ETags)
The ETag header is very similar to the header last modified . It is also used to validate file caches . If you are running Apache 2.4 or later, the ETag header is added automatically using the FileETag directive. And if you're using NGINX, since 2016 the ETag header is enabled by default .
If you see this warning, we recommend contacting your hosting provider to check your cloud hosting .
GTMetrix Waterfall Chart
GTMetrix Waterfall Chart displays all requests on your page. You can analyze each request to see what causes lags and performance issues on your website . They will appear in the form of a line color. The following is an explanation for each line color that appears in the report.
DNS Lookup (Teal)
DNS Lookup is a collection of servers called Domain Name Servers that stores all the information about the websites you and to the IP address where the website traffic you will be redirected.
The first time they enter a URL website for analysis by GTMetrix, they will perform a lookup new . Since they need to query DNS for IP address information, this requires longer lookup times.
Connecting in GTMetrix is the time it takes to establish a TCP connection. In essence, this is a method of communication between the host or client and the server that must be running.
Sending time is the time it takes to send data from the browser to the server .
The waiting time in GTMetrix is the time for the first byte, also known as TTFB in some tools. TTFB is a measurement used as an indication of the responsiveness of a web server or other network resource.
Generally, a number under 100ms is a pretty good TTFB. If your website's waiting time is at 300-400 ms, there may be a misconfiguration on your server or maybe it's time to upgrade .
Time receiving is the time it takes the browser you to receive data from a server .
Every time you load a web page, the server takes some time to serve the page.
- First Paint (Green Line): The first point where the browser do the rendering on the page, such as the background color displays.
- DOM Loaded (Blue Line): The point at which the DOM ( Document Object Model ) is ready.
- Onload (Red Line): When page processing is complete and all resources on the page (images, CSS, etc.) have finished loading.
- Fully Loaded (Purple Line): The point after the onload event fires 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 option you can see things like GZIP enabled on web server, web running on HHVM, web served from cache , cache-control headers , architecture server (this is not always visible), expires headers , browser user-agent and more .
In the history tab , you can see all the speed tests that have been done. For free accounts, there is a limit to the number of stored URLs. You can also save the URL you want to monitor to see how the performance changes web's .
Knowing how the GTmetrix speed test tool works a little better and what all the graphs mean can help you make data-driven decisions when it comes to improving performance website .
One very helpful feature of GTMetrix is waterfall analysis, because you can see how your individual assets are loading. Remember, use only one tool to ensure consistency of test results and take appropriate steps.