Related: Critical CSS: What Render-Blocking Really Means and How Inlining Fixes It covers the related optimization of eliminating render-blocking CSS, which pairs well with resource hint strategy. The three resource hints ( preload , prefetch , preconnect ) look similar enough that developers regularly use them interchangeably. They are not interchangeable. Each one tells the browser to do a different thing with a different priority and a different timing. Using preload when you meant prefetch puts a resource in the high-priority queue and competes with CSS and critical JavaScript, potentially making the current page slower while trying to speed up a future page. Getting this wrong is worse than not using resource hints at all. What this covers: What each hint actually tells the browser, when each one fires in the page lifecycle, the browser's priority system and how hints fit into it, and concrete examples of when to use each.…