What to do if your page loading time sucks

Ever just throw the kitchen sink at something to try to get it perfect? Trying to completely optimize my google PageSpeed performance score for my mechanical keyboard site thekeeblog was no different. A 3.5 second desktop load time? Unacceptable.

Remove clutter

First I set about deactivating plugins that were too intensive in terms of images and bloat. I ended up deactivating several slider plugins and all other unused plugins.

Lighter and faster theme

Then I switched to a more minimalist theme that utilized smaller preview images. I ended up going with a free lite theme ‘Drift blog’, a child theme of ‘Gist’.

Try different types of caching and caching plugins

I tested litespeed (server level caching) against WP rocket caching (file based) and found that for this site, WP rocket was giving me faster load times.

Upgrade to better hosting

I also upgraded to cloud hosting to improve my server response time. More computing power in terms of CPU Cores and Ram is allocated than with shared hosting. This may have had a slight positive effect, and also a negative effect on my bank balance.

Add lazy loading but don’t forget to exclude the logo or site banners

I added lazy loading which improved the overall load time, but made the first paintful content time too slow. Eventually I solved this by instructing the site not to lazy load the logo. I also tried to get it not to lazy load the featured image for each post, but PageSpeed didn’t seem to like this so I rolled it back. The theory I was operating by was ‘below the fold’, which means I was trying to lazy load images below the fold only. I settled for lazy loading everything except for the site logo.

Tick as many boxes in WP rocket as you can without breaking the formatting

For maximum performance it seems to be best to instruct WP rocket to do all it can from minifying CSS and HTML, to deferring JavaScript, and serving WebP images (use the companion plugin Imagify, it is pretty swell). It adds up and can give a big boost.

Use image shrinking compression plugins such us Imagify or Smush

I’d recommend going with a premium image compressor as the free ones tend to be throttled a bit. So the savings don’t end up being that stellar. Imagify for 5/month squashes my original images by about 75% and WP Rocket serves them as WebP- which is a relatively newfangled Google preffered format- on my site.

Smush is also pretty good, but I went with Imagify since it integrates really nicely with WP Rocket- it will work standalone as well though.

Don’t use a separate mobile cache

Originally I had asked WP rocket to serve a separate mobile cache but this turned out to be unnecessary and actually made the cumulative layout shift (how much time the browser needs to spend resizing things) much worse, which was the opposite of what I expected. Sure enough, serving the site on mobile is still the bane of my existence, as my hosting providers speed test seems to think it’s still geriatric- but sitespeed seems convinced that it has some pace.

That’s the main thing as speed is a contributor to SEO. Google will probably not want to show your site if it takes 15 seconds to load, like one of my first sites on a free hosting provider took back in 2014.

My hosting speedtest says it loads the first contentful paint in 3.1 seconds as opposed to sitespeed’s 1.9. On the flipside my hosting provider can load the desktop version in 0.6 seconds to sitespeeds 0.9. I’d actually expect the hosting provider to be a little faster since I am assuming the servers are in the same data center (maybe).

Try more themes (this backfired)

The problem with the mobile loadspeed annoyed me so much that I did some research and settled on a really nice looking alternative theme Writing- Personal blog.

I thought that the extra care that had been put in to make it premium might mean that the mobile site was better optimized. In fact this completely bricked the load time for mobile and blew it out to 9.3 seconds. And yes I did remember to clear and preload the cache. Luckily the benefit to upgrading to the cloud hosting is I can generate a bunch of staging sites to play around with without bricking it altogether.

Troubleshoot optimization problems

I don’t want to waste the fifty-three US dollars I just spent on that theme, so I’ve put it on this site now. Even for this site, (admittedly without any caching- oh wait litespeed caching was in fact on), the load time was still dogwater. A 4 second mobile loading time is a bit of a joke for a page that has no images. I got similar results using WP Fastest cache as litespeed, so it seems to be ‘the theme’s fault’. The desktop load time was OK but not stellar considering how light this site is in terms of resources. But it looks extremely good and the developers have clearly nailed the SEO and accessibility side of things.

Try more themes (again)- my modifications and plugins worked on a second theme

I decided I wasn’t thrilled by the Neolithic appearance of my site. And the new logo I got made didn’t really suit the theme, so I tried a few more.

“Puskar” by Template Sell is a hidden gem of a theme that features a pretty nice dark mode. I eventually got it up to speed that rivalled Drift Blog, using the same cocktail of plugins still installed. Template Sell, hit me up if you want to do a promo.

And now for the coup de grâce-

The ‘Unbloater‘ plugin by Christoph Rado

The Unbloater plugin is a godsend.

These are the settings I used with Unbloater to drop my load time on desktop from 0.8 seconds to a blistering 0.4 seconds.

Generator Tag	Remove the Generator meta tag- Hides your WordPress version from plain sight.
Script/Style Versions	Remove the version parameter from styles and scripts- Hides your WordPress version some more.
WLW Manifest	Remove the WLW Manifest link – The Windows Live Writer (super old, dead software) Manifest is absolutely not needed anymore.
Comment Script	Optimize the comment script by only loading it when needed (when comments are activated and open)

I just chose a couple of features that I thought I wouldn’t need and also the version parameter for security reasons. And this gave a huge boost to my speed. Not loading the comment script on every page must make a huge difference! I may possibly tinker with a few more settings but my main issue to contend with is image sizes on mobile at the moment.

How to improve PageSpeed Accessibility score

Finally performance and load times are going OK. Now for accessibility!

The next step was accessibility. I had to manually add alt tags to every image on my site as none of them had any. WP-rocket solved a lot of my problems for me by adding height and width tags to images that didn’t have them. Oddly enough, this feature didn’t seem to be compatible with the previous theme I was running.

I still need to add meta descriptions to every page which I am putting off, but this should give my SEO score the final boost it needs.