Chapter 4

Website Performance

To better understand how to optimize your websites speed it is important to first know the inner workings of how your website is being delivered to your users.

Most of us interact with the web everyday. It has become normal for us to get all the information we need in an instant.

But how those websites are actually put together and delivered to us are a mystery. Some website load incredibly fast while others take forever to load – often making us frustrated and ultimately leading us away from that website. To better understand how to increase your websites performance it is paramount that you first understand what is going on under the hood.

The Critical Rendering Path

First of all, it would be useful to understand the steps the browser is actually going through. It starts with plain HTML, CSS, and JavaScript files goes through rendering and painting a page, and arrives in the end to become what the user sees.

These steps from your different HTML, CSS, and JS files to a painted page are commonly referred to as the Critical Rendering Path (or CRP for short).

The Critical Rendering Path consists of five different steps, which are best explained in a graphic.

flowchart web design

In summary, the critical rendering path undergoes the following steps to fully load a webpage:

1

Building Up The DOM & CSSOM

The browser starts off by constructing the DOM by parsing all the relevant HTML.
2

Index CSS and JavaScript

It then proceeds to look at the CSS and JavaScript resources and requests them, which is happening usually in the head where we commonly put our external links
3

Building the CSSOM

The browser then parses the CSS and constructs the CSSOM followed by running the JavaScript.
4

The Render Tree

Then the DOM and CSSOM are being merged together into the Render Tree.
5

Layout & Painting

We then run the Layout and Painting step to present the page to the user.

Optimizing Your Website Performance

There are a number of strategies we can leverage to make our pages faster and better to use for our users. This is especially important for users that might be in more remote locations where faster internet is not the norm or where pages are commonly accessed through mobile internet.

When we speak of optimization strategies, we roughly have three techniques at our disposal:

  1. Minimize the number of bytes you send
  2. Reduce the number of critical resources in the critical rendering path (analytics might not have to be loaded at the very start when the page is built)
  3. Shorten the critical rendering path length (meaning reducing the amount of roundtrips between your browser and the server that we need to render the page)

Minifying, Compressing, And Caching

These techniques can all be applied to our HTML, CSS, and JS. Then, through their smaller size, they will reduce the amount of data that we send back and forth between the client and the server. The fewer bytes we have to send, the faster the browser will get the data and start processing and rendering the page.

Minimize The Use Of Render Blocking Resources (CSS)

CSS itself is render blocking as we discussed above, meaning that the browser will stop rendering the page until the CSS has completely loaded and is processed. We can mitigate for large CSS files, though, by unblocking the rendering for certain styles and viewports. We do this by using print rules in our media queries, analytics, and device orientation (if you want to know how, I suggest you check out the resources below). We can furthermore reduce the number of resources needing to be loaded by inlining some our CSS in certain circumstances.

Minimise The Use Of Parser-Blocking Resources (JS)

We can also defer the execution of our JavaScript and use async attributes on our script to achieve this. This means that the rest of the page can process, and in the meantime the user sees an indication that something is happening on the page. It also means that we don’t need to wait for the JavaScript to load.

Tools to optimize your website.

If you’re keen to give this a try and start optimising, you can measure the performance of your website or others with a number of tools. The easiest are probably Google Products like PageSpeedInsights or Google Lighthouse, a handy little Google Chrome extension you can easily install through the Chrome App Store.

You can then compare your performance against a number of metrics, such as First Pixel Painted to the Screen, First Interactive, Visual Completeness of your site, and many others.

Your favourite browser’s Dev Tools are also a great place to look in terms of figuring out load times and performance bottlenecks. Keeping overall load times low will most definitely increase the overall speed at which your site is served to your end users.

Chapter 5: Website Analytics