Priority hints tell the browser what to load first

You can use “Priority hints” to help some browsers know what is important for your user to see first, or is less important.

For eaxmple, you could add fetchpriority="high" to your hero image, or something else large on your main page, to help with your Largest Contentful Paint or LCP metric, which is relevant for Core Web Vitals. This gives the user the impression that your page is loading fast.

Browsers have heuristics to decide what to load first, but they don’t apply early enough in the rendering process to help with LCP.

Further reading

• Priority Hints Deep-dive from web.dev
• Etsy did a detailed Priority Hints case-study
• The specification for priority hints
• CanIUse priority hints everywhere yet?

Sources

• This article by Addy Osmani, found via the CSS Weekly newsletter