How to Improve Page Speed on your WordPress Site

Improving PageSpeed on your WordPress website can be a challenging endeavour, but it is possible.

In this post, I will show you each step to reaching your Core Web Vitals objective.

All these steps didn’t cost me a dime and were implemented solely by myself. Thus, you can do it too.

Here is what I have learned in the last two years of obsessing with speed.

SiteSpeed Tools

The first thing that you need is to know the tools that you can use to test your site.

The most obvious is Google Lighthouse. Lighthouse is available in Chrome Devtools.

To open Lighthouse, open the developer console in Google Chrome with Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).

Make sure that you are in incognito mode.

Additional tools that you can use with lighthouse are:

  • Pingdom Speed Test
  • Chrome Coverage Report

PageSpeed: A Major Effort Commitment

There is no one-size-fits-all solution to improving your site speed, especially on WordPress.

WordPress comes with a lot of cruft, and WordPress themes also bring their load of troubles. Some will tell you that you are better off coding your own site, and they might be right.

But, here I wanted to optimise my WordPress site. Not start from scratch.

It takes a lot of effort to reach your goal, and let’s face it, some sacrifices.

Basic guidelines

  • Purchase a lightweight theme, more features = more challenges.
  • Keep the number of plugins to a minimum
  • Reduce and compress your images

Static Sites – The best alternative to WordPress

Before we get started, let’s talk about an alternative to WordPress: static websites.

WordPress is fantastic for many reasons, but speed is not one of them.

It is possible though to make it fast, but it takes a lot of effort.

The simplest solution to having great site speed is to not use WordPress in the first place.

Instead, build your blog on a static site using Hugo and Netlify.

The static site shows static HTML, removing the need for server requests, thus making your site lightning fast and more secure.

Steps to Improving PageSpeed on WordPress

Here are the steps that I used to achieve decent pagespeed on my WordPress site.

  1. Have a decent host provider (host: GreenGeeks)
  2. Purchase the fastest WordPress Theme possible (theme: Dabba)
  3. Compress all images and use the Webp version when possible (plugin: Imagify)
  4. Use the Caching plugin recommended by my host provider. (plugin: LiteSpeed Cache)
  5. Clean-up unused assets (plugin: Asset Cleanup)
  6. Set-up Cloudflare CDN (plugin: Cloudflare)
  7. Set-up Cloudflare Worker (plugin: Cloudflare Page Cache)

Optimize Images

This is one of the easiest things to fix.

  • Upload smaller images
  • Optimise the images with Imagify

Make sure that you never upload an image over 1000px – 1000px. I try not to upload images over 750px.

Next, install the Imagify plugin.

This plugin will:

  • create images to the webp format.
  • resize images that are too large for your settings.
  • create thumbnails for smaller devices

Install a Browser Caching Plugin

In this step, I hit a few challenges. I started with the most recommended plugin which was W3TotalCache (Bluehost recommends it) but never had any real success.

When I had the most success is when I looked for the answer on my host provider’s website.

Clean-up Unused Assets

This step is one of the most important. Removing. from your site what you don’t need.

WordPress, dependencies and plugins can add a lot of unused code to your pages.

Asset Cleanup lets you select what you want to keep and remove.


Set-up Cloudflare CDN

Without Cloudflare CDN, you will not reach your goal. Fortunately, Cloudflare has a free option for small site owners.

The Cloudflare CDN delivers content to the user from a server that is closer to them. While my host servers are in Canada, users in Australia read my blog from a server-based in Sydney.

You will need to set up a page rule to Cache Everything.

To learn more about CDN, read Koray Tuğberk GÜBÜR’s bible: What is the Content Delivery Network (CDN) and Its Importance?

Set-up a Cloudflare Worker

The last, but not the least of the steps, was to create a caching worker on Cloudflare.

This step helped achieve great page speed results but have some downsides.

Interactive elements like comments will not be updated.

There is also a pitfall in the free version. When reaching 100K requests, the site is blocked. You can get 10M requests for 5$/month.

I wrote a guide detailing the steps to Create a Cloudflare Worker for PageSpeed.

This image has an empty alt attribute; its file name is image-64-1024x344.png

Conclusion

I’d love to see if you succeeded in implementing these steps.

Please share any additional ideas that II may have missed.