Resource hints are <link> tags that tell the browser which files to fetch before the page asks for them. Four of them cover most cases: preload, preconnect, prefetch, and DNS prefetch. Each one targets a different step of the resource loading path, so picking the wrong tag costs you speed instead of buying it.
The browser normally discovers a resource only when it parses the tag that references it. A hint moves that discovery earlier. The browser starts the DNS lookup, the connection, or the download while it is still working on the rest of the page.
Use preload for critical resources that are essential for the initial rendering of your page. This could include fonts, critical CSS files, or above-the-fold images. Preloaded resources are fetched with high priority, ensuring they're available when needed. A link rel=preload tag raises priority, it does not reorder parsing. To speed up a tag the parser already found, put fetchpriority="high" on that element instead.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="critical.css" as="style" />Prefetching is best for resources that are likely to be needed on subsequent page visits or user interactions. For example, you might prefetch resources for a product page that a user might visit after viewing a category page. That is the difference between preload and prefetch: preload is for the current page and runs at high priority, prefetch is for a later page and runs at the lowest priority the browser has.
<link rel="prefetch" href="/product/[id]" />Preconnect establishes a connection to a specific server early on, allowing resources from that server to be downloaded faster. This is useful for resources hosted on a CDN or third-party services such as Google Fonts.
<link rel="preconnect" href="https://cdn.omiid.me" />DNS prefetch focuses on a single step in the resource loading process: Domain Name System (DNS) lookup. By prefetching a DNS record, the browser can resolve the domain name to an IP address before it's needed, saving a roundtrip to the DNS server. Preconnect does the DNS lookup too, plus the TCP handshake and the TLS negotiation. Use dns-prefetch for domains you may not hit, preconnect for the ones you will.
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />| Technique | Pros | Cons |
|---|---|---|
| Preload | Improves initial page load time for critical resources | Can slow down page load if too many resources are preloaded |
| Prefetch | Improves perceived performance for subsequent page visits | Doesn't guarantee resources will be fetched |
| Preconnect | Reduces latency for resources from specific domains | Can increase initial page load time slightly |
| DNS Prefetch | Minor improvement in initial page load time | Benefit might be negligible for some browsers |
Occasional notes on software, tools, and things I learn. No spam.
Unsubscribe anytime.