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.

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
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
you can use any browser to use this tool. To use the version mobile , you must subscribe to the premium plan GTMetrix .

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 . 


As seen in the image above, GTMetrix also gives the option to create a video. These options can help you perform debugging on the website you.

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 . 
 

Analysis using GTMetrix Speed ​​Test Tool

A web page consists of different assets such as HTML, JavaScript, CSS, and various images. Each of these factors makes a request to show what to display see on the screen browser . Usually, the more requests that are sent, the slower your website's loading time will be.

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.
Page Speed

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 .

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 .

Optimize Images

According 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.

Enable Gzip Compression

Gzip is a file format and an application used for compression and decompression of a file. GZIP compression is enabled on the side server and allows further size reduction for HTML, stylesheets, and JavaScript files.

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 Redirects

Minimizing 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 Validator

The 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 Dimensions

You should specify the dimensions of the image you uploaded. This means inserting the width and height of your image in the HTML code. 

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

Correct example:
<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.