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. <media href="https://www.youtube.com/watch?v=p0lFyPuH8Zs" src="https://www.youtube.com/v/p0lFyPuH8Zs" source="YouTube" author="We Love Speed / Robin Marx" caption="How browsers REALLY load Web pages" width="560px"> <bq>Preload should be applied with <i>surgical precision</i><ul>Specific edge cases (you <b>really</b> know what you're doing) If the resource <b>isn't in the HTML</b><ul>Fonts Dynamic LCP images JS imports</ul></ul></bq> Basically, he said if you're using <c>preload</c>, you're almost certainly doing it wrong. For example, you can use <c>fetchpriority=high</c> on an <c>img</c> instead, and get the same performance benefit in the current crop of browsers. <img attachment="optimize_loading_speed.webp" align="right">These kinds of optimizations aren't for most web sites. Most web sites have much larger performance problems than can be addressed with <c>fetchpriority</c> and <c>preload</c> 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 <c>loading=lazy</c> 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).