How To Improve Site Speed By Fixing GTmetrix Errors?

Site speed is one of the most important factors in Optimizing and SEO criteria. Gtmetrix is one of the best and most practical tools for measuring site speed.

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.

deep theme speed test
This is a result on Deep theme (App demo) speed test on GTmetrix which you can access to the full report in the following link: https://gtmetrix.com/reports/deeptem.com/MPcduo7r

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

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

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.

 

DNS errors

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
  • JavaScript that’s preventing the window onload event from firing.

 

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.

 

JavaScript Redirect or Meta Refresh

Unfortunately, GTmetrix currently does not handle pages that perform Meta refreshes or use JavaScript to redirect the page and still can’t fix this type of error.

 

404 Errors

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.

 

Reorder Your CSS and Javascript files in the Right Order

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.

 

Defer parsing of javascript

First of all, you should know that we have two option to recall the javascript file and fix this type of error.

Method 1:

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "java.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load",
downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

 

Method 2:

<script defer="defer"
type="text/javascript" src="java.js"></script>

 

Minify and Combine CSS and Minify Javascript

It means to decrease the volume of CSS and Javascript codes. To fix this error simply delete additional spaces and descriptions.

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:

  <IfModule mod_deflate.c>
 #Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>


## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg+xml "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access plus 1 month"  
ExpiresByType application/javascript "access plus 1 month"  
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

 

Minify HTML

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:

<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body></body></html>

 

Inline Small Javascript

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.

 

Enable Keep-Alive

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.

 

    0 Comments

    No Comment.