How I took my WordPress website from 40 to 97 in page speed optimization

I have always liked fast software. I switched away from VS Code simply because I was faster than VS Code. Coincidentally, that’s the same reason users don’t stay on websites. As Casey Muratori highlighted in his Substack, businesses sacrifice both time and money to improve the performance of their software. They realize that faster software leads to better user retention, more engagement and ultimately more revenue.

I did voice such opinions (somewhat aggressively) while working on Twinner and at Arbisoft. However, at the same time, I did no performance tuning on my own website.

This slideshow requires JavaScript.

Kind of hypocritical, no?

So this year I finally decided to put some effort into speeding up my site. I use WordPress so I did what the internet told me to. I installed some plugins, changed a few settings and ran the test. Nothing changed. Uninstalled the plugin, installed another one, tinkered with it and reran the test. Still nothing. After trying a few more plugins and seeing no results I got tired. I figured there was no easy way around it. I’ll have to manually tweak and tune the site until I get the desired results.

Here is the entire story.

WP-Optimize

WP-Optimize was the first plugin I tested. Probably because it had the most downloads and a 5-star rating in the WordPress plugin repository. I installed the plugin and started playing around with it.

The first thing I did was optimize database tables. I have no idea what this does. I was partially scared that it would delete some of the necessary tables but I went with it anyway (I have backups so who cares). And it did nothing. I re-ran the speed test and it didn’t impact speed.

I enabled the settings to minify files. Minifying means making CSS and JS files smaller. That didn’t have any impact either.

Finally, there was the option to enable caching. I tried that. It did not have any effect.

So clearly I was disappointed. I’m not sure what this plugin does for the 1 million+ websites using it but it didn’t work for me.

Uninstalled.

Autoptimize

Next, I installed Autoptimize. I didn’t use the premium version and wanted to see how far I could go with the free one. Autoptimize takes all of the CSS and JS scripts on page and combines them into a single <link> and <script> tag on the page. This is a standard approach to improving performance. So what did I see after installing and activating Autoptimize?

A 10% boost. Yup, that’s it.

And there was an error called “render-blocking resources” on page speed insights. Autoptimize got rid of that error.

But this was far too low from what I was expecting. The free version only got me a 10% boost and I was expecting more.

Uninstalled.

Jetpack Boost

I already use Automattic’s Jetpack on my site. I saw a notification for Jetpack Boost which promised to “Boost” my website. It’s a rather simple plugin. You installed it and all the settings are on a single page. You enable what you want and let it do its work.

I installed it and enabled the standard options and got……

Nothing.

Absolutely nothing. It didn’t do anything at all.

Uninstalled.

What actually worked

That’s it! I had it with these plugins. Each of them made either minor improvements or none at all. I figured I had to get my hands dirty and fix my WordPress blog page speed myself. I started analyzing the problems on my website one by one and fixing them.

Web font caching

The first problem I had was that web fonts on my site were not being cached. This applied to woff and woff2 font files. After a bit of digging, I was able to find the culprit. The NGINX configuration on my server cached all other static assets except woff and woff2 files. I added the extensions to the configuration and the result was an immediate 5% boost.

I now had a score of 45 on Lighthouse just from this one change.

Unused plugins

I had experimented with a lot of plugins on my site to add different features. I really didn’t need most of them and I left them as is. After figuring out the plugins I actually used, I disabled and deleted all of the rest. This single move gave me a 35-40% boost in performance.

Wow! Just goes to show, the fastest code is always the one you don’t have to run.

I was hovering around the 70-75 mark in Lighthouse scores. Good. But I wanted better.

Unused scripts

I saw an unused script tag lurking in my website code. I had experimented with chatbots sometime in 2019 and I still had an unused ManyChat script lurking in my <head> tag. I removed it and voila!

An immediate 20% boost and now my website was hovering around the 88-89% mark.

Optimizing CSS and JS files

Even after deleting unused plugins and scripts, there was still the issue of optimizing the JS and CSS files on the website. I decided to use Jetpack Boost to achieve this. Turns out, if you intelligently use these plugins they can make a difference.

I installed the plugin again and enabled only three settings. “Concatenate CSS”, “Concatenate JS”, and “Image CDN”.

Enabling these three settings gave me a minor boost in speed. Now I was at 94.

However, they also introduced a bug. The LCP element on my page was no longer optimized.

The Largest Contentful Paint

The final issue that remained was the LCP element. The LCP element is usually the largest image in the viewport on the first page load. After enabling “Image CDN” this was being lazy loaded. Normally lazy loading is a good thing for images but in the case of the LCP element, that image must not be lazy loaded.

Jetpack Boost had no option to fix this. so I had to dig further.

After playing around with different WordPress hooks and filters, I came up with the following script.

add_filter('wp_get_attachment_image_attributes', function($attrs) {
    global $wp_query;
    
    if ( in_the_loop() && is_main_query() && $wp_query->current_post == 0) {
        $attrs['class'] = $attrs['class'] . ' skip-lazy';
    }
    
    return $attrs;
});

This script adds the “skip-lazy” class to the first largest image on my blog. The “skip-lazy” class tells Jetpack Boost to not lazy load the image but to preload it instead. This fixed the final major issue on my website and the results speak for themselves.

This slideshow requires JavaScript.