How to score 100/100 on Google Speed Insights and GTMetrix in WordPress

How to score 100/100 on Google Speed Insights and GTMetrix in WordPress

Need Help? Contact me at sky@skychew.com

Requirements: Have FTP access using Filezilla or Filemanager access from your CPanel.
Recommended : Have access to your DNS manager, this could be in your Domain name company (eg: godaddy.com or namecheap.com)

Achieving 100/100 on google pagespeed is not necessary and will cause some problems. It is recommended that anything above 75 is good enough. Some side effects you might see includes your site loading but shows an ugly cssless site for 1 second and then your site loads completely and everything looks normal again. This will give your users the perception that something is wrong with your site.

Backup first

Before you begin make sure you have backup your site. Some of this changes are not reversible. I usually prefer server side backups. If you are using digital ocean you are in luck because backing up is just one click , “Creating a snapshot” . Also good to have is just have your .htaccess backed up and make sure you have ftp access to delete the plugin that is causing the issue if it happens.

Clear cache or view in incognito mode

A lot of times we don’t see changes until we clear our cache to get fresh new files from our servers. To do there is 2 ways incognito mode or hard reset a specific window better than clearing cache for your entire chrome.

Do not refresh in Chrome Incognito mode (Firefox has something called private window) but instead just close the window and open a new one because chrome uses incognito cache and cookie for that specific window only.

To hard reset first enable inspector mode:

Chrome inspector mode

Chrome inspector mode (developer tools).

You will see an inspector window appearing on the bottom of your window.
Then now when you right click on the refresh button you will see the hard reset mode:

enabling the clear cache and hard reset mode

Benchmarking

First we need to scan our site to find out what is wrong and what we need to work on.

Benchmarking tool:

  1. GTMetrix.com
  2. Google PageSpeed Insight

After testing a few websites that i run with over 20 different plugins my conclusion is that it will take a lot of time to find one that works for you. It is great if you can find the plugins that will help you make it work because on some websites I tried I couldn’t get it to work properly. Whenever it start to minify or merge+minify it will crash the site. Not displaying correctly or crash completely. So here I will share the best way to try the plugins and it must be done in this order to achieve the best results.

Optimize Images

Image compression vs file compression

Firstly do not get confuse with image compression and files compression they are different types of process altogether. Images compression (Lossy) uses algorithms to determine how best to reduce data/pixels to maintain the same viewing effect on a screen. Where else a file compression finds ways to reduce file size by looking at repetitive data stream and grouping them together and it works for any types of files. After a file is compressed they are commonly save as file types  zip, tar, or gzip depending on their compression methods.

Google Pagespeed Insight compression

Images are the easiest to fix. What I found was that google not only tells you how to fix it. It actually generates the minified and compressed images,Javascript and css for you to use.

Google page speed insights Optimize image should fix 100/100Google insights manually download to improve

For image I would recommend using the compression from google directly. Unless you have LOTS of images then its best to use compression plugins. Basically download the image form the link “download optimized …” and upload it to your server.
The scanner also shows you where the image is stored so you can replace the image using your FTP or Filemanage access to your server.

direct url to image on google insights

Bulk image compression Mac and Windows (Before Upload)

If you have some high res images and wants to compress them before upload photoshop is one of the more powerful tool to do your compression. However to do it in bulk quickly I have found a better tool xnConvert. It does compression and resize.

Compression criteria

There are many criteria to reduce image file size. I typically work with these 3:

1 – Size
Size is tricky for images you want to keep at full width or full height and responsive, I typically just use the ratio of 1920×1200 for maximum prettiness and 1280×1024 for most cases and 800×600 for maximum file save (like a mobile intensive site). Anything else with a consistent size you can just use the chrome plugin MeasureIt  to measure the size you need in pixels.

typical image size presets

2 – DPI
We wont go into explaining Dots Per Inches (DPI) you can google and read up on that. Simply put , it is the amount of Pixels Per Inch (PPI) which is more commonly known as DPI from the printing era. They both mean the amount of image information per square inch. 
All you need to remember here is that :

300dpi is good for hi-res large format printing like banners.
150 dpi is just good enough for a4 prints
75 dpi is sufficient for most web display (why not 72dpi)

3- File type
PNG (use for vector images or text or transparent bg)
Portable Network Graphics is a lossless file format created with the intent to replace the GIF format, due to the patent restrictions of GIF compression. The project was a success and we now have complete access to the format, which is patent-free, has great compression, and is widely supported by web browsers. PNG files are used primarily for transparent images, simple-color images, and images that have hard lines, like text and vector images.(not image, not gradient)

JPEG (use for photos or images with gradients)
Joint Photographic Experts Group created a file format, creatively named JPEG to handle complex-color photographic images. When saving a file as a JPEG, users have the choice of quality vs. compression. More compression results in a smaller file size, but you will lose quality. Obviously, less compression results in a larger file-size, but also a higher-quality image. The great thing about JPEG compression is that you can usually find a balance that both looks good and has a small file size. Unfortunately, JPEG files have no transparency. Additionally, the file format is lossy, meaning that it loses some of it’s data each time it is compressed.

GIF (use for animation)

Read and view here to see the compression differences

4 – Compression type
Depending on your file format they have their own compression, for more advance compression you can research the different type of compression algorithms available to different tools.

Batch Compressing images with xnConvert on your Mac and PC

1 – Choose files.
Cool thing here is that you don’t have to duplicate these files xnconvert will create a separate copy leaving your original copies intact.

xnconvert step by step guide - step 1 choose image

2 – Choose compression criteria known as actions here in xnconvert.
A – Resize

xnconvert choose action resize

B – set DPI

xnconvert set dpi

C – output>file format(jpeg) > settings

xnconvert Jpeg image compressiion

D- remove meta data from image to reduce file size
xnconvert bulk remove meta data

WordPress Plugins (did not pass google page speed insight test)

I tried  WP-Smush and EWWW image optimizer but the results i get wasn’t satisfying enough for google and EWWW only compressses image less than 100kb. I like Optimize but I compared pricing with Shortpixel has smaller package pricing to test out the results of the compression first and does its job well as well . I especially like how it compresses the original files and makes a copy in a separate folder see above.

Shortpixel has smaller package pricing to test out the results of the compression first

I skipped compression on thumbnails (to save cost) then I force wordpress to regenerate thumbnails images using Force Regenerate Thumbnails.

CONS: Once you update your plugin like contact form 7 or your template you will need to manually do this again. Therefore if you can achieve these with plugins that would be the best. I use a combination of plugins then fix the remaining issues manually. Continue below.

Enable Compression

Check if gzip is enabled using this :
https://checkgzipcompression.com/

WP Performance Score Booster

Enable Gzip compression google speed insights
Enable GZIP only first we will enable the rest step by step later.

Check and Enable GZIP compression

If the above plugin doesn’t work try this one specifically for this purpose.

Increase memory limit for your WordPress

Server IP & Memory Usage Display

Query Monitor

install this 2 plugin to monitor your server info then proceed to implement the updates below

There are 3 areas where you can do this.

Access these server files via cpanel >filemanager to Filezilla ftp’ing into your server.

In your wp-config.php file (wordpress root folder)

In your .htaccess file (wordpress root folder)

In your php.ini file

 

Now lets minify our CSS and JS . NOTES FROM HERE ON THERE IS A HIGHER LIKELIHOOD FOR THE SITE TO BREAK

Minify JavaScript, Minify CSS, Minify HTML

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Before we start I would recommend installing this plugin to see the changes to the JS and CSS files.

Fast Velocity Minify

Multiple feature minify.

WP Scripts & Styles Optimizer

Allows control over each scripts positioning. (Advance be careful with these changes)

Speed Booster pack/ Options

I used Speed Booster Options to Defer Javascript and move to footer.
Jquery would be one of those libraries that will cause this issue.

WP Asset cleanup

To disable google maps api from front page which was not needed in the homepage. You can use this to disable any js or css you don’t need on specific pages. Now that we have removed the items we don’t need now lets focus on defering the rest of the work.

Async JS and CSS

https://seo-hacker.com/optimizing-site-speed-asynchronous-deferred-javascript/ (Why is Async better than deferrring)
Problem with jquery (and this plugin was last updated 4 years ago) Disabled the JS Async

I used this to defer the last css script I have therefore i had used this specifically for css. It is quite well suited for this job as well because it has a lot of options to load the css. If you have issue with loading try the different options until the page loads correctly. As you can see I didn’t turn on the minify feature here because i tried it previously and it crashed the site. I have manually minified most of the css file here by uploading google’s version of the css. One other cool feature of this plugin is that it even helps you remove the ?ver=xxx at the end of your css files which prevents your website from “caching” the files.

async JS and CSS wordpress plugin

Use this plugin for Async loading of JS

Async Javascript

Use this with the plugin above to control which JS to load as async. Look in your browser console to see if there any conflict with your javascript if there is, note the JS file name and add them to the exclude list.

If the above 3 plugins doesn’t fix your problems. these below will help with specific things that got through.

Autoptimize (Not recommended)

Careful with minify features of most plugins.Tend to cause problems. As it is recommended to merge JS and CSS files a lot of them do it automatically and causes issues. If the plugins minifying and merging causes problems. Use googles minified version. Download and replace it like the images. This is quite time consuming because once you update the template or plugins you need to do the minifying process all over again.

WP Super Minify (Not recommended)

Would not use this because it does not have exclude feature

jQuery & Plugins Asynchronous Loader (Not recommended)

Helps with jquery loading async but causes problems with other plugins like google recaptcha

Google Webfont Optimizer

Only if the above fails then try this to optimize your fonts.googleapis.com. Google Webfont optimizer (may cause errors)but worked for one of my site.

Google fonts google web fonts loader web insights 100/100

Hide external scripts which you have no control over, like GA analytics

Now you might have reach the last item Ironically its Google Analytics itself. There is a more complicated or proper way to do this which is to host ga.js directly from your website and have a Cron run periodically to update the local js file. But all that work just for a little up in speed I feel is a waste of time. So to add that 1 percent just cheat google insights it self. Use install header and footers by WPBeginner.

Source: http://stackoverflow.com/questions/29162881/pagespeed-insights-99-100-because-of-google-analytics-how-can-i-cache-ga#

Another issue which is again by google you will get is if you include youtube videos in your page then you will also get google ads doubleclick script. to hide that from Google insights I enable javascript in my wordpress. ( THIS CAN BE CONSIDER A SECURITY FLAW IF your wordpress is open for other users to write posts)

In wp-config.php

In functions.php

Inside your page or posts:

Leverage browser caching

Cloudflare (Preferred method to browser caching)

Check if you are using Cloudflare. Ping your own domain and try to access the IP directly. You should see a 103 error page with cloudflare. So if thats the case just login to cloudflare go to cloudflare caching and set the time you want to cache your files. Cloudflare is a free service that protects you against attacks from the internet. Go to their website to find out more.

Cloudflare caching

Cloudflare browser caching

WP Performance Score Booster

Browser caching

Manually add to .htaccess file

How to edit wordpress .htaccess file

If all else fail google browser caching and there will be a lot of solutions available.
Ubuntu doesn’t use httpd.conf as standard. So instead we can save the configuration stuff for apache in:
/etc/apache2/mods-available/expires.conf

then Run:

other resources:

  • http://crunchify.com/how-to-speed-up-wordpress-leveraging-browser-caching-via-htaccess/
  • https://viewsby.wordpress.com/2013/03/14/ubuntu-apache2-enable-expires-headers/
  • https://ubuntuforums.org/showthread.php?t=1093093 (apache 2 mod_expires)
  • https://viewsby.wordpress.com/2013/03/14/ubuntu-apache2-enable-expires-headers/

 

These are some improvements specifically on GTMETRIX.COM

WP Performance Score Booster

Wp performance score booster speed insights

Remove query string from static content

Enable Keep-Alive

How to edit wordpress .htaccess file

The most you can achieve is all the rules checked. The rest if up to improving your server’s hardware.

Maximum pagespeed insight score

Maximum pagespeed insight score

Compiled Plugins

I have also compiled all the plugins in one spreadsheet to help with choosing which plugins to help with which issue. It’s a work in progress so email me at to get a google drive link for it.
sky@growthhackingasia.com

Wordpress Google Page Speed Insights improvement plugin

WordPress Google Page Speed Insights improvement plugin

Other great sources:

  1. https://code.tutsplus.com/tutorials/optimizing-google-pagespeed-to-100-in-wordpress–cms-25804
  2. https://premium.wpmudev.org/blog/why-trying-to-get-95-on-google-pagespeed-insights-will-drive-you-mad
  3. https://www.elegantthemes.com/blog/tips-tricks/how-to-improve-your-google-page-speed-score
  4. https://wordpress.org/support/topic/how-to-fix-render-blocking-java-script-in-wordpress/

Updates resource:

Speed up wordpress with KEYCDN

https://www.keycdn.com/blog/speed-up-wordpress/

 

Submit a Comment