SCORING 100/100 ON GOOGLE PAGESPEED INSIGHTS (PART 2)

In part one, I discussed the need for a great host. A VPS or dedicated hosting of some kind will usually give you a much quicker connection and help to bring your page speed score right up. My recommendation is to go with cloud hosting from somebody like Nimbus Hosting – they are the company I use and trust. I recommend almost all of my clients to them, and honestly, they are fantastic. And no, I’m not on a referral scheme!

So, once you have your hosting sorted and your site is on a decent server, we can really get to work on bringing that score up. First thing is first, understand what the existing score is and work out where it is letting you down.

The most common issue is not having compression enabled in anyway. Enable Compression! Again, good hosting will cover this off for you, so you won’t have to worry too much, but check through what Google is telling you to do, and follow those rules. If your server doesn’t do it out of the box, then there are a couple of other ways to do it. The easiest is to use a caching plugin that supports enabling Gzip. W3 Total Cache has a way to enable this for you, as does WP Rocket – there are a plethora of good plugins you could use. Read the reviews and see what takes your fancy. My plugin of choice is WP Rocket.

If you’re a little more comfortable with code and just want to handle compression yourself, then open up your .htaccess file and you can add this code (Taken from: https://gtmetrix.com/enable-gzip-compression.html):

  # 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

Now, go ahead and run your site through PageSpeed Insights again – has your score improved? If so, great! If not, then we may have a bigger problem. But, enabling compression should almost always improve your score on both desktop and mobile.

Next up, we need to optimise your images. Now, in an ideal world you’d upload images exactly at the right size, already saved for web and they’d all be perfect. But clients don’t always do that, so you have to think ahead. A plugin like Kraken would be my first port of call if you want an easy win. But you could go into your functions file and add in some custom image sizes to fit your site and layouts. By doing this, and using srcset you will reduce the image load on your site, as it will always load the perfect sized images. I’d still recommend using smushit or tinypng to compress your images as best as possible before uploading – don’t upload some huge, uncompressed image and get punished by Google for it!

In the next part, I’ll be talking about the ever fun ‘Eliminate Render-blocking JavaScript and CSS in Above-the-fold Content’ – a failsafe way to make you want to pull your hair out!

See you in a week or so!