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.
preconnect last time, so let's get into
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 for these resources you can have them ready for the browser to load as soon as it discovers them.
- Just remember - if everything is a priority, then nothing is a priority. Overuse of
preloadwill 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
crossoriginattribute is required when preloading web fonts, even if they're hosted on your own domain. Just add
crossoriginto the end of the preload link tag.
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.
prefetchdownloads & caches files. It does not execute them.
- If you need to support IE9, note that it treats
dns-prefetch. Go figure 🤷🏾♂️.
- Preloading content with rel="preload" - A thorough guide to
preloadfrom the MDN team.
- The importance of
@font-facesource order when used with preload - Matt Hobbs shows us how a small change in the ordering of your font sources in the
@font-facerule can have a big impact on data and web performance.
- Prefetching Heuristics - Minko Gechev delivers this really nice little rundown of different prefetching patterns.
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.