6 Steps to a Perfect 100/100 Google PageSpeed Insights Score by @bravr

Finding that perfect balance between user experience and a fast Google PageSpeed Insights score can be quite tricky.

It took us weeks of work to achieve our perfect score of 100/100.

The formula for every website will be different – there isn’t a one-size-fits-all approach.

Be prepared to break your site. If you don’t, you probably aren’t trying hard enough.

Here are six things we did to accomplish this.

Note: All our tests were done on a staging/development site and later migrated to our live website. Our website is built using WordPress, running the latest WordPress build with the Salient theme.

Google Page Speed Score

We use Cloudflare but not any of its speed optimization.

We found in our tests that it was slower.

If you’re on a shared hosting environment, then Cloudflare will probably help a lot.

But for us in particular, with a dedicated server, it was better with everything switched off.

The benchmark is 0.2 seconds. Anything above that and Google marks you down.

Our website runs on a high spec dedicated server with a handful of accounts. Most of what you read online will suggest you switch to a faster WordPress host (with affiliate links) which is the easiest way, but I wasn’t ready to give up on our own environment without at least trying.

Having a lot of server admin experience I switched off any unnecessary services running on the server to help increase speed. However, that didn’t make a lot of difference.

The biggest difference we noticed to reduce server response time was to switch to PHP 7. Not all hosts support PHP 7, but luckily, since we host our own sites, we do.

Mixed reports online show a 20 to 50 percent speed increase in switching to PHP 7. Regardless of the actual percentage, we had the need for speed and wanted to test it out.

If you don’t know what version of PHP you are running, install this plugin and you will see it in your “At a Glance” on your Admin Dashboard.

Before you go further, you need to check the site is compatible. Luckily there is a PHP compatibility checker plugin you can download for WordPress which scans through your code and identifies any issues with switching to PHP 7.

The results showed a few things that needed addressing, which we quickly took care of. We were finally ready to switch to PHP 7.

In order to switch, from WHM you access the “Multi PHP Manager”, select the site you want and change the PHP Version. If you don’t have access to WHM, ask your server admins, but make sure you are doing it on a test/development environment – it’s not best practice to break your production website.

PHP Coding

Google Analytics kept coming up in things to fix, which is ironic since its Google’s own PageSpeed test.

I got around this by copying Analytics.js direct from Google’s server onto our site and referring to it locally. There is a plugin for this if you don’t want to do this manually.

As for Google Fonts, we self-hosted these on the site. This helped remove this mark from the Google PageSpeed Score results.

There are a lot of plugins that deal within minification of JS and CSS files. The ones we see the most are Autoptimize and Better WordPress Minify.

Using Autoptimize completely screwed up the site and contact forms. Hero sliders and general functionality on the site broke.

In short, we got a good PageSpeed score, but the site wasn’t usable.

So we opted for Better WordPress Minify, which allows greater control and enables you to pick and choose what to do with each JS and CSS file. Configuring this took the longest, having to move scripts around, checking that the site operates correctly, and then rerunning the test.

We kept a log of every change and reported back on each change and what the impact was on Google PageSpeed. With so many variables to tune, it’s best to log it to measure cause and effect. Every site will be different, so fine-tune for your specific website.

You’ve probably inherited many sites where someone got plugin happy.

More plugins = a slower site.

Remove any fat. Delete or disable plugins that aren’t being used.

We enabled this on the server and then made changes to our .htaccess file to enable compression. We didn’t use another plugin.

Below is an example of our htaccess file. You will notice a number of elements that are cached using GZIP:

############## CACHING-GZIP ############ExpiresActive OnExpiresDefault A2592000ExpiresDefault A2592000ExpiresDefault A2592000ExpiresDefault A2592000ExpiresDefault A2592000Header set Cache-Control “max-age=2592000″Header set Cache-Control “max-age=2592000″Header set Cache-Control “max-age=2592000″Header set Cache-Control “max-age=2592000″SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-EncodingRequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-EncodingAddOutputFilterByType DEFLATE “application/atom+xml” \”application/javascript” \”application/json” \”application/ld+json” \”application/manifest+json” \”application/rdf+xml” \”application/rss+xml” \”application/schema+json” \”application/vnd.geo+json” \”application/vnd.ms-fontobject” \”application/x-font-ttf” \”application/x-javascript” \”application/x-web-app-manifest+json” \”application/xhtml+xml” \”application/xml” \”font/eot” \”font/opentype” \”image/bmp” \”image/svg+xml” \”image/vnd.microsoft.icon” \”image/x-icon” \”text/cache-manifest” \”text/css” \”text/html” \”text/javascript” \”text/plain” \”text/vcard” \”text/vnd.rim.location.xloc” \”text/vtt” \”text/x-component” \”text/x-cross-domain-policy” \”text/xml”AddEncoding gzip              svgz

You can see from the htaccess code, that it helps to deflate everything that the website renders. This includes JavaScript files, CSS, and even website icons.

Images are typically one of the main reasons for a low page speed score, so it is advised that on mobile views, you remove (or hide) any images that don’t add any value to the mobile experience.

Some of these tec

hnical aspects are often overlooked. Also, don’t be afraid to change things around and set yourself up to test several variants of code on your website.

Achieving a high page speed score is essential to SEO these days, with the increase of mobile device usage. So push yourself to get the holy 100/100 page speed score. It’s totally worth it.

More Page Speed Resources Here:

Image Credits

Featured Image: Geralt/Pixabay.com
In-Post Image # 1: Screenshot by Cai Simpson. Taken October 2017.
In-Post Image # 2: lmonk72/Pixabay.com

This post was made using the Auto Blogging Software from WebMagnates.org This line will not appear when posts are made after activating the software to full version.

Leave a Reply

Your email address will not be published. Required fields are marked *