HTTP 1.1 performance optimizations

So recently I changed my website, and I wanted to optimize everything I could, mostly for fun. I've read and watched quite a lot of stuff about it, and it was a good way to start practicing.

Measuring

The first step when optimizing anything is to measure. For this, I'll be using page speed insights from Google and web page test. I'll also focus on mobile, that's where one gets more bangs for their bucks. And a really fast mobile website will (almost?) always translate to a fast desktop website.

Step 0

First version of the website online, with absolutely no consideration about speed.

Mobile:

I got a terrible score for user experience because there wasn't even a proper viewport setup. The fix

<meta name="viewport" content="width=device-width" initial-scale="1">

And make my site responsive also. The result: Much better.

Now let's improve the speed.

Minifying & compressing

After that, I added a minification steps:

I also enabled gzip compression. This is supported by all browsers (including linx, curl, and down to IE5). There is just no reason not to use it.

Optimizing images

I used gulp-imagemin to optimize the few images I'm using. It's really easy to setup and can save off quite a few kB.

Caching

In the same step, I also added some caching mechanisms:

Cache-Control: "max-age=432000"

This number is in seconds, and means the browser can re-use the response for the next five days.

Result We're getting closer. It's already very good, and it would be enough in most cases, but I wanted to go even further.

Eliminate render-blocking css

The last step is to inline the css for above-the-fold content. This way, the browser doesn't have to wait to receive the css file before displaying something. For this task, I used a tool called critical. It takes as an input an html page and a viewport size, and output the css rules used to render the page within the viewport. Internally, it uses phantomJS, so it also works with injected scripts and stylesheets. Although it's experimental, it works very well.

In my case, I had a bit of extra work to do because I was using jade, so I didn't have a ready to use html file, and I couldn't directly inline the critical css (the tool can also directly inline critical css).

Anyway, after this last step, here's the result:

Yeah!

98 !== 100

PageSpeed insights keeps bugging me about how I do not leverage browser cache: Which contradicts what I see using the devtools of firefox or chromium. I'll keep digging a bit but I'm satisfied for the moment.

What's next?

Next, I'll have some fun optimizing TLS and nginx settings so I can establish the https connection in one RTT (that's the goal at least).