How to Fix Common GTMetrix Problems

By June 4, 2018SEO

What are  GTMetrix Problems? One of the most essential metrics for any website is speed, for some websites, the difference of one second can add up to lots of money missed or earned revenue. This makes precisely measuring website speed important. GTMetrix for WordPress analyzes the performance of our page’s speed, hence providing us with insight into how well your website loads.

It also offers suggestions on how to optimize our site’s speed. Features include:

  • use Yahoo! YSlow and Google PageSpeed to analyze my sites
  • Graphics to track History
  • Analyze on Android
  • use 3 interactive graphs to visualize history and monitor my page’s performance.
  • Optimize  website for mobile users and make sure a quick page load time on their gadgets
  • Set a date range, pan, zoom and more
  • use Multiple Regions to test
  • use a summary of important performance indicators to get reports
  • analyze website’s page load from different regions globally

Common GTMetrix Problems:

  • YSlow – What is YSlow?

We may be confused as to why we may have a high YSlow score/PageSpeed score, but a slow loading website. YSlow and PageSpeed focus on our site’s front-end performance, which includes elements that are mostly in our control, such as general website structure and images.

YSlow and PageSpeed scores inform us how well our front-end is optimized for loading time, and while essential, they are but 50 percent of the determining factor.

I also often analyze my page using GTMetrix YSlow tool to find out why it’s slow. In addition, I run the tool and implement its checklist-style recommendations to considerably decrease the page loading times and enhance my site’s user experience.

Installation

You can also install this tool from the source; however, it is simpler just to take one of the numerous builds. When you go to the homepage at yslow.org you will see lots of installation choices:

  • Page Speed

What is Page Speed?

Page speed is usually confused with “site website speed” that is, in fact, the page speed for a sample of page views on a website. Therefore, it can be described in “time to first byte” (the amount of time it takes for our browser to get the first byte of information from the web server) or “page load time” (how long it takes to completely display the content on a certain page).

GTMetrix speed test comes into the picture and offers you an in-depth analysis of the load speed of your website, putting together the greatness of both Yahoo and Google analyzers.

You can also use Google’s PageSpeed Insights to analyze your page speed because it incorporates data from Chrome User Experience Report (CrUX) and reports on two essential speed metrics: First FCP (Contentful Paint) and DCL (DOMContentLoaded).

How to – Gzip Compression

This is another way you can solve GTMetrix problems. Compression is essentially squashing the data as much as possible without losing any instructions or functionality that it has.

I also use several ways to compress my files to ensure they are smaller and one of the most preferred techniques is through Hyper-Text Access (.htaccess). This can be situated via the server’s root; I just go to the File Manager after I have logged in to the server. Furthermore, it might differ in wording from Host to Host.

In addition, you might have to ask your Hosting service provider how to View hidden files as your server might hide specific files. I often do it via the file manager settings.

Solution – Find and open your .htaccess file. You will see something like this:

# START WordPress

<IfModule mod_rewrite.c>

RewriteEngine On RewriteBase /

RewriteCond %{REQUEST_FILENAME}!-f

RewriteCond %{REQUEST_FILENAME}!-d

RewriteRule . /index.php [L]

</IfModule>

# END WordPress

After that, Insert the code above, this will allow Gzip compression via apache. Return to your website, hit control F5 and then run one more test on Gtmetrix to check if your score in Enable Gzip Compression has increased up. Keep in mind also that alterations made to your .htaccess only affect your server’s files.

<ifModule mod_gzip.c>

  mod_gzip_on Yes

  mod_gzip_dechunk Yes

  mod_gzip_item_include file \.(html?¦txt¦css¦js¦php¦pl)$

  mod_gzip_item_include handler ^cgi-script$

  mod_gzip_item_include mime ^text/.*

  mod_gzip_item_include mime ^application/x-javascript.*

  mod_gzip_item_exclude mime ^image/.*

  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</ifModule>

How to Minify CSS and JavaScripts 

Most stylesheets and scripts have many comments and empty spaces for the purpose of editing. It helps make it simpler to read for human; however, for machines, it does not really matter. When minifying stylesheets and scripts I always keep a backup of the original that I already have.

There are 2 reasons why we should have an original copy, the first for the purpose of editing and the second in the event something fails in the process of minifying.

There are several tools to minify the scripts: the Online YUI Compressor and Googles Closure Compiler service.

You can also use the recommendations made by Gtmetrix. Choose see optimized version by clicking on Minify Java or Minify CSS.

After that, Copy/Paste that into the right file. Simply follow the file path shown in Gtmetrix, which for your theme’s stylesheet has to be something such as this:

http://sitename.com/wp-content/themes/theme-name/styles.css

On the server which may differ, it might look something such as this:

root/wp-content/themes/theme-name/styles.css

Then press control F5 to refresh and once more run Gtmetrix to make sure stylesheets and scripts have been minified.

You can minify scripts and stylesheets situated on the server for your theme and plugins.

Optimized and serve Scaled images

  • There are 2 things which will slow down our websites, and they are both related to images. Adding wrongly scaled images to our theme and posts
  • uploading an image, which is simply too large with regards to size in KB or some instances MB.

View image source by right clicking my image, you’ll see its dimensions, File Type, location, and Size.

Solution – Download and install Shrink O’Matic, making sure you have a desktop shortcut since you’ll be using it a great deal. It’s an easy drag and drop image optimization program. Select the kind of file after setting the dimensions.

Use .jpg for images in a page or post

Use .png or .GIF for images used in Diagrams or logos

Save your page or post as draft, Press control F after changing to HTML viewer to locate the image ( a search box will emerge at the top or bottom on the browser) look for the last section of the image, i.e., the name plus extension of the image.

#Style attribute for your image, note the ” at the end, don’t miss that out.

style=”width: 200px; height: 150px;”

#Also add the height and width of the browser which is placed at the end of the image path.

src=”https://diywordpressblog.com/wp-content/uploads/2012/04/Camel-Friend.jpg” width=”200″ height=”150″

#Image code in its complete form, this is the simplest way to add dimensions in your posts and pages

<img class=”size-full wp-image-122 alignleft” style=”width: 200px; height: 150px;” title=”Camel Friend” src=”https://diywordpressblog.com/wp-content/uploads/2012/04/Camel-Friend.jpg” width=”200″ height=”150″ alt=”Camel” />

Once more you can test the results via visiting your website, retesting Gtmetrix after pressing control F5.

Smush plugin – the ultimate tool for image optimization

GTMetrix recommends WP Smush plugin installation. This image optimization plugin is not as ever-present as W3 Total Cache, but it has to be. It processes PNG, GIF, and JPEG images using lossless compression for all presently existing images, and also any new ones uploaded to the WordPress installation. Images, even big ones, are going to be “smushed” to 1MB or less.

Leave a Reply