How to make WordPress your bitch

Ace google Lighthouse scores

The following is a list of items / plugins that will help improve your wordpress install, sticking to generic stuff that should be applicable to most wordpress installs.

Reports


Out of scope

A large part of your performance issues will be the theme file itself, but that needs to be dealt with on a case by case basis as themes are just too different.

In my case I had a really good efficient base theme called understrap (bootstrap 4 theme for wordpress) as my starting point, most other themes will not be as well built.

Just google ‘Fast loading wordpress themes’ and pick one you are happy with to act as your base.

May be useful:

Unregistering default wordpress assets (as long as you can be sure they are no longer being used) which was the case for me with understrap.

Within functions.php

Example:


add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'wp-block-library' );
} );

Text compression (apache)

Priority : High
Time required: Couple of minutes

Add a few lines to your .htaccess file save, reload page and check the header to see if gzip is enabled

https://varvy.com/pagespeed/enable-compression.html


Eliminate render-blocking resources

Priority: High
Time required: Couple of days

Can be tricky, but essentially needs everything except the most important stuff (which other files are reliant on loading first) being moved from the header to the footer.
In an ideal world, you would move all of it to the bottom (css and js) and just have the critical path / above the fold css inlined at the top of the document.. but sometimes you are unable to due to inline js.

Remainder header items (which cannot be moved for whatever reason) to be ‘pre-loaded’ AFTER Autoptimize has done it’s thing.

https://3perf.com/blog/link-rels/


Remove unused CSS

Priority: low  
Time required: Couple of days

Ideally you would dump all css into one file on live, then let this thing do its thing (analyse and build the replacement file) and replace all css with what it spits out (keeping a backup of the original). I would suggest only doing this one if you have run out of things to try and are desperate for a little more speed. It’s totally fine as long as you get into the habit of keeping a backup, but it just ads one more thing to keep track of in a workflow, for what is at best half a second to a second faster on most website css file optimizations (I have seen some instances where this gives you a couple of seconds faster but that is not the norm). Benefits are, much smaller css file and less layout thrashing due to styles overriding styles overriding styles overriding styles… etc.

https://unused-css.com/


Cache enabler

Priority: High
Time required: minutes, plugin install & configure

Simple and fast WordPress disk caching plugin (kick arse,  removed php processing overhead and drastically cuts down the page ‘Time to first byte’ to flatfile levels). On average hosting can get your page ttfb down from hundreds of milliseconds to below 50 as you are effectively just serving flat html at that point.


Heartbeat

Priority: Medium
Time required: Minutes, plugin install & configure

Shot to nothing, might help with ‘time to first byte’ issues, might not. Essentially set a rule to switch it off on the front end and another rule to limit it on the back end, it reduces cpu usage on the server so ‘in theory’ should give it more horses to spare for when it needs it.


EWWW Image Optimizer

Priority: low
Time required: Minutes, plugin install & configure (takes a long time to run though but that is a background task)

– credit based system, it goes through and optimizes the images in the website, because there is a cost involved you might want to skip or leave until last if you are desperate for a little more performance, typically lazy loading gives you the majority of speed up you are ever going to get with a pages images, past that point, optimizing individual images  is minor speed gains.


Autoptimize

Priority: medium
Time required: minutes, plugin install & configure

Caution: may not work fully with the theme if there has been too much manual hardcoding.  Makes your site faster by optimizing CSS, JS, Images, Google fonts and more (I use it for essentially just minifying and merging files in the front end). This step is best done BEFORE setting the pre-load as a different set of files (optimized) will be served in the front end.


a3 Lazy Load

Priority : *
Time required: Minutes, plugin install & configure

* Priority depends on if the site is image heavy or not, if the site contains lots of images then the priority is high, not a lot of images then the priority is low, on our  newspaper sites it’s a life saver. There are other plugins that do the same thing, I am just used to this one as it’s the same one we used on our polopoly hosting.


CAOS for Analytics

Priority: low
Time required: Minutes, plugin install & configure

Getting that google analytics file in the footer, served local and setting the browser cache will speed up visits / re-visits a little. Google set a 2 hour cache time on the file so it’s practically re-loaded with every session re-visit, I have no idea why they do this as that file hardly ever gets updated at all.


Super Progressive Web Apps

Priority: low
Time required: Minutes, plugin install & configure

Only really speeds up the re-visit, not the initial visit.

only issues so far: browser shows mixed http 1.1 and 2.0 network traffic, ignore as its just browser caching items in the devices local storage being interpreted as 1.1 (it’s a bug basically).


Browser caching

Priority: high
Time required: Minutes*

Only really speeds up the re-visit for the end user, additional benefits are reduced load / less bandwidth on your webserver(s) due to more files being cached for longer on the client side of things.

* asterisk is here because you need to spend some time thinking this through properly, you have to be sure that your caching model fits your type of content, files that are continually being edited are not a good mix for long browser cache times.

https://kinsta.com/blog/leverage-browser-caching/

Notes:

webP / webM

Definitely smaller size / better quality than equivalent jpg / mp4 (thereby saving a little bandwidth and being a bit faster) but I didn’t think it was worth it, iOS doesn’t support it natively and you need to polyfill with js / extra markup just to get it to show your normal images as a fallback to iOS devices. Same is true for webM for video.

If you are fine with a polyfill fallback for iOS then go for it, I just didn’t think it was worth it.

Yoast SEO

Yoast SEO isn’t really a page load performance tool but it’s definitely a great seo performance tool, minutes to install / setup, rest is in their hands