Code: Making WordPress great again, or at least FAST for once.
WordPress is one of the best CMS & blogging platforms available right now. Easy to install, simple to use, extensible and open-source. I use it for my personal projects and often suggest it to my clients, and I also implemented it twice as an enterprise-level CMS solution (after a few modifications). Let’s be honest; it might be the best tool on the market. At the same time, it comes with some problems, and sometimes things go wrong fairly quickly.
Since it’s an open-source project, this openness is the source of concerns as plugins are often poorly written and create many issues across the site. But plugins are easy, and people love them for every bit of functionality. WP becomes a slow and useless monster, and that’s where it gets its bad reputation. You often hear (especially from the purist) that they hate WordPress slow, and it generally sucks. My answer to this is always the same — they clearly have no idea what it is built for, how to use it and probably haven’t seen it in the last few years.
We load WordPress pages within 1 second!
I recently built a new marketing site for www.esggen.com. We put together the design, content, and pages within 5 working days, just one week. Fantastic, as I planned two weeks for this task. I was obviously unhappy with the PERFORMANCE, which is always the case when you start with a blank canvas WP installation and add a bunch of things on top. I spent some time fixing these issues and used this opportunity to record the journey and share it with you since everything I did doesn’t require technical skills. Millions of WordPress users out there might benefit from some guidance to this most common challenge.
A few pieces of information about our site:
- We started with the latest WP installation from scratch.
- We used Divi Templates to build the whole site.
- We used practically zero external plugins to show content to a user.
- We use an external script to provide chat functionality on the site.
- It took me about 1 day to optimise and test the site (it take you less).
Don’t take this guide as an ultimate solution to all your performance problems, as many of them might be simply caused by poorly written plugins and templates that we don’t use. Instead, this guide should be a good start to show you different process steps and what is important in web performance. Of course, this knowledge applies to any web app development, but in the case of WordPress, we can solve it all by using plugins!
Tools used and process:
- Google PageSpeed Insights —it’s always good to check the results as Google uses them for SEO purposes. My only concern is that it’s not the best tool. Some of the critical optimisations that would be good for a user bring no change (or negatively impact) to the final score.
- WebPageTest.org — This allows properly analysing network traffic and comparing results between different tests. On top of that, we can create videos and really dig into details. That’s where the real optimisation happen.
- All the WebPageTests were performed on
- Chrome, Cable 5m connection from London
- Chrome Samsung emulation, 4G connection from London
- 9 tests per each test set, including returning user views. - All tests were performed on the homepage as there is quite a lot of content, images, a few blogposts and external chat loaded. This is the first page most of the users will reach, so the experience has to be good.
- All plugins are free, and I have no affiliation with any of them.
Step 1. What is our bottom line?
We need to understand where we are first. I can talk forever about all the metrics and try to explain them, but instead, I will try to focus on the essentials and help you to understand the changes, processes and fixes.
What stands out from the initial data?
Below is a waterfall of all network connections done during the loading using WebPageTest. There are a few things I want to fix:
- Google’s scores are too low. I was hoping for mobile to be around 80, desktop in mid-90s.
- The browser has to make too many HTTP requests.
- The initial HTML pages take over 1 second to load.
- Images could be optimised and in a different format (like webp).
- All images are loaded, even outside the visible area (no lazy loading).
- No JS or CSS minification or optimisation.
- 3rd party script loads files as soon as the document is loaded. It’s not necessary.
- The Fully Loaded event (blue line) is after 3 seconds. Way too late!
Now we know what is wrong or what could be better. Let’s address these issues in 5 steps by adding some plugins. Before moving to another stage, I want to modify the site gradually and test after to understand the impact and ensure everything works as expected. It is all about marginal improvements to get the “wow factor” at the end.
2. Optimisation of CSS and JavaScript files.
Impact of the changes:
- Google’s mobile score up by around 10 points and desktop 4–5.
- The number of total requests went down from 51 to 30.
- There is no change on the initial timers, but Fully Loaded, Time to Interaction and Speed Index improved.
CSS and JS optimisation is something we should always do first, as it might have side effects, especially when you are using many random plugins. Sometimes they break. There are extra options available in this plugin that will allow you to exclude the troublesome files from this process, but that’s a bit more effort, and I’m not going to explain how. It wasn’t a problem in my case, so I’m safe.
Fix:
- Install a plugin Autoptimize by Frank Goossens
- Turn on Optimize JavaScript Code
- Turn on Optimize CSS Code
- Turn on Optimize HTML Code
- Save Changes and Clear Cache.
I’ve tried many optimisation plugins, and this one provides the most functionality working well out of the box. It’s an excellent upgrade to your WordPress with a minimal footprint. There are many configuration options you can explore, but be careful. A side note — I know this plugin has lazy-loading for images, but it doesn’t work for Divi Templates; hence I won’t be using it.
3. Optimise all images
Impact of the changes:
- Google’s results barely change. That’s what I don’t like, as real improvements sometimes are not reflected in the score.
- The total weight of images went down from 420KB to 310KB. A saving of around 25%.
- Minor load timing improvements.
In my case, image optimisation did not bring much of a difference. Loads times stayed similar, and Google score hasn’t really changed. However, there was around a 10% performance improvement for mobile tests with slower connections. That’s where these kinds of enhancements will really count. We need to consider all types of users as many use the web on the go, which means not always a 5G connection with ultra-fast internet. It costs us literally nothing to decrease the size of our images, and it would be stupid to just not do it.
Fix:
- Install a plugin WebP Converter for Media by Mateusz Gbiorczyk
- Find an option to Regenerate All images.
- Wait for all images to re-render in the new format.
- The plugin will automatically optimise all future images added.
4. Lazy-load all images
Impact of the changes:
- Further improvement in Google Score for desktop and smartphone.
- Saved 50% on image download size (around 150KB)
- Saved another 7 HTTP requests.
- 10–15% saving on the Fully Loaded timer.
We should not ask a browser to download all images if they are unnecessary. Lazy loading is the way to tell the browser to download only images within the view. It’s a smart way to save a lot of kilobytes of data and really speed up your site, especially when it’s image-heavy. These changes usually have a limited impact on the initial timers but save 10–15% on full page load. Also, resources like CSS and JS can be loaded sooner and processed faster.
In my case, I used another plugin to do just lazy loading. You might be OK by just enabling Lazy Loading in the Autoptimize plugin.
Fix:
- Install a plugin Lazy Load by WP Rocket
- Enable lazy loading for images (you can do other things too).
This is how the browser’s network connections look like. You can compare it to the image in STEP 1. A massive difference. We now only load what’s needed. Plus, all CSS, JS and images are optimised.
5. Static pre-rendered pages
Impact of the changes:
- Google doesn’t care about significant improvements like that! :/
- Page is basically ready to use within 0.9 seconds, rather than 1.5s
- Speed index dropped massively too.
- Fully Loaded time cut by another 25%.
- Within 0.25s, the page is basically loaded. It’s instant.
- Slightly higher gains on slower internet connections, like mobile networks.
Our page should be swift now, and it’s definitely much better than it was, but let’s address this “1 second” required for the HTML document to load. It’s created mainly by the backed waiting time. The download bit is not visible on the graph (shared a bit earlier).
The plugin will cache the page’s output on the first visit (by any user) and save it. The following person who visits the page will get an instant result of the version from the cache instead of calling databases and doing all the work again. This change creates a real difference for the user’s experience, yet Google doesn’t care about it. That’s why it is essential to use more than one tool to check how good your website is.
Fix:
- Install a plugin WP SuperCache by Automattic
- Enable page caching.
Step 6. Delay the 3rd party script.
Impact of the changes:
- Google’s mobile score is up to around 75, even 80.
- Google’s desktop score went over 95!
- No real impact on the user or other metrics.
This step doesn’t really impact the user’s experience. What is weird, that’s what Google was complaining about it, and after I applied my tweak, we finally got a better score. I like to delay non-critical content and scripts to ensure that a browser can focus on high-priority downloads and execution.
The script is just a simple implementation that will load external JavaScript files. I wrapped it with setTimeout() method to put it in a different execution queue in a browser and delay it by 3 seconds.
Fix
- There is no plugin for that, sorry :)
- If you are using 3rd party integration like Instagram, newsletters, etc., it just can delay them. Search on the internet, I’m sure you will find some good examples of how to do that.
The final results.
This summarises all the changes we applied throughout these few simple steps. I highlighted in green which performance timers are essential and you should care about the most. It’s not surprising that these noticed the most significant impact after our changes.
RED = BEFORE, BLUE = AFTER
Google scores also increased.
There is also a significant improvement in Google PageSpeed Insights. Getting the last few points on mobile is a ridiculous exercise, and I’m sure I could add a few extra points, but it is not worth the investment at this stage. Overall, I’m happy as the goal was to reach 80/95, and the site is pretty much there.
How does it look like in real-life now?
A slow-motion side by side video of the website loading process to compare before and after. Please note that we’ve got transition animations added to the site. Technically, all should be visible at around 1.5 seconds, but there is a delay to slide (animate) in the content. I’m now thinking to remove them all… ;)
The most important to me is that when any user goes to the site now, it is fast, responsive, and friendly. It works and doesn’t feel sluggish, despite running on WordPress, which apparently is famous for not performing too well. Check it yourself and go to www.esggen.com :)
I hope this short guide is helpful to you, and with these simple steps, you can make your WordPress a bit better.
