GTMetrix Guide To Website Speed Analysis
GTMetrix Guide To Website Speed Analysis - If you have a website, website speed is one of the things to watch out for. To do the checking of website speed, you can choose from several tools to check the speed of the website. One of the tools that you can use is GTmetrix.
This tool uses a scoring system and give you a warning if there is something wrong with your website. Sometimes they can look confusing and You take time to really get to understand what is meant. If you understand the factors what they value and what is the meaning of these values, they could help to improve the performance of your website.
GTMetrix is a tool developed by GT.net, a company of Canada, which aims to help the customer hosting their website performance to see them easily. GTMetrix is one tool to check the speed of the website is the most famous and most widely used other than Pingdom. Compared to other developer tools, easy to use and quite GTMetrix beginners can also easily learn it. They use a combination of Google PageSpeed and YSlow Insights to generate value and recommendations.
You can use the basic version GTMetrix for free and You can get access to several options to create an account. They also provide a premium plan. But for this article, we will discuss a GTMetrix's free version.
If you have an account, you could use some extra special options. First, you can select the location where you want to check the speed of your website. The location you choose can say is very important because it relates to where your website is hosted. The less latency, the faster Your load time.
Multiple locations available are:
As you can see, they also give you the option to create a video (create a video). This option can help you debug the issue because you can see how the page appears.
Other options you might want to try is Adblock Plus. If you run a third-party ad networks such as Google AdSense, you can turn on this option to see the full impact of the ad on Your site loading time. This is a sample report of the comparison on the site Smashing Magazine and the result indicates that the page has ads loading 2.3 seconds behind.
Additional options include discontinuing onload test, the ability to send the cookie with your request using HTTP authentication, and the ability to enter a URL blacklist and whitelist (whitelist and blacklist).
In this section, we will discuss each part of GTMetrix and explain about what is the meaning of the information they provide about the performance of your site and what you can do based on recommendations that they provide.
Keep in mind that the most important thing is how this speed test results can help increase the speed of your website. Don't get too fixated with the value provided by GTMetrix.
It should be noted that the results of each test website speed can vary. We tried plugging the same address to Pingdom and gets faster results.
This result is not arguably wrong because tools-these tools have different ways to calculate the speed of loading their website. In choosing a website counter website speed, you should choose the one that you like and keep using it.
Since February, 2017, GTMetrix uses a method they call fully loaded time. According to them, the time is the point of fully loaded after Onload events and there is no network activity for 2 seconds. To put it simply, now they will wait until the page you stop transferring data before you complete the testing, resulting in the page load time is more consistent. Before they use the onload time which in some cases did not produce some of the things in the performance report, such as ads that are loaded in asynchronous or screenshots that don't show up.
GTMetrix uses the same rule with Google PageSpeed Insight in giving value to your site. 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 are popular and are often obtained by the website owner. If you follow the recommendations given by GTMetrix, you will see an increase in loading time of your website.
Ideally, each image should 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 plugin image optimization. This plugin will help you to compress images, resize automatically if needed, and make sure that they are not large and your website will be loading quickly.
GZIP will not work for images because they're are compressed in different ways. Some people have already seen the 70% reduction of data size after compression. This is probably one of the easiest optimization you can do if you're using WordPress.
An example is wrong
<img src="”https://domain.com/images/image1.png”">
The correct example:
<img src="”https://domain.com/images/image1.png”" width="”200?" height="”100?">
So by deleting it, you sometimes can fix Your caching. This can easily be done with a code or WordPress plugin.
GTMetrix also use YSlow to give your website value. In this section there are more than 15 recommendations that you might get. Same as the recommendations that is in the Page Speed, if you follow these recommendations, you will see an increase in loading time of your website.
When a browser loading a website, JavaScript and CSS resource usually blocking a web page to be presented until they actually completed downloaded and processed by the browser. The waiting time is referred to by the term blocking by GTMetrix Waterfall Chart.
Arguably the DNS Lookup works like the phone book. They are servers called Domain Name Servers, which stores all the information about your website and the IP where should they intended. When you first enter the URL of your website to be analyzed by GTMetrix, they will perform a new lookup and because they need to ask the DNS to obtain IP address information, this will cause additional lookup time.
What is meant by the time connecting in GTMetrix is the time it takes to make a TCP connection. Bottom line, this is a method of communication between a host or client with the server should be running.
One of the features that could have GTMetrix help you is very waterfall analysis because we can find out how Your individual assets are loaded. And remember, when should compare it with the tools to check the speed of the other websites, they are different tools and better use the same tools over time.
Are there any of you who have GTMetrix tried using before? Does this tool helps you improve Your site performance? Come on, leave a comment below!
This tool uses a scoring system and give you a warning if there is something wrong with your website. Sometimes they can look confusing and You take time to really get to understand what is meant. If you understand the factors what they value and what is the meaning of these values, they could help to improve the performance of your website.
GTMetrix
You can use the basic version GTMetrix for free and You can get access to several options to create an account. They also provide a premium plan. But for this article, we will discuss a GTMetrix's free version.
If you have an account, you could use some extra special options. First, you can select the location where you want to check the speed of your website. The location you choose can say is very important because it relates to where your website is hosted. The less latency, the faster Your load time.
Multiple locations available are:
- Dallas, USA
- Hong Kong
- London, UK
- Mumbai, India
- Sydney, Australia
- Sao Paulo, Brazil
- Vancouver, Canada
As you can see, they also give you the option to create a video (create a video). This option can help you debug the issue because you can see how the page appears.
Other options you might want to try is Adblock Plus. If you run a third-party ad networks such as Google AdSense, you can turn on this option to see the full impact of the ad on Your site loading time. This is a sample report of the comparison on the site Smashing Magazine and the result indicates that the page has ads loading 2.3 seconds behind.
Additional options include discontinuing onload test, the ability to send the cookie with your request using HTTP authentication, and the ability to enter a URL blacklist and whitelist (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 made the request to indicate what you see on the screen of your browser. Usually, the more requests you send, the slower loading time of your website. It's not always like that, but it is often the case.In this section, we will discuss each part of GTMetrix and explain about what is the meaning of the information they provide about the performance of your site and what you can do based on recommendations that they provide.
Keep in mind that the most important thing is how this speed test results can help increase the speed of your website. Don't get too fixated with the value provided by GTMetrix.
GTMetrix Summary (value performance and details)
After you enter your site's URL into the field provided GTMetrix for analysis, you will get a performance report, including PageSpeed Yslow Score, Score, Fully Loaded Time, Total Page Size, and the number of requests you can on your website.It should be noted that the results of each test website speed can vary. We tried plugging the same address to Pingdom and gets faster results.
Read Also:
Since February, 2017, GTMetrix uses a method they call fully loaded time. According to them, the time is the point of fully loaded after Onload events and there is no network activity for 2 seconds. To put it simply, now they will wait until the page you stop transferring data before you complete the testing, resulting in the page load time is more consistent. Before they use the onload time which in some cases did not produce some of the things in the performance report, such as ads that are loaded in asynchronous or screenshots that don't show up.
Page Speed
Serve The Scaled Images
If you upload the image to your site, try to upload the image with the right size and don't let the CSS resized. If you let the CSS change its size, you will receive the recommendations serve a scaled image. For those of you WordPress users, by default, they sometimes change the size of your image when you upload your pictures to the media library.
You can set it in Settings > Media. You want to make sure that the maximum width of the approaching the width of your site. In this way the CSS will not try to resize your image to fit the width of your site. You can also automatically resize it with the plugin image optimization.
Small CSS Inline
Inlining CSS you usually is not recommended as it will increase the overall download size of your page request. However, if your site is small, with a minimal request, this step can increase the performance of your site. To perform the inlining easily, you can use a free plugin like Autoptimize.Small Inline JavaScript
Same with inlining small CSS, the same thing also applies to inlining small JavaScript. Usually, you are not advised to do as this will increase the overall download size of your page request. However, if your site is small, with a minimal request, this step can also improve the performance of your website. To do this, you can use a free plugin like Autoptimize.Leverage Browser Caching
Leverage browser caching is one of the recommendations are often obtained by many people. This is common because there's an error HTTP cache headers on your web server. You can only fix this if you have control over the resources. For example, if you see this problem in the third-party ad network, you can't do anything.Serve Resources From a Consistent URL
If you see serve resources from a consistent URL in your report, you most likely have the same in the serve resources from the same URL. Typically this can happen when there is a query string that is involved. So this problem is gone, should they no longer loading twice.Defer Parsing of JavaScript
JavaScript and CSS is the default blocking making. This means they can prevent a web page is not displayed until the downloaded and processed by the browser. Defer atrribute tell the browser to defer downloading the HTML parsing resource until finished. Several ways to fix this problem is to use a plugin Autoptimize or Async JavaScript.Minify CSS and JavaScript and HTML Minify
Minify is essentially removes all characters that are not needed in a source code without affecting its usefulness. The characters in question here is the line breaks, empty space, indents, and so on. Do minify can help minimize the size of a data and speed up the process of downloading, parsing, and execution. To do the minify CSS, JavaScript, and HTML you can use the Fastest Cache plugins like WP.Optimize Images
According to the HTTP Archive, ranging from April 2017, the image was responsible for an average of 66% of the total weight of a web page. So, if you intend to optimize your WordPress site, the image is the first thing you should pay attention. This is more important than scripts and fonts.Ideally, each image should 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 plugin image optimization. This plugin will help you to compress images, resize automatically if needed, and make sure that they are not large and your website will be loading quickly.
Enable Gzip Compression
Gzip is the formate file and an application software which is used for compression and decompression of a file. GZIP compression is enabled on the server side and allows further size reduction for HTML files, stylesheets, and JavaScript.GZIP will not work for images because they're are compressed in different ways. Some people have already seen the 70% reduction of data size after compression. This is probably one of the easiest optimization you can do if you're using WordPress.
Minimize Redirects
Minimize HTTP redirects from one URL to another URL an extra RTT and reduce the waiting time for users. For those of you who use WordPress redirect, they delayed the loading time of your website. Thus, it's good You make time to minimize the number of redirect your visitors.
Read also: SEM and SEO: The Difference and Its Benefits.
Specify a Cache Validator
the recommendations of the specify a cache validator will appear if there are HTTP caching headers are missing. This should be included on every server response origin, since both validate and set the length of the cache. If the header is not found, then it will generate a new request for resource at any time, which increases the load on your server.
Utilizing the caching headers ensure that subsequent requests need not be loaded from the server, thus saving bandwidth and improve the performance of your website.Need to also keep in mind that you can't fix it if this issue arises from a third-party resource.
Specify Image Dimensions
You should give details of the dimensions of the image you uploaded specifically. This means entering the width and height of your image in the HTML code.An example is wrong
<img src="”https://domain.com/images/image1.png”">
The 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 the file version at the end of their URL, for example exampledomain.com/style.css?ver=4.6. Multiple servers and proxy servers are usually not able to cache query strings, even if the cache-control: public header exists.So by deleting it, you sometimes can fix Your caching. This can easily be done with a code or WordPress plugin.
Specify a Vary: Accept-Encoding Header
This is the HTTP header and must be included on every server response of origin, because it tells the browser whether the client can handle compressed content version or not. Usually, when GZIP compression is enabled, it also improved.YSlow
Make Fewer HTTP Requests
As you probably already know, all of the loading on your website such as plugins, images, fonts, and so on, do a HTTP request. This is one reason why you are not advised to install 100 plugins at the same time because they are likely to do the request script CSS and JavaScript that surely will gather hundreds of HTTP requests.Add Expires Headers
HTTP Caching: Cache-Control header is defined as part of the specification HTTP/1.1 and replaces the previous header is used to specify the caching policy responses. All modern browsers support the Cache-Control, then that's all you need. However, it doesn't hurt if you have both, but remember only one will be used. The expires Header using the actual date, whereas the Cache-Control header allows you to specify the amount of time before it expires.Use a Content Delivery Network (CDN)
CDN save a copy of the content is already in your possession cache POPs located closer to the visitors, which will speed up the loading time for them by reducing latency. Cloudflare is one of the highly recommended CDN provider that you can use easily with your WordPress site.Use Cookie-Free Domains
In General, when you present the content such as images, JavaScript and CSS, no the reason to HTTP cookies to follow it, because it will add overhead. After the server set a cookie for a specific domain, all subsequent HTTP requests to that domain must include cookies.
This warning usually seen on sites with a considerable number of requests. Some ways to improve it including using a CDN provider delete cookies or create separate domains and subdomains to serve cookies.
Reduce DNS Lookups
Every domain you search generates DNS lookup first to be cached. So for example, let's say you load Your CDN assets of 10, 2 of the Google web fonts, and 5 of third party advertisers. This will produce 3 DNS lookups since each such query groups in a single domain.
DNS lookup can quickly loose control when you start adding external service. One example of a way to reduce this is to host a Google font in your own CDN, which will get rid of the DNS to Google search.
Make Favicon Small and Cacheable
Favicon, or the favicon.ICO icon file, are small images that are associated with your web site and appears in the address field of your browser (or when you set it as a bookmark). Although the favicon is very small, you should always optimize.
Read also: Search Engines: Understanding and Types.
Configure Entity Tags (ETags)
ETag header is very similar to the last modified header. It is also used to validate its cache files. If you are running Apache 2.4 or higher, ETag header has been added to automatically use the FileETag directive. And if you use NGINX, since 2016 header ETag is enabled by default. If you see this warning, you should contact your hosting provider.GTMetrix Waterfall Chart
GTMetrix Waterfall Chart showing all the individual request on your page. You can then analyze each request to see what is causing the slowness and performance issues on your site. They will appear in the form of the color line. The following is an explanation for each color of the lines that appear in the report.- Blocking (Brown)
When a browser loading a website, JavaScript and CSS resource usually blocking a web page to be presented until they actually completed downloaded and processed by the browser. The waiting time is referred to by the term blocking by GTMetrix Waterfall Chart.
- Dns Lookup (Teal)
Arguably the DNS Lookup works like the phone book. They are servers called Domain Name Servers, which stores all the information about your website and the IP where should they intended. When you first enter the URL of your website to be analyzed by GTMetrix, they will perform a new lookup and because they need to ask the DNS to obtain IP address information, this will cause additional lookup time.
- Connecting (Green)
What is meant by the time connecting in GTMetrix is the time it takes to make a TCP connection. Bottom line, this is a method of communication between a host or client with the server should be running.
- Sending (Red)
- Waiting (Purple)
- Receiving (Grey)
Event Timings
Each time you request a web page, they need the time to present that page.- First Paint (Green Line): the first point where the browser perform rendering on the page, such as a display background color.
- DOM Loaded (Blue Line): the point at which the DOM (Document Object Model) is ready.
- OnLoad (red line): When processing a page is done and all the sources on the page (images, CSS, etc.) has been completed downloaded.
- Fully Loaded (Purple Line): point after Onload event is turned on and there is no network activity for 2 seconds.
HTTP Response Headers
You can also click the request individually viewed what they called HTTP response headers. This provides valuable information. In this option we can directly see things like gzip is enabled on the web server, the web runs on HHVM, the web is served from the cache, the cache-control headers, server architecture (this is not always visible), expires headers, browser user-agent and much more.History
On the history tab you can see all the speed test you'll ever do. For a free account, there is a limit to the number of URLs that can be stored. You can also save the URL you want to monitor to see the changes that web performance.Summary
As you can see, figure out how to test the speed of GTmetrix worked a little better and what is the meaning of all charts can help you make an informed decision based on the data in terms of the performance of your website.One of the features that could have GTMetrix help you is very waterfall analysis because we can find out how Your individual assets are loaded. And remember, when should compare it with the tools to check the speed of the other websites, they are different tools and better use the same tools over time.
Are there any of you who have GTMetrix tried using before? Does this tool helps you improve Your site performance? Come on, leave a comment below!
Post a Comment for "GTMetrix Guide To Website Speed Analysis"
Attention!! Do not use active links in comments. Thank you