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.

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 .

Inline Small JavaScript

Same with inlining small CSS , the same goes for inlining small JavaScript. Usually, you are also discouraged from doing so as this will increase the size download overall of your page request. However, this step can also improve the performance of your website if your site is small. You can also do this using the plugin 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.

Defer Parsing of JavaScript

JavaScript and CSS are the default create blocks. This means they can prevent web pages from being displayed until they are downloaded and processed by the browser . The defer attribute tells the browser to delay downloading the resource until HTML parsing is complete. Some ways to fix this problem are to use plugins Autoptimize or Async JavaScript .

Minify CSS and JavaScript dan Minify HTML

Minification is the process of removing all unnecessary characters in a source code without affecting its usability. The characters in question are line breaks , empty space , indents , and so on. Doing minification can help reduce the size of a data and speed up the process of downloading , parsing, and execution. To minify CSS, JavaScript, and HTML you can use a plugin like WP Fastest Cache .

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

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

Remove Query Strings from Static Resources

Your JavaScript and CSS files usually have a version of the file at the end of their URL, for example, exampledomain.com/style.css?ver=4.6. Some servers and proxy servers usually cannot cache query strings , even if the cache-control:public header is present.

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.  

YSlow

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.

This is one of the reasons why it is not recommended that you install 100 plugins at the same time as they are likely to perform CSS script and JavaScript requests which will of course collect hundreds of 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

In general, when you serve content such as images, JavaScript and CSS, there is no reason for HTTP cookies to follow because it adds overhead . Once the server has set a cookie for a domain specific , all subsequent HTTP requests for that domain must include the cookie .

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.

Blocking (Coklat)

When a browser to load a website , resource JavaScript and CSS will block the page web to serve until they are completely finished loaded and processed by the browser . This waiting time is called blocking by GTMetrix Waterfall Chart.

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

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

Sending time is the time it takes to send data from the browser to the server .

Waiting

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 .

Receivin

Time receiving is the time it takes the browser you to receive data from a server .
Event Timings

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 .

History

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 .

The knot

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.