The WordPress Performance Challenge, part 4: Remove everything!
In this fourth part I’ll take on render blocking HTTP requests. What impact does the stylesheets have on the performance of my blog? What about the scripts? Let’s remove them and find out!
Back in the first part, I saved a couple of static HTML files to the root of my server and ran tests on them.
Now I have done that again in order to locate performance bottlenecks. I’ve made the three following static versions of this blog post:
Before we dive into it, I think I’m legally obliged to tell you that there’s a TL;DR section at the bottom of the post.
With that said, here’s the test results:
Without stylesheets
PageSpeed Insights
- Mobile: 68/100
- Desktop: 80/100
WebPagetest
First view:
- Load time: 1.801s
- Start render: 1.292s
- Speed index: 1455
Repeat view:
- Load time: 1.200s
- Start render: 1.089s
- Speed index: 1100
The site gets a speed boost when the webfonts and stylesheet is removed, but it’s not the prettiest thing on the web. My goal of a speed index of 1500 is reached, but the PageSpeed score on mobile is still not good enough.
Without scripts
PageSpeed Insights
- Mobile: 69/100
- Desktop: 82/100
WebPagetest
First view:
- Load time: 2.184s
- Start render: 1.588s
- Speed index: 1682
Repeat view:
- Load time: 0.619s
- Start render: 1.494s
- Speed index: 1500
The stylesheets is back in this test but all the scripts is removed. The PageSpeed score is slightly better on both mobile and desktop but the speed index value increased a bit.
I came quite close to my goals by removing the scripts. The main problem with those is that WordPress is loading them in <head>, but more on that later.
Without stylesheets and scripts
PageSpeed Insights
- Mobile: 93/100
- Desktop: 93/100
WebPagetest
First view:
- Load time: 1.625s
- Start render: 0.783s
- Speed index: 955
Repeat view:
- Load time: 0.567s
- Start render: 0.687s
- Speed index: 700
This is the big one. No stylesheets and no scripts. The page loads very fast without any render blocking HTTP requests.
If your goal is to build a website which only purpose is to be fast, this is how you do it. But the web would definitely be a very boring platform without CSS and JavaScript. It was nice to see these great test results, but I don’t want my blog to look like this.
Let’s bring back the stylesheets and scripts, but in a different way!
Inline
One of the first things you learn about CSS is that it should be placed in its own file. But as you can tell from the test results above, that’s not a good thing from a performance perspective.
So what happens if I do the following?
Copy all the CSS…
…and paste it directly into the <head>?
The same goes for all the JavaScript.
All HTML, CSS and JavaScript in one single file. It sounded like the perfect solution, but it turned out to not make any bigger difference. At least if you look at the PageSpeed score, but the speed index is quite good.
PageSpeed Insights
- Mobile: 73/100
- Desktop: 80/100
WebPagetest
First view:
- Load time: 1.678s
- Start render: 1.490s
- Speed index: 1548
Repeat view:
- Load time: 0.983s
- Start render: 1.294s
- Speed index: 1300
Async
Let’s try a different approach. I’ll keep all the <link> and <script> tags but will load them asynchronously instead.
I used the loadCSS script for the stylesheets and simply added the async and defer attributes on the scripts.
I had high expectations on this experiment, but it once again turned out to be a failure. A big failure actually.
PageSpeed Insights
- Mobile: 53/100
- Desktop: 58/100
WebPagetest
First view:
- Load time: 3.065s
- Start render: 0.893s
- Speed index: 1828
Repeat view:
- Load time: 1.666s
- Start render: 1.586s
- Speed index: 1642
TL;DR
If you have not skipped right to this part, I’m impressed. Anyway, here’s a summary of what I’ve done today:
- Tested a static file without stylesheets.
- Tested a static file without scripts.
- Tested a static file without stylesheets and scripts.
- Tested a static file with all CSS and JavaScript embedded inline.
- Tested a static file with all CSS and JavaScript loaded asynchronously.
The file without any render blocking stylesheets and scripts was of course the fastest one to load. It’s also the one which is as far away as you can get from a real world scenario.
Embedding all assets inline was better than loading them asynchronously.
Here’s all the tests again, ordered by their speed index on first load:
- 955, without stylesheets and scripts
- 1455, without stylesheets
- 1500, without scripts
- 1548, everything embedded inline
- 1828, everything loaded async
- 1990, the real site
And once again, ordered by their PageSpeed score on mobile:
- 93, without stylesheets and scripts
- 73, everything embedded inline
- 69, without scripts
- 68, without stylesheets
- 63, the real site
- 53, everything loaded async
Finally, ordered by their PageSpeed score on desktop:
- 93, without stylesheets and scripts
- 82, without scripts
- 80, everything embedded inline
- 80, without stylesheets
- 75, the real site
- 58, everything loaded async
Now, if you excuse me, I’ll have to check my mental health before I start working on the next part.