# Difference Between Resource Hints: Prefetch, Preconnect, and Preload Explained > Understand resource hints prefetch preconnect and preload. Learn how these HTML directives speed up your website by telling browsers to prepare for network requests. - Repository: [David Dias/Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist) - Tags: deep-dive - Published: 2026-03-02 --- **Resource hints are declarative HTML directives that instruct browsers to prepare for upcoming network requests, with each type performing distinct levels of preparatory work—from simple DNS resolution to full resource fetching and execution.** The **Front-End Checklist** repository by thedaviddias provides comprehensive documentation on these performance optimizations. Understanding the difference between resource hints like prefetch, preconnect, and preload enables developers to eliminate latency bottlenecks and optimize critical rendering paths in modern web applications. ## What Are Resource Hints? Resource hints allow browsers to perform network-related work before it is strictly required. By declaring these hints in your HTML ``, you enable the browser to resolve domain names, establish connections, or even fetch resources during idle time, significantly improving perceived performance and user experience. ## The Four Types of Resource Hints According to the [`README.md`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md) in the Front-End Checklist, four primary resource hints address different stages of the network lifecycle. ### DNS-Prefetch **DNS-prefetch** performs the lowest-cost preparation by resolving only the domain name for a future request. This hint is ideal for third-party domains you know you will contact later but not immediately. Use this for analytics providers, CDNs, or APIs that will be needed after the initial page load completes. ### Preconnect **Preconnect** advances beyond DNS resolution to include the TCP handshake and TLS negotiation. As documented in the checklist at [lines 666 and 668](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md#L666), this hint establishes the full connection to a server before any requests are sent. Implement `preconnect` for critical third-party origins such as font services (e.g., Google Fonts) or essential API endpoints that the page requires within the first few seconds. ### Prefetch **Prefetch** fetches complete resources that will be needed for future navigation but are not required for the current view. The checklist explains at [lines 71-76](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md#L71) that the browser stores these resources in the HTTP cache with low priority, potentially throttling the download to avoid competing with current page assets. Apply `prefetch` to lazy-loaded images, scripts for the next page in a single-page application (SPA), or any asset needed after user interaction. ### Preload **Preload** fetches resources essential for the current page with the highest priority. As specified in the checklist at [lines 78-83](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md#L78), the browser immediately downloads these assets and makes them available to the rendering pipeline, executing scripts or applying styles as soon as possible. Use `preload` for critical above-the-fold resources like hero images, main application scripts placed at the end of ``, or essential CSS that blocks rendering. ## Key Architectural Differences Four primary factors distinguish these resource hints: 1. **Priority Level** – `preload` receives the highest priority (equivalent to normal render-blocking resources), `preconnect` and `dns-prefetch` are lightweight and non-blocking, while `prefetch` operates at low priority and may be delayed by browser heuristics. 2. **Scope of Network Work** – `dns-prefetch` resolves only the IP address; `preconnect` adds TCP and TLS handshaking; `prefetch` downloads the full file to cache; `preload` downloads, parses, and injects the resource into the current document's processing flow. 3. **Timing Requirements** – Place `preconnect` directives before any request to the target origin to maximize benefit. Position `prefetch` and `preload` tags early in the `` so the browser can queue them immediately during HTML parsing. 4. **Cache Impact** – `prefetch` may populate the cache with resources users never request, potentially wasting bandwidth. `preload` guarantees usage for the current page, avoiding cache pollution. ## Implementation Examples from Front-End Checklist The [`README.md`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md) file provides specific syntax patterns for each hint. Always include the `as` attribute when using `preload` or `prefetch` to ensure correct content-type prioritization and security checks. ### DNS Resolution Only ```html ``` ### Full Connection Setup ```html ``` ### Future Resource Caching ```html ``` ### Critical Current Page Resources ```html ``` ## Summary - **DNS-prefetch** resolves domain names early for minimal latency reduction on future third-party requests. - **Preconnect** performs DNS, TCP, and TLS handshaking in advance for critical origins you will contact immediately. - **Prefetch** downloads complete resources with low priority for subsequent navigation or deferred functionality. - **Preload** fetches current-page critical resources with high priority and makes them immediately available to the rendering engine. - Always specify the `as` attribute to enable proper prioritization and Content Security Policy validation. ## Frequently Asked Questions ### When should I use preconnect instead of dns-prefetch? Use **preconnect** when you know you will request resources from an origin within seconds of page load, as it performs the full TCP and TLS handshake in advance. Use **dns-prefetch** when you will contact the domain later in the session or for non-critical third-party requests where establishing the full connection early wastes resources. ### Can I use preload and prefetch for the same resource? Avoid using both hints for identical resources. **Preload** is designed for immediate consumption on the current page, while **prefetch** assumes future usage. Using both creates redundant network requests and wastes bandwidth. Choose based on whether the resource blocks the current critical rendering path. ### Does prefetch guarantee the resource will be cached? No, **prefetch** provides no guarantee. Browsers treat prefetched resources as low-priority suggestions and may cancel the request based on network conditions, user preferences, or data-saver modes. **Preload**, however, is treated as mandatory for the current document and will typically complete unless network failure occurs. ### What happens if I forget the as attribute in a preload tag? Omitting the `as` attribute causes the browser to download the resource with incorrect priority levels and prevents it from matching existing requests in the preload cache. For scripts and stylesheets specifically, the browser may fetch the resource twice—once for the preload and again when the parser encounters the actual tag—eliminating the performance benefit entirely.