At the time of this writing my website scored 2 in Google Lighthouse, so this needed to be addressed as soon as possible. 🥴
If you’re not interested in reading the full story, here a list of interesting plugins in regards to speed … and a really nice structured guide to follow is the ultimate checklist of Robert-Jan Budding.
Speedy hosting and a fast theme
To learn about the stuff to be done to speed up a WordPress site, I started building this site again from scratch. At first, I installed the Astra theme and Breeze because the Breeze cache plugin is default installed by Cloudways, where I host my site.
This gave a score of 100. 👍👍👍 100 is the best possible ideal score (really hard to get). Usually, any score above a 90 gets you in the top ~5% of performant websites.
The next step was importing the data from my old WordPress install. (I could also have cloned or staged my site and deactivated all my plugins but doing it the first way, leaves all the bloat behind.) This gave 99. No problem of course but curious why I lost a point here. My first presented opportunity was ‘Remove unused CSS’ …
CSS performance in WordPress
There is much you can do to speed up the CSS loading of your page and one of them is not to load css that’s not needed in the first place. PurifyCSS Online is a great tool to check your unused css and the article of the creator about removing unused css in WordPress tells you how to really remove it all. I would never go that far though. It’s a real effort to maintain your site from then on so what else can be done to make unused less of a bottleneck?
Setup a CDN
This speeds up the delivery of static resources for your application and so, I set it up with the Cloudways platform in a minute.
Well, the only css file with unused CSS reported in Lighthouse is the file from the Astra theme which is already minified. So, no need to minify anything at this point.
Other things I could do are listed in this great article of WP Speed Matters about ‘The Tale of Removing Unused CSS from WordPress’ but I will get back to it if needed.
Then I would go over all my current installed plugins one by one to check if they were still needed and install them if so …
- Astra Widgets = ok
- Autoptimize = ok
- Breeze = ok
- Compress JPEG & PNG images = ok
- Documentor = ok (minor issue to fix)
- Inline Google Spreadsheet Viewer = NOT OK for performance without fixing
- Link Whisper = ?
- ManageWP – Worker = ok
- Rank Math SEO = ok
- SVG Support = ok
- Ultimate Addons for Gutenberg = ok
- WP Sitemap Page = ok
Breeze and SVG Support are already installed and thus ok, now first the ones I think they won’t cause that much harm. WP Sitemap Page and ManageWP – Worker are good to go. 👍
I use Astra Widgets to add Social Profiles to my footer and that is ok.
Then I activated the Ultimate Addons for Gutenberg from Astra and got a new opportunity for the first time, ‘Eliminate render-blocking resources’. This means I should deliver critical JS/CSS inline and defer all non-critical JS/styles. I installed and configured Autoptimize but this gives no real benefits at this time so I will leave it deactivated for now.
While testing the Advanced Columns block from Ultimate Addons for Gutenberg I checked my first page with images and I got an opportunity ‘Properly size images’ …
Image performance in WordPress
My images are compressed by the Compress JPEG & PNG images plugin (which is by itself also ok, BTW), but apparently, the large size versions are presented while that is not needed. The WP image Gutenberg block lets you choose between thumbnail (150×150), medium (300x), large (1024x), and full size (1838x). On my page, the images are 360 wide so medium size is too small and large is too large. (If you want to know all about image sizes in WordPress you should read the ‘Default WordPress Image Sizes and How to add Custom Sizes’ post from wpmudev.) But there is another default size called medium-large (768x), no? While still too large in my case, those versions would be a bit better than large. Here a thread that tells you how to add this size as an option in the image Gutenberg block. If images are important to your site, you should really consider creating custom image sizes to boost your performance.
Another opportunity says ‘Serve images in next-gen formats’. Ok, installed the WebP Express plugin, followed instructions to get it working and this opportunity is tackled, jeeej. 😃
Defer offscreen images
The Autoptimize plugin has an option ‘Image lazy-loading will delay the loading of non-visible images to allow the browser to optimally load all resources for the “above the fold”-page first.’ so I don’t need a new plugin to solve this issue. Awesome! 👍
Ensure text remains visible during webfont load
The next plugin to enable is Documentor. Mmm, numbers stay relatively good, a new diagnostic though … ‘Ensure text remains visible during webfont load’. Documentor loads the icomoon.ttf file and this can be enhanced. Fonts are often large files that take a while to load. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT). I found this blog post from the creator of Autoptimze so I added some code to my functions.php file but it didn’t work. 🤔 Do I need IcoMoon? The little icons shown in my guide are images, not icons from the IcoMoon collection. Maybe I can just remove the file from the Documentor skin? Nope. I will definitely keep on using Documentor but I will disable it for now so I can go on with my other plugins and find a fix for this later. Maybe I could ask the creator to add this little swap code snippet.
Reduce the impact of third-party code
Ok, so now I’m moving to plugins that might have something to do with my initial score of 2. First, I’ll install the Inline Google Spreadsheet Viewer plugin. I started using it because it was not that easy to work with tables in WordPress. OMG 😱 55, even on a page where I don’t use it! So, this is an example of why you should always check performance after installing a new plugin. Lighthouse says ‘Reduce the impact of third-party code > Third-party code blocked the main thread for 7,430 ms’ and this third-party code is delivered by Cloudflare CDN. Ok, I could definitely dive into this but there is another question to ask. Do I still need it? It’s an awesome plugin but it has a little too much to offer in my case and since the rise of the Gutenberg editor there might be some really interesting alternatives now. Mmm, not that impressive though at this time and it would take me some work to switch so I’ll dive in solutions first. As I mentioned the plugin offers too much for me but the plugin author created hooks to filter out the resources I don’t need. Doing all this in code … mmm, there must be a better way. What about plugins that filter assets? I decided to go with the Webcraftic Assets manager plugin.
I use the Inline Google Spreadsheet Viewer plugin in 4 posts. I would like to disable the assets by default and enable the ones needed on these 4 pages. This can be done when I would buy the pro version of the assets plugin. This makes me wonder … I have a page on my site that combines these posts and some others with the Documentor plugin to present them as a guide. Why in the first place? I could just add the content to one page. With a ‘Table of contents’ block, it would look as nice. I probably went this way because this was all harder to achieve with the old editor and just for trying out Documentor, I guess. It would also prevent me from having duplicate content in the meanwhile which is bad for SEO.
Ok, this is a tough one … I think Webcraftic’s plugin is really counter-intuitive. I will try the Asset CleanUp plugin and nice … problem solved in no-time! 👌
Ok, so now Rank Math SEO! Just installing is ok. Importing Google Search Console data is ok. Breadcrumbs ok! Now, Link Whisper? Good to go as expected, nothing happens in real-time in the front-end.
Up till now, I checked the performance for my desktop version of the site. Now it’s time for the mobile version which is even more important but since I want to use Accelerated Mobile Pages it’s a whole different aspect. And it’s not hard at all when using the Astra theme … just install the official AMP plugin and thick a box. From then on AMP is served on mobile and this is really nice for SEO! No need to analyze AMP any further … if a page is served as an AMP version it’s just speedy! 🚀
To wrap up
This was my journey for my site but as I mentioned … a really nice structured guide to read is the ultimate checklist of Robert-Jan Budding.