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
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.
In summary, the critical rendering path undergoes the following steps to fully load a webpage:
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:
- Minimize the number of bytes you send
- 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)
- 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)
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.