How To Improve Site Speed By Fixing GTmetrix Errors?
Actually loading speed is one of the most important factors for Google ranking and SEO. On the other hand, improving loading speed helps you improve the “First Impression” that you provide for users. So, by improving site speed you are optimizing your website for search engines and UX factors.
There are many different tools for measuring your loading speed. GTmetrix, Google Page Speed, Pingdom, Web Page Test and so on. We can say that GTmetrix is one of the best on the list. In this article, we are going to talk about GTmetrix, its function and the most important errors it shows you during a test.
Site speed varies on different websites and depends on different factors such as theme you are using, plugins you have installed, customized codes you have used, optimization factors you have adhered and many other factors we can mention.
For example in the picture below, we can see the test result on one of the Deep theme demos which shows astonishing page speed. this result shows that this theme is fully optimized by the developer team itself and you don’t need to worry about site speed optimization.
This shows how important your theme is. You should consider this factor for buying a theme, especially in WordPress. Let’s stick to our original purpose. We will talk about GTmetrix error and their solutions.
What is GTmetrix exactly?
Let’s quote from GTmetrix itself:
GTmetrix is one of the tools that we have found ourselves using more and more to get detailed reports about our site’s performance. It is a free tool that analyzes your page’s speed performance using Google Page Speed and YSlow. GTmetrix then generates scores for your pages and offers actionable recommendations on how to fix them.
GTmetrix is not only a web service but also a plugin and for those who don’t want to use a plugin, they can use their web-based version by going to the “gtmetrix.com”. Meanwhile, you can also add the GTmetrix interactive bookmark in your Firefox, Chrome, Safari, or Internet Explorer browsers.
Importance of optimized GTmetrix Elements (PageSpeed & YSlow):
Speed is a crucial element, to provide a pleasant UX (user experience) for visitors of your site. It directs the attention and focus of the visitors to ensure they see the real and actual contents of the website and also they spent their time on the genuine content and decrease the loading time of your images and scripts of the website.
Studies have shown that users will not tolerate more than a 4 second load time.
If your site does not have a quick response and a fast load, the users will leave your website. In terms of SEO, Google is mentioning using PageSpeed score in its ranking algorithm. In other words, your website can ranks up when you use PageSpeed element.
As a developer and marketer, if you look to optimize your website, PageSpeed should be among the top optimizations to consider.
PageSpeed evaluates the page’s conformance to a number of different rules. These rules are general front-end best practices which you can apply at any stage of web development.
YSlow grades web page based on one of the three predefined rulesets or a user-defined ruleset.
GTmetrix Analysis Errors
Network Connectivity Errors
If you get errors like the following:
- “Read timeout”
- “Broken pipe”
- “Connection reset by peer”
There may be connectivity issues between our server and the GTmetrix test server.
Server Status Errors
GTmetrix only analyzes pages that return a success HTTP status code. It means, if you are receiving this error, your page has an error HTTP status code. The most common reasons for this include:
- Your web application generating the page is incorrectly returning an error HTTP status code but is returning page content that does not indicate an error.
- Your web application is blocking GTmetrix from accessing the page. With WordPress, it could be due to plugins like Bad Behavior or Wordfence. With e-commerce software, it’s common that the access is blocked based on the IP.
- You are using a reverse proxy like CloudFlare and it is blocking GTmetrix from accessing the page.
SSL Certificate Errors
GTmetrix only analyzes HTTPS sites that have a valid, trusted SSL certificate. This type of errors commonly occurs when the intermediate/chain certificates aren’t installed correctly.
If GTmetrix has problems resolving your site’s domain, then you may have DNS configuration issues or DNS records have been cached if your site has recently changed name servers.
Your Page Took too Long to Load
The maximum time GTmetrix will wait for a page to load is 2 minutes. The most common reasons for this error are:
- An extremely slow loading page or resources
The URL did not Appear to be an HTML Page
To ensure that your page is an HTML page, GTmetrix checks the Content-Type header for text/HTML, because GTmetrix only analyzes HTML pages.
You also may get this error if the Content-Type header is missing or the value is empty. This problem usually occurs because of the web application, not the server.
404s are one of the most important errors you have to fix for better performance. 404 errors cause false requests and some serious issues for your site speed. Either you have to make them go away completely by turning them into 410 from your search console or redirect to a valid URL.
Disable WooCommerce Cart Fragment AJAX
if you have an online shop and using WooCommerce, there is an Ajax file that takes too long to load. This Ajax file, take 2 or 3 seconds to load completely, So disabling it would improve your site loading speed. You can use a free plugin to solve WooCommerce cart fragment problem.
Your CSS and JS files should be the inline tag of the head tag. if they are loading from elsewhere, you have to reorder them or remove them from your website.
Contact Form Captcha Problem
If you are using the Contact form, you may improve your loading speed by disabling its caching system. Contact form tries to av0id caching the captcha, so it takes so considerable time to perform the process. You can increase your loading speed by disabling it.
Next, we are going to survey some of the most important errors which you can find in your website speed test result. We provided practical solutions which we hope helps you out with your website optimization.
GTmetrix website gives you a compressed version of your style or script, named Optimize Version in front of each link, which you can try and substitute with your style and script on your own website, but before this, keep in mind, always take a backup from your website’s styles and scripts. There are some online tools or plugins that could help you.
Actually, all of your CSS and JS codes should be placed after closing body tag (after </body> tag), so you have to move them in the right order to increase your website performance.
Leverage Browser Caching
In this case, GTmetrix shows you the cases which are better to save in the user’s explorer cache, to increase the website loading speed.
For example, GTmetrix said that “http://…/font/calibri.woff” should save in the user’s cache.
You see by the extension and address that it is a font used for designing the website. It’s enough to say that the font with .woff extension should save in the user’s explorer cache. For this purpose, just copy the following code and paste in the .htaccess file:
<IfModule mod_expires.c> ExpiresActive On ExpiresByType font/woff "access plus 1 year" ExpiresDefault "access 1 month" </IfModule>
We made an example of what you have to do for fixing leverage browser caching error, but that’s not all. There are many different elements that are better to be cached on the browser. You can find codes for your required data in the following:
It means to decrease the volume of HTML codes. To do this manually change the codes like below:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> </body> </html>
or use this Compressed mode:
To fix this, you’d better transfer the body section scripts to head section of the website or at the end of the body section. After all put that on a file and reference that link.
It refers to keeping alive the file between server and explorer. Just put this following code in your website’s htaccess folder:
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
Avoid Bad Requests
It means that the requested address no longer exists. To fix this error, you should find addresses which GTMetrix shows you in your template and delete them because it says this address is not available.
Number of Requests
GTmetrix says you should have under 87 requests on a website. It’s an average number and the fewer requests you have, the better performance you get.
You can use WP-Rocket or Lazy Load plugin to fix this issue. For example, Lazy Load omits the value attributes of the images tag and let the site load completely, then it will put image values attributes in their previous order again. By doing this, requests during loading will be reduced and your “Time to first-byte” factor will be improved.
These are plugins that you can purchase in Deep theme with 20% discount and their guide has been completely explained in the Deep theme documentation.
Specify Image Dimensions
This means to specify values for the width and height of the images on our website. It is better not only specify values for our images through CSS but also in HTML like the following:
<img src="#link#" alt="#description#" width="Y" height="X" />
After doing this solution, your images SEO will boost and optimize, therefore you can see that your images indexing speed will lift up.