Optimize webpage load with special tags
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.
Resource hints give the browser work to start early
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.
Preload fetches render-critical files first
Use preload for the resources your page needs for its first render. 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" />Prefetch fetches what the next page will need
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 opens the connection before you need it
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 resolves the domain ahead of time
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" />Preload vs prefetch vs preconnect vs dns-prefetch
| 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 |
Noteworthy
- Prioritize Critically: Focus on preloading critical resources that directly impact your initial page load. Don't overload the browser with too many preloaded resources.
- Consider User Behavior: Use prefetch strategically to anticipate user actions and prepare resources for subsequent pages.
- Test and Monitor: Always test the impact of these techniques on your website's performance. Use browser developer tools (I mostly use PageSpeed Insights) to monitor resource loading times and identify bottlenecks.
Newsletter
Occasional notes on software, tools, and things I learn. No spam.
Unsubscribe anytime.