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.…