Preload website resources with link rel="preload"

Loading important resources early is important for a fast website. Preload hints are a great browser feature that lets developers highlight page resources that need to be loaded early.

What are HTML link preload tags?

Preload tags allow developers to tell the browser about a network resource that the browser needs to load. Normally, the browser discovers resources itself when processing the page HTML. However, sometimes resources are only discovered later on, and it is helpful to use a preload resource hint to inform the browser about an important resource early on.

You can see an example of preload hints in action on the Shopify homepage. This request waterfall shows that various requests are made because of preload hints on the page.

Four of these preloads are fonts, which ensures that the fonts are already downloaded when text begins to appear on the page.

How to use link rel="preload" tags

You can add a preload link tag to your HTML like this:

• Specify the resource URL in the href attribute
• Set the as value to the resource type you are loading, for example font, style, or image

<link rel="preload" as="image" href="https://example.com/hello.png" />

For web fonts you also need to set crossorigin="anonymous" so that the web font is loaded using a non-credentialed connection.

You can see Shopify doing that here:

<link
  rel="preload"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
  href="https://cdn.shopify.com/b/shopify-brochure2-assets/8e7a.woff2"
/>

You can also specify the type attribute to tell the browser the exact MIME type. Then, if the browser does not support that format it can skip the preload.

How preloading can make your website load faster

Preloading important resources can improve your load time and the Largest Contentful Paint metric that's one of Google's Core Web Vitals. Page speed also impacts SEO, giving you another reason why performance is important.

If you test your website with DebugBear you can identify specific problems that can benefit from preloading. Here the Largest Contentful Paint image is loaded indirectly through a CSS file, and so only starts loading relatively late.

To speed this up we can add a preload the Largest Contentful Paint image. Click Run experiment to run a page speed experiment and try out the optimization. This is the code we'll add to the page:

<link
  rel="preload"
  as="image"
  href="https://www.10by10.io/wp-content/uploads/2019/07/resized-image-e1562567270714.jpg"
  fetchpriority="high"
/>

Note that we also set the fetchpriority="high" attribute. Images are normally low-priority resources, and by default link tags inherit this request priority. The fetchpriority attribute lets us tell the browser that loading this image is important.

After running the test we see that the Largest Contentful Paint score has improved significantly. We also see a slight reduction in the First Contentful Paint. This can sometimes happen as the preloaded resource now loads early and competes with some render-blocking requests.

In the request waterfall the LCP image now loads much earlier, instead of only being discovered after loading the CSS.

The image request also finishes much sooner, taking 2.0 seconds before and now only taking 0.7 seconds to complete.

Preloading resources with an HTTP Link header

Instead of embedding your preloads in the HTML code you can also add Link header to your server's HTTP response.

Link: </public/photo.jpg>; rel="preload"; as="image"

Generally using HTTP headers won't make a big difference, if the preload tag is otherwise within roughly the first 10 kilobytes of your HTML response.

It can offer a slight performance advantage as the browser doesn't have to identify the resource with the HTML preload scanner and instead gets right right from the response headers.

Preload resources with 103 Early Hints

If your website has a poor Time to First Byte score then sending preloads as part 103 Early Hints can be helpful.

Unlike the HTML code or HTTP response headers, Early Hints are sent before the HTML response is ready. That means these resources can load while the server is still busy generating the page HTML.

This allows you to preload CSS and font files so that the page is (ideally) instantly ready to render once the HTML arrives.

Keep track of performance optimizations

Making your website fast is a lot easier if your team has access to great website performance tools.

DebugBear synthetic monitoring can help you identify page speed issues, test improvements, and keep track of progress and regressions over time.

Monitor Page Speed & Core Web Vitals

DebugBear monitoring includes:

• In-depth Page Speed Reports
• Automated Recommendations
• Real User Analytics Data

Start Free TrialGo To App