GTMetrix Guide for Website Speed Analysis

      Comments Off on GTMetrix Guide for Website Speed Analysis

GTMetrix Guide for Website Speed ​​Analysis

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

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

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.

Page Speed.

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.

Inline Small JavaScript

Same with Inlining Small CSS, the same thing applies to Small JavaScript inlining. Usually, you are also not recommended to do because this will increase the size of the overall download of your page request. However, this step can also improve the performance of your website if your site is small. You can also do it using the autoptimize plugin.

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.

See also  Cloud Hosting - The Technology of the Future

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.

Defer Parsing of JavaScript

JavaScript and CSS are default making blocking. This means they can prevent web pages to be displayed until downloaded and processed by the browser. Defer Attribute tells the browser to delay the download of the resource until the decomposition of HTML is complete. Some ways to fix this problem are by using the Autoptimize plugin or Async JavaScript.

Minify CSS and javascript and minify HTML

Minification is the process of removal of all characters that are not needed in a source code without affecting its usefulness. The characters in question are Line Breaks, Empty Space, Indents, and so on. Minification can help minimize the size of data and speed up the download, decomposition, and execution process. To minimize CSS, JavaScript, and HTML you can use plugins such as WP Fastest Cache.

Optimize Images

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 is a file format and an application used for a compression and decompression file. GZIP compression is used on the server-side and allows further reduction in size for HTML files, stylesheets, and javascript.

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.

Inline Small JavaScript

Same with Inlining Small CSS, The Same Thing Applies to Small JavaScript Inlining. Usually, You Are Also Not Recommended To Do Because It Will Increase The Size of The Overall Download Of Page Request. However, this Step Can Also Improve The Performance Of Your Website If Your Site Is Small. You can also do it using the autoptimize plugin.

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.

Defer Parsing of JavaScript

JavaScript and CSS Are Default Making Blocking. This means they can prevent web Pages to be displayed Until Downloaded and Processed by the browser. Defer Attribute Tells The Browser To Delay The Download of the Resource Until The Decomposition of HTML is Complete. Some ways to fix this problem are by using the autoptimize plugin or async javascript.

Minify CSS and javascript and minify HTML

Minification is the process of Removal of All Characters That Are Not Needed In A Source Code Without Affecting Its Usefulness. The Characters in Question Line Breaks, Empty Space, Indents, and SO ON. Minification can help minimize the size of data and speed up the download, Decomposition, and Execution Process. To minimize CSS, JavaScript, and HTML You Can Use Plugins Such As WP Fastest Cache.

Optimize Images

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 IS A File Format And An Application Used for a Compression and decompression file. GZIP Compression is used on the server Side and Allows Further Reduction in Size for HTML Files, Stylesheets, and JavaScript.

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

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

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.

YSLOW

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.

See also  5 Tips to Increase YouTube Video Rankings on Search Engines

Make fewer HTTP requests

As you might know, all that is loaded on your websites like plugins, pictures, and fonts do HTTP requests.

This is one reason why you are not recommended to install 100 plugins at the same time because they are likely to request CSS Script and JavaScript which will certainly collect hundreds of 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

In general, when you present content such as images, Javascript and CSS, there is no reason for HTTP Cookies to follow it because it will add overhead. After the server sets cookies for a particular domain, all the next HTTP requests for the domain must include cookies.

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.

Blocking (chocolate)

When a browser contains one website, Javascript Resource and CSS will block the webpage to be served until it has finished loaded and processed by the browser. This waiting time is called blocking terms by Gtmetrix Waterfall Chart.

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 (green)

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 (red)

Sending time is the time needed to send data from the browser to the server.

Waiting (purple)

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 (gray)

Receiving time is the time you need your browser to receive data from the server.

Timings

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,

History

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.

Conclusion

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.