I’m making an offline first WordPress PWA, part 7

Optimizations

I have previously stated that relying to much on client side rendering is against my principles. It’s said(?) that it doesn’t matter anymore from an SEO perspective if the server side rendered HTML only looks like this:

<body>

<div id="app"></div>

</body>

But it’s worse from a performance perspective since it takes longer time before pixels has been rendered on the site. The browser should parse the HTML, build the DOM, download render blocking stylesheets and a bit later also scripts.

There’s a lot of things the browser has do to before it even executes the JavaScript code. It’ll take even longer on an average Android phone.

But the JS frameworks are here to stay and that makes it of course interesting to see how fast I can make this blog. (I’ll ignore the fact that there actually exists solutions for rendering Vue.JS and React on the server.)

Conditions

This is how the performance audit from Chrome Developer tools looks like:

67/100 points without any optimizations

Two seconds before the site has even begun to render is not a good number at all. You’d rather want the site to feel more or less fully loaded within three seconds on a stable 3G connection.

The render blocking stylesheet is the most critical problem according to the report.

Reduce render-blocking stylesheets

Autoptimize will solve everything

I’ve previously name dropped the WordPress plugin Autoptimize a few times. It’s actually one of my favorite plugins since it resolves multiple problems in a simple way.

Autoptimize will minify HTML, JavaScript and CSS for you. It’ll also add the defer attribute to <script> tags and moves them to the bottom of the HTML document.

But what makes Autoptimize really powerful is that it helps you with “above the fold” optimizations. It injects critical CSS in the <head> and lazy loads the stylesheet.

The “only thing” you need to do yourself is to generate the critical CSS, but that can be done fairly simple with the online tool Critical Path CSS Generator.

Copy and paste the generated CSS into the settings page for Autoptimize:

The result looks like this in Developer tools:

When I’ve reloaded the page a few time and made sure that the service worker has updated the cache, I’m rewarded with the following score in the performance audit:

93/100 for a client side rendered app! But I suspect this is a bit to good to be true. The blog only has two posts that each contains of a couple of sentences. There would most certainly be a whole lot of images on the blog in real life.

Images that would have a big impact on the loading speed and that would increase the waiting for JavaScript execution…

But I’ll leave that story for another time and wraps up the series here. Thanks for taking the time to read through this series and I hope you’ve learned something. I certainly have!