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.
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.
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.
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.
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.
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)
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.
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 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
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.
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.
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.
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.
- Hard-code your site’s header and footer instead of using a page-builder template for them.