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

No 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

No scripts or stylesheets is loaded

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-styles

Copy all the CSS…

…and paste it directly into the <head>?

paste-it-inline

The same goes for all the JavaScript.

inline-scripts

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:

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:

  1. 955, without stylesheets and scripts
  2. 1455, without stylesheets
  3. 1500, without scripts
  4. 1548, everything embedded inline
  5. 1828, everything loaded async
  6. 1990, the real site

And once again, ordered by their PageSpeed score on mobile:

  1. 93, without stylesheets and scripts
  2. 73, everything embedded inline
  3. 69, without scripts
  4. 68, without stylesheets
  5. 63, the real site
  6. 53, everything loaded async

Finally, ordered by their PageSpeed score on desktop:

  1. 93, without stylesheets and scripts
  2. 82, without scripts
  3. 80, everything embedded inline
  4. 80, without stylesheets
  5. 75, the real site
  6. 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.