google pagespeed insight image of speed meters

Google PageSpeed Insights – How To Improve Your Site Speed And Keep Google Happy

Mobile devices have forced a massive change on the way Google ranks sites.

If you’ve ever used Google‘s Authorship Program to get your mug shot included in search results, that was the first victim to go.

Google said that displaying profile pictures of site authors on mobile devices was problematic because of the limited display area, so that combined with an increase in spammy posts with dubious author mark up meant the whole program was dropped. That was back in August 2014, but everything’s changed even more since then.

If your site doesn’t meet Google‘s speed expectations on both mobile and desktop, you will lose page rankings. And for something so easy to fix (well, it does  depend on the platform you’re using) it is absolutely worth it to get your site running as fast as you can.

But don’t worry. Google have come to the rescue with their wonderfully brilliant Google PageSpeed Insights tool.

Run your site through the tool right now to see how it performs, then come back here for a few fixes:

https://developers.google.com/speed/pagespeed/insights/

Here’s what my site looked like before I took necessary action. This is the Mobile result. The stuff in RED under the speed reading should be fixed a.s.a.p. The orange warnings under that are not so urgent, but ultimately you want the YELLOW warning signs to turn GREEN (as you’ll see further down this page once I applied the changes):

And here is the result for the Desktop version of my site. As you can see, it’s a little better, but it’s still YELLOW!

The number of errors I had looked quite scary on both mobile and desktop, but Google come up with a whole bunch of help directly from the tool. Very nice. Thank you Google.

The major problem for my site was that the theme I had wasn’t particularly responsive for mobile devices.

It did respond to them, but not in every respect. For example, something called the View Port was not defined on the site, so it refused to play perfectly with mobile devices.

The simple fix to that was changing the theme to something more recent that had these things built in.

Now, that was dead easy for me since I’m using WordPress on this site. If you’ve got a bespoke site, it’s almost certainly going to be a massive problem. You have my sympathy. It’s why I abandoned bespoke stuff years ago, then tried every content management system going (Joomla, Drupal, Typepad etc.) and ended up with WordPress.

If you don’t use WordPress, then follow Google‘s instructions in the PageSpeed Insight tool (and find yourself a first class developer).

If you do have WordPress, then it’s simple to cure almost all of these issues.

I did it with two plugins.

The first is my favourite cache plugin: W3 Total Cache. I turned on Page Cache, Minify, and the Browser options.

Second is to install the “Async JS and CSS” plugin. This is a real beauty. It comes ready to go right out of the box (and like W3 Total Cache it’s free).

Async JS and CSS

Now retest your site (note you will have to empty the cache after these changes – there will be a notice to do so after you’ve configured the plugins – you just click the button and you’re set).

Here’s how my site looked after these changes:

And here’s the Desktop result:

Now that’s a fine result. It took me around 1 minute for the plugins and around 5 hours to change theme (that took so long because the new theme I’m using has a ton of options and I needed to tweak many existing pages). I’ve been putting this off for ages!

I can still do a lot more to get to 100 on both results, but now they’re both GREEN, Google will not penalise the site for speed or mobile friendliness any more.

I hope it’s as easy for you.

If you’ve got any handy tips or questions on this topic just let me know below.


Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.