Table of Contents

This post will focus on some easy wins for perceived performance of your website. It won't cover all the possible ways but only the ones that I have tried and implemented. With that said, let's get started!

The first three strategies revolve around the Link HTTP header and/or the <link> HTML element. The last one is based on the <script> HTML element.

The core idea behind this easy win is to let the browser know what resources you want it to fetch (not execute) and keep ready for when your website requests it. This lets developers, for e.g., tell the browser to preload resources that they believe are critical for their application. These could range from JS bundles to CSS to fonts, etc.

Say that we deem /app.js and /style.css critical for the first load of our website, foo.bar.cat. We can let the browser know that it should start a high-priority, non-render-blocking, early fetch of the resources in two ways.

By using the <link> tag in the html for foo.bar.cat, the following code tells the browser to preload the critical resources named above and then consume them.

<!-- Preload resources -->
<link href="/style.css" rel="preload" as="style"/>
<link href="/app.js" rel="preload" as="script"/>

<!-- Consume resources -->
<link href="/style.css" rel="stylesheet"/>
<script src="/app.js"></script>

When the browser's parser encounters the preload directives, it starts fetching the resources with high priority and in a non-render-blocking fashion. By decoupling resource fetching from resource execution, we now have the flexibility of implementing any resource loading/execution patterns to further optimize our website.

Another way to tell the browser to preload resources we want it to is by adding the Link http header in the response to the request for our website foo.bar.cat. We can achieve the same as above by adding the following response header.

link: </style.css>; as=style; rel=preload, </app.js>; as=script; rel=preload

This does have a side benefit though. In servers that support HTTP2 Server Push, adding this header can result in said server pushing the resources proactively to the browser even without the browser requesting it. This can lead to faster page load as the resource might already be available when the browser actually requests it. Many CDNs already support this.

Please do note that HTTP2 server push might not be a "silver bullet from a golden gun."

I use it for this page you are currently viewing and if you do notice any problems, please do write me on twitter.

🖖🏼