Advertisement
|

7 Steps to a Perfect 100/100 Google PageSpeed Insights Score

  • 1.5K
    SHARES
  • 7.4K
    READS
Cai Simpson
Cai Simpson
7 Steps to a Perfect 100/100 Google PageSpeed Insights Score

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 seven 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.

Note: All of our tests were done on a staging/development site and later migrated to our live website.

Google Page Speed Score

1. DNS

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.

If you have no skills or time to install Cloudflare as an alternative, you can use hosting providers such as WP-Engine, Presslabs,  Pantheon.io. They come with built-in server cache and CDN configuration.

2. Passing the Server Response Time

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

3. CSS and JavaScript Render Blocking

First, you should define which parts of your CSS and JS files are critical for rendering. After this, you need to load those parts to the<head> element of HTML by inlining them within the <style> and <script> tags.

The second step involves enabling defer loading or asynchronous loading of non-critical elements. For example, if you use popups on the website which appears after a period of time when a user lands on your website, you should separate the CSS and JS for the popup on a different file and load as described below. (Any non-critical CSS as well ass Google fonts  can be defer loaded by using this snippet of code.):

<noscript id="deferred-styles-number-1">
      &amp;amp;lt;link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Do+Hyeon"/&amp;amp;gt;
    </noscript><script>
    window.addEventListener('DOMContentLoaded', function() {
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles-number-1");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    });
    </script>

For JavaScript files, you can simply add defer or async attributes to the<script> tags. You can learn more about the difference between these loading methods here.

After doing this you will never encounter render blocking issues from your style file.

4. Optimize Images

Almost all websites have image optimization issues. There are various ways you can get this fixed.

5. Minify

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.

6. Don’t Be a Plugin Hoarder

If you use CMS like WordPress, Joomla, etc., then you should definitely avoid using too many plugins.

More plugins = a slower site.

Remove any fat. Delete or disable plugins that aren’t being used. You can do small tweaks using custom coding rather than installing monster plugins which load 2-3 JavaScript or CSS files.

For example, if you look at this source you will find many simple tweaks you can just copy and paste to avoid installing plugins.

7. Enable Compression

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 ############

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A2592000

<FilesMatch "\.(txt|xml|js)$">
ExpiresDefault A2592000
</FilesMatch>

<FilesMatch "\.(css)$">
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
ExpiresDefault A2592000
</FilesMatch>

<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
ExpiresDefault A2592000
</FilesMatch>

</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(txt|xml|js)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
</IfModule>

<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType 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"
</IfModule>
<IfModule mod_mime.c>
AddEncoding gzip              svgz
</IfModule>
</IfModule>

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.

Conclusion

Some of these technical 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

ADVERTISEMENT
ADVERTISEMENT
Cai Simpson

Cai Simpson

Digital Marketing Manager at Bravr Digital Marketing

Cai Simpson is the Digital Marketing Manager at Bravr. A digital marketing agency based in London, Vancouver and Devon. Cai ... [Read full bio]

Advertisement