Resource hints (preload, prefetch, preconnect)
Tags that tell the browser to fetch a file, or warm up a connection, before it would have discovered the need on its own.
See it
What it is
By default a browser only learns a file exists when it parses the line that references it, which can be deep inside a stylesheet or three scripts down a chain. Resource hints are '<link rel>' tags that let you jump the queue. preconnect opens the DNS, TCP, and TLS handshake to another origin early. dns-prefetch is the cheap version that only resolves the name. preload starts an early fetch of one specific file for the current navigation. It is a discovery hint, not a priority dial: what priority the request gets follows the resource type you declare in 'as', and you nudge it yourself with 'fetchpriority' if the default is wrong. prefetch grabs something at idle priority for the page the user will probably visit next. modulepreload does preload plus parse for ES modules.
Reach for preconnect when a critical asset lives on a third-party origin (a font host, an image CDN). Reach for preload when a critical asset is discovered late, classically a font referenced inside CSS or a hero image set by a background-image rule. Reach for prefetch on the obvious next step: the product page from the listing, step two of a checkout.
The gotcha: hints are a scheduling reshuffle, not free bandwidth. Preload five things and you have preloaded nothing, because they now compete with each other and with the HTML. Preload without the right 'as' attribute (and 'crossorigin' for fonts) and the browser downloads the file twice. Keep preconnects to a handful of origins; each idle handshake costs the connection real work.
Ask AI for it
Add resource hints to this page's <head>, sparingly. Preconnect to the origins that serve render-critical assets (font host, image CDN) with <link rel=preconnect crossorigin>, capped at three origins. Preload only the LCP asset and the single above-the-fold font file, using the correct 'as' value and adding crossorigin for fonts. Add <link rel=prefetch> for the single most likely next navigation. Do not preload anything discoverable in the initial HTML, and remove any preload that fires a browser 'preloaded but not used' warning.