Web optimization: preload vs. fetchpriority

This is a nearly 50-minute video about certain optimizations that used to be useful but which, in modern browsers, often get in the way of heuristic optimizations that browsers apply automatically.

How browsers REALLY load Web pages by We Love Speed / Robin Marx (YouTube)

“Preload should be applied with surgical precision”

• Specific edge cases (you really know what you’re doing)
• If the resource isn’t in the HTML

  • Fonts
  • Dynamic LCP images
  • JS imports

Basically, he said if you’re using preload, you’re almost certainly doing it wrong. For example, you can use fetchpriority=high on an img instead, and get the same performance benefit in the current crop of browsers.

These kinds of optimizations aren’t for most web sites. Most web sites have much larger performance problems than can be addressed with fetchpriority and preload optimizations. The one place where it’s still useful is for preloading fonts, which is a good idea for everyone.

While those two settings affect how the browser loads resources during the initial load o a page, setting loading=lazy on a resource takes it out of the initial load, so it puts it into a different part of the page-rendering (it’s loaded on demand, only when needed, e.g., when you scroll down to it).