<leeconlin.co.uk />

Most clients that I deal with specifically ask for WordPress. It’s the most popular CMS for small businesses and despite my past reservations about the software I decided it was about time I took a deeper dive into it. In this article, I will share with you the top 5 things I’ve done on this website to improve performance.

My previous experience with WordPress has been that it has poor performance illustrated by low scores in Google Page-Speed Insights, GTMetrix and other performance checkers.

When clients ask me to look into the performance issues I normally find that they are caused by page builder plugins or by having lots of JavaScript firing off above the fold when the page first loads. In most cases, this problem is usually inherited from an “off the shelf” theme.

My plan

So that I can better serve my clients, and for my own curiosity, I wanted to see if a WordPress site could be built using a page builder and still perform well.

For this experiment, I decided to rebuild my own website in WordPress using the Elementor Pro page builder.

Plugins

I’ve listed below the key plugins I used to tune the performance of this site. I do have others, but these are the key ones for performance.

Asset CleanUp is used to disable several default features in WordPress that I’m not using on the site, such as comments, emoji, XML-RPC and oEmbed. It also allows me to optimise the loading of fonts by preloading them.

Autoptimize and Async JavaScript work together to optimise the delivery of HTML, CSS and JavaScript. They will combine files and minify them to provide optimised asset payloads to the browser and reduce render-blocking scripts and styles.

Cloudinary is used to host images from my site. Their service provides a CDN as well as image optimisation & manipulation services. They have a free account that is quite generous and their plugin is also free.

Disable Comments does exactly what the name suggests. It disables the WordPress comment system. It also disables all of the features, JavaScript and APIs that the comment system uses which results in less code to load and execute and a more secure system.

Elementor and Elementor Pro are my page builder plugins of choice. I find that they strike a good balance between usability and flexibility.

jQuery Updater simply updates the version of jQuery used on the site to the latest version. This helps ensure that we’re using the most optimised version and that there are no known security vulnerabilities included.

Lazy Load Background Images for Elementor is another simple plugin that does just what the name suggests – it allows background images on Elementor sections and widgets to be lazy-loaded in the browser as the user scrolls down the page. This can have a huge impact on a page’s performance.

Rank Math SEO is used instead of the more well known YOAST SEO because Rank Math can do everything YOAST can do (possibly more) has faster performance and has the ability to turn off features I’m not using, which improves performance.

WP-Optimize is disabled most of the time. I only enable it to do periodic maintenance on the WordPress database, such as removing tables left behind by old plugins or cleaning up auto-drafts, post revisions, etc. This helps the site query the database more efficiently.

Base theme

The choice of base theme is important when it comes to performance and the key is to choose a theme that is as bare-bones as possible. There are several suitable themes available:

  • Hello Elementor
  • _s (Underscores)
  • Bones

Since I’m using Elementor I decided to go with the Hello Elementor theme. This is a very basic theme designed for use with Elementor Pro.

Hosting

WordPress and code performance can only be as good as the hosting it uses. In my career one thing has always been true in regards to hosting; You get what you pay for.

With that in mind, I decided to host this site with Pantheon. They have an excellent global CDN and caching architecture which means I won’t need to configure any page-caching plugins.

The rules

The page-speed scores for this site look pretty good compared to many WordPress sites I’ve worked on and I will be continuing to look for ways to improve them further.

Overall, I don’t think WordPress will win any contests on speed, but it is good enough for most sites.

If you’re looking for a blazing fast website experience for your visitors with a nice admin experience for you and your editors, I would recommend Gatsby or NextJS along with a headless CMS, but for most sites, WordPress can be made to be “fast enough” if you follow five simple rules:

1 – Pay for good, fast hosting.

This is the number one rule for a reason. If you don’t have good hosting, nothing else you do will make much difference.

2 – Optimise your “above the fold” content

Don’t use anything “above the fold” that uses JavaScript if you can avoid it. This includes things like sliders, carousels, fancy text effects and even some animations.

JavaScript changing things above the fold will increase your “First Contentful Paint” time, lowering your page-speed score.

3 – Perform regular maintenance on your database

Keep your database optimised and remove orphaned tables left behind by removed plugins. WP-Optimize has built-in tools that make this easy.

4 – Optimise the delivery of images, CSS and JavaScripts

I use Autoptimize to minify and concatenate my CSS and JavaScript files. Some of the other plugins I chose have similar functionality but I chose Autoptimize because it has a few additional features for free that the others only include in their paid versions.

For images, I chose to use Cloudinary. This provides me with an excellent CDN for my media library that I can re-use on other sites if needed as well as automatic optimisation of images and image delivery.

5 – Remove CSS and JavaScript that you’re not using

Carefully audit your key pages and disable/remove any JavaScript or CSS files that are not used on those pages. I use Asset CleanUp for this.

Asset cleanup allows you to remove CSS and JavaScript files from loading in your front-end pages. You must carefully audit the page to determine exactly which features of your various plugins you are using within that page, then block the ones that you aren’t using.

Bonus thoughts

External services

There are a couple of external services that I have used on this site to improve performance further.

criticalcss.com provides an automated method of extracting the critical path CSS for each page and when used in conjunction with Autoptimize allows you to defer the loading of the bulk of your site’s CSS which massively improves your page speed.

rapidload.io provides a service that automatically removes unused CSS from the CSS loaded on each page. This drastically reduces the amount of CSS your visitors have to download – especially when using page builders like Elementor or WP-Bakery. Autoptimize also has support for Rapid Load.

Custom development

This article has focused on the things you can do without writing code but you can go much further if you employ the services of a developer.

  • Redesign your pages to have static above the fold content and remove all JavaScript from above the fold. This is the #1 way to improve the “first contentful paint” of your site and your page speed score.
  • Hard-code your site’s header and footer instead of using a page-builder template for them.