Resource hints - Part 2

This week we continue our look at resource hints, and how you can use them to improve perceived performance. But first ... I mentioned last time that I had started working on a small website for this newsletter. It's now online! Head over to https://optimised.email to check it out.

Besides performance, I've also built this site with sustainability in mind. At the bottom of every page is a small badge that shows the estimated carbon emissions generated by each page. I use that data to calculate the estimated total carbon emissions for the entire website which you can find on the Carbon page. Why does this matter? Well just think about this - if the internet were a country it would be the 6th largest greenhouse gas emitter.

I'll write more about websites and the environment in a later newsletter. For now, let's wrap up our look at resource hints.

Before we continue, let's quickly recap the four resource hints we're looking at.

  • dns-prefetch - resolves the IP address for a given domain ahead of time.
  • preconnect - resolves the IP address + opens a TCP/TLS connection for a given domain.
  • preload - instructs that particular resources be downloaded early.
  • prefetch - downloads resources that might be needed for subsequent navigations.

We covered dns-prefetch and preconnect last time, so let's get into preload and prefetch.

Preload

preload is probably the most dangerous of all the resource hints. In fact, it isn't a hint at all. It's more of a command to the browser to download a resource that will be needed on the current page. This heavy-handedness means that, if used incorrectly, preload has the potential to actually negatively impact page load. Why? Well, the more you prioritise for download with preload the later other (perhaps more important) resources will be downloaded.

What it looks like
Like all other resource hints, you can include preload tags in the HEAD of your document.

You'll notice the as="image" attribute in the code below. This tells the browser what kind of resource is being fetched, and thus helps it determine priority. You can find a list of all possible values on MDN.

<link rel="preload" href="main-image.webp" as="image" type="image/webp" />

When to use it
Browser support is pretty good across modern browsers (IE11 won't recognise preload though).

preload is best used for bringing forward the download of late discovered resources. These are things like fonts, background images, or your app CSS bundle. All these are normally found by the browser after all the HTML, CSS and/or JavaScript has been parsed, which is often > 1 second into the page load. By using preload for these resources you can have them ready for the browser to load as soon as it discovers them.

Gotchas

  • Just remember - if everything is a priority, then nothing is a priority. Overuse of preload will often lead to a degradation in site performance. It's best used judiciously.
  • Matt Hobbs has a very good write-up on an important gotcha to keep in mind when using preload for fonts.
  • The crossorigin attribute is required when preloading web fonts, even if they're hosted on your own domain. Just add crossorigin to the end of the preload link tag.

Prefetch

prefetch is handy at helping improve perceived performance for website visitors. It allows you to pre-emptively fetch and cache resources that might be required for future navigations. This is very handy when you know (or can predict) your user's journey.

Think of an online store for example. Your analytics tell you that most visitors that go to a products listing page click through to a product details page (which all use the same CSS file for styling). Using prefetch on the product listing page, you can have the browser download and cache the CSS file for the product details page. Once a user navigates there the CSS is ready to go. This can significantly speed up the rendering time for the page.

What it looks like
As with all other resource hints, you can include prefetch in the HEAD of your HTML.

<link rel="prefetch" href="/css/product.css" />

When to use it
prefetch is best used when you are almost certain of a user's intended action. Since it downloads resources with a low priority it won't block the current page. However, prefetching too many resources (especially if they aren't used) will eat up your visitors bandwidth for no real gain.

Gotchas

  • prefetch downloads & caches files. It does not execute them.
  • If you need to support IE9, note that it treats prefetch like dns-prefetch. Go figure 🤷🏾‍♂️.

Resources

Articles

How Website Performance Affects Conversion Rates
The team at Cloudflare presents data on just how much page speed impacts on user behaviour, and in turn how much revenue a website can generate.

The next issue of Optimised will be in your inbox on March 5th. In the meantime, visit the website & let me know what you think! I'd really appreciate it with a friend too.

As always if you've got any feedback or specific topics you want to be covered then just reply to this email.

Keep safe, stay well.
Fershad.