Learning material for professionals eager to explore the science behind building a successful online product

#ASKTHEINDUSTRY 15: Link preload sounds like nothing new. Why should I care?

But it is indeed new, isn’t it? It does seem pretty similar to link prefetch and regular XHR requests, but it’s kind of much more than that.

Preload is one of those standards that will have a major impact on the current state of Web Performance

Preload is a declarative fetch directive. It gives developers the incredibly useful power of telling the browser to fetch a resource that will be needed in the current navigation context.

Read the bold part again.

In other words, you can instruct browsers to start fetching resources that haven’t be discovered yet. It’s pretty much the same as we talked about here: we, as humans, are capable to hint the machine about what is going to happen next.

This is incredibly useful for two main reasons:

  • Browsers can preload the resource with the correct priority, according to the type of resource (image, script, style, ecc..)
  • We can finally overcome the issues of late-discovered resources (!!). Take web fonts for example, they typically are requested deep in the chain (at a minimum, a CSS file is requested before the needed web fonts are discovered, in most cases) and there is no way to understand whether they are actually used in the current page until the associated CSS is linked to an element in the DOM.

There’s much more that can be done with it: dynamic loading of scripts without execution and declarative async loaders, to name a few.

It’s an exciting new feature, and I strongly advise you begin checking it out. If you want to learn more, you should definitely read this.

I read each and every comment, and look forward to answer to your questions! This piece is part of the #ASKTHEINDUSTRY project, which is supposed to be about your questions :) Drop a comment if there is anything I can help you with!

Care to leave a comment? Drop down a line on the Twitters