The WordPress Performance Challenge, part 2: Applying best practices
This is the second part of this series of blog posts where I’ll try to make this site as fast as possible. The goal is to mainly use plugins and avoid modifications to the code as much as I can.
In this part, I’ll apply some best practices and see how much faster that will make the site.
I used Pagespeed Insights and WebPagetest for testing the performance of the site in the first post. These where the results:
PageSpeed Insights
- Mobile: 47/100
- Desktop: 57/100
WebPagetest
First view:
- Load time: 3.702s
- Start render: 2.386s
- Speed index: 2438
Repeat view:
- Load time: 2.202s
- Start render: 1.999s
- Speed index: 2014
My goals is to get at least 80 in the PageSpeed test and to come as close to a speed index of 1000 as possible. A basic HTML file got a speed index of 500, so I’ll try to reach 1500 at least.
Let’s get started!
Responsive images
I honestly didn’t thought this would make any bigger difference. Responsive images is great for decreasing the page weight by offering images that isn’t unnecessary large and heavy. This will make the site faster to load on mobile devices, but it won’t render any faster. Images isn’t render blocking as stylesheets and scripts is.
I activated Responsify WP and ran the tests and got the following results:
PageSpeed Insights
- Mobile: 60/100 (+13)
- Desktop: 74/100 (+17)
WebPagetest
First view:
- Load time: 3.031s
- Start render: 2.293s
- Speed index: 2360 (-78)
Repeat view:
- Load time: 2.460s
- Start render: 2.104s
- Speed index: 2128 (+114! Why?)
One thing I’ve noticed is that the test results isn’t exactly the same each time i run them, even if I haven’t done any modifications to the page. I hope that’s why some of the values from WebPagetest actually got worse this time.
The PageSpeed score on the other hand was much better. It increased from 47 to 60 on mobile and from 57 to 74 on desktop!
Concatenate and minify
Time to step it up and do something about the 23 HTTP requests. BWP Minify is a great plugin for concatenation and minification of scripts and stylesheets.
It removed five HTTP requests and helped me improve the test results from WebPagetest slightly. But the PageSpeed score remained exactly the same on mobile and went from 74 to 73 on desktop for some reason.
PageSpeed Insights
- Mobile: 60/100 (+/- 0)
- Desktop: 73/100 (-1, w00t?!)
WebPagetest
First view:
- Load time: 2.750s
- Start render: 2.288s
- Speed index: 2390 (+30, why isn’t it getting any better?)
Repeat view:
- Load time: 2.322s
- Start render: 1.996s
- Speed index: 2021 (-107, that’s more how I like it!)
Caching
The third and final plugin that I’ll install before we call it a day is WP Super Cache. It’s a simple caching plugin that does the job well.
W3 Total Cache is another powerful caching plugin that I like, but it doesn’t always work so good on certain servers. WP Super Cache always works. Here’s the test results:
PageSpeed Insights
- Mobile: 62/100 (+2)
- Desktop: 74/100 (+1)
WebPagetest
First view:
- Load time: 2.422s
- Start render: 2.181s
- Speed index: 2207 (-183)
Repeat view:
- Load time: 1.895s
- Start render: 1.494s
- Speed index: 1528 (-493, yeah!)
The PageSpeed score remained once again more or less the same. WebPagetest gave me slightly better values on the first load and much better on the second where the speed index actually is 1500!
TL;DR
I’ve done three things today: added responsive images, concatenation and minification and caching. These are the plugin that I’ve used:
The PageSpeed Insights score improved from 47/100 to 62/100 on mobile and 57/100 to 74/100 on desktop. The speed index on the first page view went from 2438 to 2207.
There’s still a lot of room for further improvements and I’ll become more aggressive in the next part of the series. Stay tuned!