Optimising WordPress Installation For Google PageSpeed Insights

JeffTechnical Articles & Notes

I decided to implement Aetherweb’s own site using WordPress partly as a learning experience (it’s my first play with WordPress 4+) and partly because it made things quick and easy.

As soon as I launched the new site live I navigated to Google PageSpeed insights:

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

I discovered a considerable number of issues with image optimisation, above the fold javascript and css – non minified javascript and css. Etc etc. These were issues I could very easily resolve with a custom coded site – but which of course I have far less direct control over with a WordPress site. Especially one in which I’m using an off-the-shelf theme.

A little research and I’ve now installed and run the following:

WordPress Plugin EWWW Optimiser.
I had to temporarily re-enable PHP functions php_uname and exec in PHP.INI to allow this to work. These are disabled for security – I re-disabled them as soon as I’d finished. I enabled some non-default options (removing EXIF data and increasing server load and optimisation duration for greater effect – but this is a one-off optimisation process for almost all of the images involved and so load is high just once or twice – no problem). EWWW managed to reduce most of my files by 25% or more. Impressive.

WordPress Plugin Autoptimize.
A very smart bit of kit which relocates and combines multiple JS and CSS files and where possible moves them ‘below the fold’ and automatically minifies and optimises HTML and in-line CSS. I didn’t, but it can even convert small images to pure CSS data if you tick the right box.

WordPress Plugin WP-Super Cache.
Creates cache files for all site pages. I enabled all recommended options and set up the ‘preload’ option which forces pre-create cache files before any user has ever seen the live file. I extended the ‘freshness’ time to 864000 seconds – somewhat longer than the 1800 second default setting. Did not seem to turn on (leverage) browser caching for images however – which is one of Google’s important considerations so I disabled this and went for…

WP Fastest Cache.
Does most of the same things that WP-Super Cache does but also seems to be very effective at enabling browser caching images. Far simpler interface – less options – but does all that I want anyway.

PageSpeed Insights score increased for both mobile and desktop. Still not in the green, but much closer to being so. Server response time dropped considerably which is excellent.

Big negative however, Google PageSpeed Insights sees the homepage animations I have in place (at time of writing) as, in their initial state, ‘outside the viewport’ – and this is a big black tick in a bad box. Google’s engine isn’t smart enough to realise that as a user scrolls down the page, the items swoosh into place, within the viewport. I really like these animations though so will try hard to fix this somehow without losing them, but in the end, Google must be happy.