We’ve looked at the critical render path of the browser. Now, let’s talk about some of the basic implications of it for performance.
General principles
Every necessary file to rending the page is conisdered on the critical path. For a simple page, this might be the HTML file, the CSS file and a JavaScript file. Each network request on the critical path takes time. Minimize that time by minifying and compressing your files (with gzip, for instance). Considering eliminating files from the critical path by inlining crucial CSS on the first load. This will eliminate the need to block on waiting on the fetching of the file. JavaScript can also be inlined, but can bring other issues as it completely blocks parsing until it’s complete.
CSS
We talked about last time that CSS blocks rendering in the browser. Thus, the more CSS that the broswer has to parse, the longer the CSSOM will take to construct, and the longer the user has to wait to see any content. One way to limit the amount of CSS that’s parsed is by preventing the browser from requesting it by using media queries:
<link href="main.css" rel="stylesheet" />
<link href="mobile.css" rel="stylesheet" media="(max-width:720px)" />
<link href="print.css" rel="stylesheet" media="print" />
Here, we can see that for desktop computers with a wide enough viewport will only download the first stylesheet, saving time on downloading and parsing the other CSS. You can see what media queries are available to you over on MDN.
Be sure that you load the CSS that you need in the head, so that it can get started as soon as possible.
JavaScript
For your JavaScript, if you don’t need it to read things from the DOM or to change the layout, load it asynchronously. Careful, dispite what every third-party vendor might tell you, async isn’t free: the browser still has to download and parse even async JavaScript, which will slow time to interactive on devices that don’t have a lot of processing power. However, if you load it async, the browser can get the render treee done faster and get your content in front of the user. Scripts can be marked as async like this:
<script src="analytics.js" async></script>
Analytics are a perfect use case for async. You can also defer a script until the page is completly finished loading with defer:
<script src="late-load.js" defer></script>
Remember, CSSOM construction blocks JavaScript execution and JS blocks the render tree. That’s why you’ll want to load your JavaScript at the bottom of the page and CSS at the top: you’ll want the CSSOM done so that your JS can execute.
Layout
It takes time for the browser to establish the correct layout. Avoid wasting time in multiple layout steps by batching updates.
Sources:
Designing for Performance by Lara Hogan
High Performance Browser Networking by Ilya Grigorik
Udacity Course on Web Performance with Ilya Grigorik