Guide : Resource Hints

TL;DR — Resource hints tell le navigateur to commencer some network fonctionner early — avant it voudrait normally figure out it nécessite to. Là are four: dns-prefetch (regarder up a domain’s adresse early), preconnect (ouvrir a connection early), preload (récupérer something the current page nécessite now, comme votre big hero image), and prefetch (quietly grab something the suivant page va probably besoin). Utilisé sparingly ils speed up votre page. Utilisé everywhere ils slow it bas.

Ce que resource hints are

Quand a navigateur loads votre page, it discovers ce que it nécessite as it goes. It reads the HTML, trouve a CSS fichier, downloads it, parses it, and seulement alors realizes there’s a font or a background image it has to récupérer. Que “only then” is wasted temps.

Resource hints let vous skip the waiting. They’re little instructions vous put in lune page (or in le serveur’s réponse) que dire: commencer ce now, don’t wait to découvrir it. Four of les do la plupart of the fonctionner:

• dns-prefetch — “look up this domain’s address ahead of time.” Cheapest, smallest head commencer.
• preconnect — “actually open the connection to this domain ahead of time” (adresse lookup plus the secure handshake). Bigger head commencer, plus fonctionner pour le navigateur, so utiliser it seulement pour the connections que really matter.
• preload — “récupérer ce spécifique fichier now parce que the current page definitely nécessite it.” Meilleur pour choses comme votre principal image or a font.
• prefetch — “quietly grab ce in the background parce que the utilisateur va probably go to que page suivant.”

The golden rule: don’t overdo it

The la plupart courant mistake is treating hints comme a magic “make it faster” button and ajout a bunch of les. It backfires. Si vous tell le navigateur everything is urgent, alors nothing is — ils tout fight pour the même bandwidth and votre page peut fin up slower que avant. A short, targeted liste of hints beats a long un every temps.

Do ces aider my Google rankings?

Pas directement, and it’s worth being clair à propos de ce. Google’s robot d’exploration doesn’t benefit from votre resource hints — it récupère pages differently que a réel navigateur fait. Ce que resource hints do is faire lune page faster pour réel visitors, and que feeds into Core Web Vitals, qui Google’s ranking systems utiliser as un signal among several — Google is explicit que there’s aucun unique page-experience signal, and bon Core Web Vitals scores don’t guarantee a top ranking. So the chain is: hints → faster experience → meilleur Core Web Vitals → un input among nombreux into ranking. Pas “Google reads ce tag and ranks vous plus élevé.”

Vouloir the syntax, the as and crossorigin gotchas, the comparison table, and the complet Core Web Vitals mapping? Switch to the Avancé tab.

TL;DR — The principal resource hints formulaire a spectrum of navigateur cost: dns-prefetch (DNS lookup seulement) → preconnect (DNS + TCP + TLS) → preload (a mandatory récupérer of a spécifique, late-discovered resource) → prefetch (lowest-priority speculative récupérer pour a future navigation). modulepreload is preload’s sibling pour JS modules. preload is the seulement un le navigateur is obligated to récupérer — that’s différent from saying it’s automatically élevé priority; par défaut priority encore dépend on the resource type, and fetchpriority is a separate hint pour raising it. The as attribute is requis on preload; crossorigin is requis pour fonts and autre anonymous-mode récupère, or le navigateur downloads the resource twice. Overuse is the dominant échec mode. And per Gary Illyes (Feb 2026), none of ce helps Googlebot — the SEO valeur is entirely indirect, via Core Web Vitals, qui is un of several ranking signals, pas a deterministic un.

A spectrum of navigateur “cost”

The cleanest mental model pour resource hints is to line les up by how beaucoup fonctionner you’re asking le navigateur to do up front:

1. dns-prefetch — resolve a hostname to an IP. Cheapest.
2. preconnect — DNS lookup plus the TCP handshake plus TLS negotiation pour HTTPS. A complet ouvrir connection, ready to utiliser.
3. preload — go en réalité récupérer a spécifique resource, now. Le navigateur doit traiter the récupérer, but que doesn’t automatically faire it élevé priority — plus on que ci-dessous.
4. modulepreload — preload’s sibling pour JavaScript modules; récupère the module into le navigateur’s module map en utilisant module-script rules plutôt que a generic récupérer.
5. prefetch — go récupérer a spécifique resource, but at the lowest priority, pour une page the utilisateur hasn’t navigated to yet.

Ils go in un of two places: a <link> element in the <head>, or an HTTP Link réponse header (plus on the header chemin, and 103 Early Hints, ci-dessous). None of ce is the document-level Speculation Rules API — that’s a separate mechanism pour prerendering/prefetching whole navigations, covered in the prefetch section ci-dessous.

dns-prefetch

dns-prefetch performs simplement the DNS lookup pour a cross-origin server ahead of temps — it doesn’t ouvrir a connection. Que rend it the cheapest hint and a sensible par défaut pour the nombreux lower-priority third-party domains une page touches (analytics, tag managers, minor widgets). In my propre Plus grand affichage de contenu guide I faire the practical point que “DNS-prefetch has meilleur prise en charge que preconnect” — so it’s aussi a reasonable fallback pour navigateurs où preconnect isn’t honored.

<link rel="dns-prefetch" href="https://analytics.example.com">

preconnect

preconnect goes plus loin: it opens the whole connection — DNS, TCP, and (pour HTTPS) the TLS handshake — so que by the temps le navigateur nécessite the resource, the pipe is déjà warm. That’s a bigger win que dns-prefetch, but it’s aussi plus expensive to le navigateur, qui is pourquoi it comes with two important caveats:

• Reserve it pour votre la plupart critical cross-origin connections. A handful (votre font host, votre image CDN, a critical script origin) — pas everything. Google’s Lighthouse “Preconnect to required origins” audit and web.dev les deux warn que unnecessary preconnects delay autre important fonctionner.
• An unused connection is wasted fonctionner. Navigateurs fermer a connection que isn’t utilisé dans à propos de 10 seconds, so a preconnect to something vous don’t en réalité récupérer soon simplement burns handshake capacity pour nothing.

Pour fonts, preconnect nécessite the crossorigin attribute — fonts are toujours récupéré in anonymous (CORS) mode, and sans it le navigateur opens a second connection anyway, defeating the point.

<link rel="preconnect" href="https://fonts.example.com" crossorigin>

preload

preload is the un le navigateur is obligated to execute — si it processes the tag, it doit commencer the récupérer pour a resource the current page definitely nécessite but voudrait sinon découvrir late. That’s a statement à propos de quand the récupérer starts, pas automatically à propos de priority: the par défaut priority a preloaded resource obtient encore dépend on the resource type and le navigateur (web.dev is explicit que images, Par exemple, stay low priority by par défaut même quand preloaded). Si vous vouloir to en réalité raise a resource’s priority, that’s a separate, explicit hint — fetchpriority — pas something preload fait on its propre. The classic candidates pour preload:

• Fonts referenced à l’intérieur a CSS fichier — le navigateur doesn’t know the font exists jusqu’à it downloads and parses the CSS, so preload surfaces it précédent.
• The LCP (hero) image, surtout un définir via CSS or srcset que isn’t a plain early <img> in the HTML.
• Critical, late-discovered JavaScript or CSS.

Two attributes faire or break it:

• as is requis. It indique le navigateur ce que type of resource ce is so it peut assign the correct priority and match the cache entry. Omit it and the navigateur treats la requête comme a generic XHR — incorrect priority, and souvent a duplicate download.
• crossorigin pour fonts — même rule as preconnect; miss it and the font downloads twice.

Plus généralement, a preload seulement obtient reused si the eventual requête matches it: même URL, même as/destination, the même type or media condition, matching crossorigin/credentials mode, and — où ils appliquer — matching integrity and referrerpolicy. Pour a responsive image preload, que aussi signifie en utilisant imagesrcset/imagesizes que mirror the srcset/sizes le navigateur voudrait en réalité pick, pas a unique unconditional fallback URL. Obtenir quelconque of ces out of sync and le navigateur soit can’t reuse the preload (duplicate récupérer) or récupère the incorrect candidate.

Pour the LCP image specifically, Google’s current recommendation is to pair preload with fetchpriority="high" so the récupérer starts alongside the stylesheet. Ce is the combo I décrire in my LCP guide aussi — fetchpriority="high" obtient the image earliest, and preloading is a strong second signal, utile parce que as I remarque là, “Early Hints don’t fonctionner on tout navigateurs, so vous may aussi vouloir to preload the image.”

<!-- LCP image -->
<link rel="preload" fetchpriority="high" as="image" href="/hero.webp" type="image/webp">

<!-- Font in CSS -->
<link rel="preload" as="font" type="font/woff2" href="/fonts/inter.woff2" crossorigin>

The overuse warning s’applique hardest ici: si everything is preloaded at élevé priority, effectively nothing is. web.dev is explicit que excessive preloads causer bandwidth contention, and it hits hardest on slow networks. Preload the two or three genuinely late-discovered, genuinely critical resources — aucun plus.

modulepreload

modulepreload is preload’s counterpart pour JavaScript modules. Au lieu de a generic resource récupérer, it uses module-script récupérer rules and puts le résultat straight into le navigateur’s module map — so quand the module is plus tard imported, le navigateur déjà has it. Selon le navigateur, it may aussi go ahead and récupérer the module’s static imports. Prise en charge and how deep que dependency-fetching goes les deux vary by navigateur, so tester the réel behavior plutôt que assuming it matches preload.

<link rel="modulepreload" href="/js/app.module.js">

prefetch

prefetch is the odd un out: it’s pas à propos de the current page at tout. It’s a low-priority, speculative récupérer pour a resource a future navigation va probable besoin — the suivant step in a checkout, the article a utilisateur is à propos de to click. Parce que it runs at the lowest priority, it doesn’t steal bandwidth from the current page’s critical resources, and prefetched fichiers land in the HTTP cache (si they’re cacheable) ready pour the suivant navigation.

The trade-off: si the utilisateur jamais goes là, you’ve spent bytes pour nothing — so appliquer it thoughtfully and éviter it on slow or metered connections.

<link rel="prefetch" href="/checkout/step-2" as="document">

Looking forward, the Speculation Rules API is the modern successor to prefetch pour predicting same-site navigations; web.dev notes it handles cas plain prefetch can’t (comme non-cacheable navigations) and behaves plus consistently à travers origins. prefetch remains utile and plus broadly pris en charge in the meantime.

Preload vs. prefetch vs. preconnect vs. dns-prefetch

Resource hints and Core Web Vitals

Here’s the partie SEOs en réalité care à propos de — qui hint moves qui metric:

• dns-prefetch / preconnect shave connection latency, qui montre up as a faster commencer to chargement votre critical resources — feeding LCP and, avant it, FCP.
• preload acts on LCP and FCP la plupart directement by starting the récupérer of the LCP image or a render-critical font/stylesheet précédent.
• prefetch doesn’t touch the current page’s Core Web Vitals at tout — it improves the suivant page’s LCP/FCP by having its resources déjà mis en cache.

None of ces directement affecter INP or CLS, though getting fonts in précédent (via preload) peut indirectly reduce layout shift from font swaps — that’s really a font chargement topic, and ressources qui bloquent le rendu is the sibling article on the fetch-order side of the même problem.

Do resource hints aider Google explorer or index my site?

Aucun — and ce is the unique la plupart important nuance to obtenir correct, parce que la plupart content on ce topic is vague à propos de it.

In a February 2026 Search Off the Record episode, Google’s Gary Illyes explained pourquoi Googlebot largely ignores ces hints: ils solve navigateur and network latency problems que Google’s propre exploration infrastructure doesn’t have. As reported by Moteur de recherche Journal, Illyes said “it’s very utile si vous have comme a crappy internet to do DNS Prefetching Par exemple. In our cas, we don’t besoin to parce que we peut talk very fast to tout the cascading DNS servers.” Jump to quote He made the même point à propos de preload — “Même with preload. Si we ne sont pas synchronous alors we don’t particularly besoin to regarder at preload.” Jump to quote

So the correct causal chain is: resource hints → faster real-user experience → meilleur Core Web Vitals → un of several signals Google’s ranking systems utiliser. Google’s propre page experience documentation is explicit que there’s aucun unique page-experience signal, que Core Web Vitals are utilisé by ranking systems alongside others, and que bon CWV scores don’t guarantee a top ranking — relevance encore wins over page experience. So it’s pas nothing — but resource hints are a UX/performances tactic premier, and leur SEO valeur is entirely downstream and non-deterministic. Don’t sell les internally as “ce helps Google lire lune page.”

Bing, pour ce que it’s worth, has publié aucun hint-specific guidance at tout — its webmaster guidance références site speed generically. Le navigateur-level benefits (faster loads, meilleur vitals) appliquer the même regardless of moteur de recherche, so there’s aucun separate “Bing angle” to optimize pour ici.

Delivering hints over HTTP: the Lien header and 103 Early Hints

Resource hints don’t have to live in votre HTML. Vous pouvez send les as an HTTP Link réponse header — Link: </hero.webp>; rel=preload; as=image — qui is how server- and CDN-level implementations fonctionner. The la plupart interesting version of ce is 103 Early Hints: a preliminary HTTP status que lets an edge (comme Cloudflare) send mis en cache preload/preconnect Link headers avant the origin server has même finished generating the complet réponse — giving le navigateur a head commencer on connections and récupère pendant que it waits. I cover the 103 status itself in my Code d’état HTTPs guide, où I décrire it as letting vous preload resources to aider LCP pour Core Web Vitals.

Erreurs fréquentes

• Preloading aussi nombreux resources — the cardinal sin; it creates bandwidth contention and peut faire lune page slower overall.
• Preloading choses le navigateur déjà trouve early — an early <img> in the HTML doesn’t besoin preloading; you’re simplement spending une requête slot.
• Manquant as on preload — incorrect priority and souvent a double download.
• Manquant crossorigin on font preload/preconnect — a mismatched cache entry signifie the font downloads twice.
• Stale, unused preconnect tags — left behind après vous supprimé the third-party script ils were pour, holding connections ouvrir pour 10 seconds avant le navigateur donne up.
• Ignoring the cost au-delà votre propre page — unused hints don’t simplement waste votre propre bandwidth; ils consume sockets and server/third-party capacity, and dns-prefetch/preconnect peut reveal probable destinations to network observers. Navigateurs may aussi ignore, cancel, or limite hints sous Save-Data, low-power, or prise en charge constraints — prefetch in particulier is treated as optional and skipped pour reduced-data utilisateurs, so don’t assume a hint vous shipped is en réalité running pour every visitor.

Comment tester and audit

• Lighthouse / PageSpeed Insights — the “Preconnect to required origins” audit flags manquant preconnects on clé requêtes; treat it as a prompt to ajouter a targeted un, pas to carpet-bomb.
• Chrome DevTools → Network panel — the Priority column montre ce que the navigateur en réalité prioritized, and vous pouvez spot preloaded resources fetching twice (the as/crossorigin bugs).
• Vérifier pour unused preconnects — si a preconnected origin jamais apparaît as an réel requête, supprimer the hint.

Pour the metrics ces tout feed, voir Core Web Vitals and Plus grand affichage de contenu; the web performances outils article covers the measurement stack in depth.

AI summary

A condensed prendre on the Avancé version:

• Principal hints, increasing navigateur cost: dns-prefetch (DNS seulement) → preconnect (DNS + TCP + TLS) → preload (mandatory récupérer of a late-discovered current-page resource) → prefetch (lowest-priority speculative récupérer pour a future navigation). modulepreload is preload’s sibling pour JS modules.
• preload is the seulement mandatory un — le navigateur doit récupérer it si it processes the tag — but that’s pas the même as “automatically high priority.” Par défaut priority encore dépend on resource type and navigateur; fetchpriority is the separate hint pour en réalité raising it.
• Attribute matching matters: as is requis on preload (or vous obtenir incorrect priority + a double download); crossorigin is requis pour fonts; the eventual requête aussi has to match on URL, type/media, credentials, integrity, referrerpolicy, and (pour responsive images) imagesrcset/ imagesizes — mismatches causer duplicate or wrong-candidate récupère.
• Overuse is the dominant échec mode — “si everything is élevé priority, nothing is.” Unused hints aussi cost sockets/server capacity, peut reveal probable destinations, and may be ignored sous Save-Data constraints.
• LCP image combo: preload + fetchpriority="high" is Google’s current recommendation.
• Core Web Vitals mapping: dns-prefetch/preconnect cut connection latency (LCP/FCP); preload acts on LCP/FCP directement; prefetch seulement helps the suivant page.
• SEO reality (Gary Illyes, Feb 2026): resource hints don’t aider Googlebot explorer or index — Google’s infrastructure lacks le navigateur latency ces solve. Valeur is indirect: hints → faster UX → Core Web Vitals → un of several ranking signals, pas a guarantee. Bing has aucun hint-specific guidance.
• Delivery: HTML <link> or HTTP Link header; 103 Early Hints lets a CDN push mis en cache hints avant the origin responds.

Documentation officielle

Primary-source guidance from Google (Bing has aucun resource-hint-specific docs).

Google — web.dev

• Assist le navigateur with resource hints — the Apprendre Performances module covering tout four hints and quand to utiliser chaque.
• Establish network connections early — preconnect and dns-prefetch, the 10-second unused-connection rule, and the crossorigin requirement pour fonts.
• Preload critical assets to améliorer chargement speed — the as attribute, late-discovered fonts/images, and the “if everything is prioritized, nothing is” warning.
• Optimize LCP — recommends pairing preload with fetchpriority="high" pour the LCP image.
• Prefetch resources to speed up future navigations — prefetch priority, HTTP mise en cache behavior, and the Speculation Rules API as its successor.

Google — Chrome / Lighthouse & Search

• Preconnect to requis origins (Lighthouse audit) — ce que the audit flags and pourquoi unused preconnects waste CPU.
• Understanding Core Web Vitals and Recherche Google results — confirms CWV is partie of lune page experience ranking signal (the indirect raison hints matter pour le SEO).
• Understanding page experience dans la recherche Google results — confirms there’s aucun unique page-experience signal and bon Core Web Vitals scores don’t guarantee top rankings.

Bing / Microsoft

• Bing Webmaster Guidelines — références site performances generically; aucun hint-specific guidance publié.

Référence

• MDN — En utilisant dns-prefetch.

Quotes from the source

On-the-record statements. Chaque lien is a deep lien to the quoted passage.

Gary Illyes, Google — pourquoi the robot d’exploration ignores resource hints (Search Off the Record, Feb 2026)

• “It’s very helpful if you have like a crappy internet to do DNS Prefetching for example. In our case, we don’t need to because we can talk very fast to all the cascading DNS servers.” — Gary Illyes. Jump to quote
• “Same with preload. If we are not synchronous then we don’t particularly need to look at preload.” — Gary Illyes. Jump to quote

Patrick Stox — resource hints pour LCP (Ahrefs)

• “DNS-prefetch has better support than preconnect.” — from my Plus grand affichage de contenu guide.
• “Early Hints don’t work on all browsers, so you may also want to preload the image.” — from the même LCP guide.

Resource hints — cheat sheet

Qui hint, quand

Syntax snippets

<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="preconnect" href="https://fonts.example.com" crossorigin>
<link rel="preload" fetchpriority="high" as="image" href="/hero.webp" type="image/webp">
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>
<link rel="prefetch" href="/next-page" as="document">

HTTP header equivalent (pour CDN / 103 Early Hints)

Link: </hero.webp>; rel=preload; as=image
Link: <https://fonts.example.com>; rel=preconnect

Attribute rules

• as — requis on preload (type + priority signal + cache matching).
• crossorigin — requis pour fonts on les deux preload and preconnect.
• type — helps le navigateur skip formats it can’t utiliser (e.g. type="image/webp").
• Match the consumer, pas simplement the tag — URL, as/destination, type/media, credentials, integrity, referrerpolicy, and (pour responsive images) imagesrcset/imagesizes tout have to line up or vous obtenir a duplicate/incorrect récupérer au lieu de a enregistré un.
• preload’s par défaut priority is resource/browser-dependent, pas automatically “high” — utiliser fetchpriority to en réalité raise it.

Core Web Vitals mapping

• dns-prefetch / preconnect → connection latency → LCP / FCP
• preload → LCP / FCP directement
• prefetch → the suivant page’s LCP/FCP seulement (pas current-page CWV)

Resource hint myths and mistakes

Chaque un: pourquoi it’s incorrect, and Que faire à la place.

Myth: “Resource hints help Google crawl or index my page faster.” Incorrect — per Gary Illyes (Feb 2026), Google’s exploration infrastructure doesn’t have le navigateur-side latency ces hints solve; it resolves DNS internally and récupère resources via its propre pipeline. Do à la place: treat hints as a real-user performances tactic. The seulement SEO payoff is indirect, via Core Web Vitals.

Myth: “More preloads = more speed.” Incorrect — preloading a long liste creates bandwidth contention, and lune page peut fin up slower. “If everything is high priority, nothing is.” Do à la place: preload seulement votre two or three genuinely late-discovered, genuinely critical resources.

Myth: “Preload and prefetch are basically the same thing.” Incorrect — preload is mandatory and high-priority pour the current page; prefetch is speculative and lowest-priority pour a future page. Mixing les up (en utilisant preload où vous meant prefetch) rend the current page slower by competing with critical CSS/JS. Do à la place: preload pour now, prefetch pour suivant.

Myth: “You don’t need the as attribute; the browser figures it out.” Incorrect — sans as, le navigateur treats la requête comme a generic XHR, can’t définir the correct priority, and souvent downloads the resource twice. Do à la place: toujours définir as (e.g. as="image", as="font", as="style").

Myth: “Preconnect is always better than dns-prefetch.” Pas quite — preconnect fait the complet handshake, qui costs le navigateur plus and has historically had narrower prise en charge. Do à la place: preconnect seulement votre few la plupart critical origins; utiliser dns-prefetch pour the rest.

Myth: “Adding preconnect automatically means fonts will use that connection.” Incorrect sans crossorigin — omit it and le navigateur opens a second connection pour the font anyway. Do à la place: ajouter crossorigin to quelconque preconnect/preload you’ll utiliser pour fonts or autre CORS récupère.

Avant / après

Concrete fixes que follow from the guidance ci-dessus.

1. LCP image découvert aussi late

• Avant: the hero image is définir via a CSS background-image, so le navigateur doesn’t trouver it jusqu’à it has downloaded and parsed the stylesheet. LCP is slow.
• Après: <link rel="preload" fetchpriority="high" as="image" href="/hero.webp" type="image/webp"> in the <head> starts the récupérer alongside the stylesheet — Google’s recommended LCP combo.

2. Font downloading twice

• Avant: <link rel="preload" as="font" href="/inter.woff2"> — aucun crossorigin. The preload cache entry doesn’t match the CORS récupérer the CSS triggers, so the font downloads twice.
• Après: ajouter type="font/woff2" and crossorigin; un download, surfaced early.

3. Over-preloaded page

• Avant: a dozen preload tags pour scripts, styles, and images “to be safe.” Ils contend pour bandwidth and lune page is slower que with none.
• Après: garder preload pour the LCP image and un render-critical font; drop the rest. Faster overall, parce que now the important choses en réalité obtenir priority.

4. Stale preconnect après a cleanup

• Avant: a third-party chat widget was supprimé, but its <link rel="preconnect" href="https://chat.vendor.com"> was left behind. The navigateur opens the connection, holds it ~10 seconds, and closes it unused — wasted handshake capacity.
• Après: delete the orphaned preconnect. Fewer competing connections at the critical moment.

Audit a proposed resource hint

Act as a web-performance reviewer. I will give you one HTML resource hint and the
matching Network-panel request details. Classify the hint as dns-prefetch,
preconnect, preload, or prefetch; state whether it targets the current page or a
future navigation; check required as, type, and crossorigin attributes; and identify
duplicate-fetch or bandwidth-contention risk. Do not recommend another hint until
you can explain why normal parser discovery is too late. Return: verdict, evidence,
smallest safe change, and a before/after validation test.

Prioritize candidates from a waterfall

Review this request waterfall and LCP element description. Propose at most three
resource hints. Prefer no hint when the browser already discovers a resource early.
For each candidate, give the exact reason it is late, expected request-timing change,
required attributes, risk if unused, and the Network/Lighthouse evidence that would
prove the change helped. Never treat a resource hint as a crawling or indexing fix.

Supprimer stale hints safely

Given this list of link rel resource hints and the requests from a cold page load,
identify hints that are unused, duplicated, or mismatched. Separate definite removals
from items that require another device/network test. Preserve only hints that serve a
named critical request. Return a removal checklist and rollback trigger; do not invent
performance savings.

Resource-hint release checklist

• The candidate solves a mesuré discovery or connection delay in a cold-load waterfall.
• preload targets a resource requis by the current page; prefetch targets a probable future navigation.
• Every preload has the correct as valeur and an appropriate type où utile.
• Font preloads and preconnects inclure the matching crossorigin mode.
• The LCP image n’est pas les deux preloaded incorrectly and découvert via a competing source que causes a duplicate requête.
• Preconnect is limited to the few origins utilisé early in the charger.
• Aucun hint remains pour a supprimé vendor, widget, font, or asset chemin.
• Slow-network testing montre critical resources déplacer précédent sans delaying higher-value fonctionner.
• A cold-load Network trace montre aucun duplicate récupère.
• The modifier is décrit as a user-performance optimization, pas a Googlebot exploration or indexation tactic.

Inventory hints and leur attributes

Paste ce into DevTools Console on the deployed page:

[...document.querySelectorAll('link[rel]')]
  .filter(link => ['dns-prefetch', 'preconnect', 'preload', 'prefetch'].includes(link.rel))
  .map(link => ({
    rel: link.rel,
    href: link.href,
    as: link.as || '(missing)',
    type: link.type || '(none)',
    crossorigin: link.crossOrigin || '(none)',
  }));

Examiner manquant as valeurs on preloads and manquant CORS mode on font requêtes; autre blank fields may be valid pour que hint type.

Trouver preloads que récupéré plus que une fois

const preloads = [...document.querySelectorAll('link[rel="preload"]')]
  .map(link => new URL(link.href, location.href).href);

performance.getEntriesByType('resource')
  .filter(entry => preloads.includes(entry.name))
  .reduce((rows, entry) => {
    rows[entry.name] = (rows[entry.name] || 0) + 1;
    return rows;
  }, {});

Quelconque count ci-dessus un deserves inspection pour an as, crossorigin, URL, or cache-key mismatch. A count of un ne fait pas by itself prove que the hint improved timing.

Outils pour choosing and verifying hints

• Chrome DevTools Network panel: enable Priority and Initiator, disable cache, and inspect si the target begins précédent or downloads twice.
• Chrome DevTools Performances panel: connecter la requête-timing modifier to FCP or LCP plutôt que declaring success from markup alone.
• Lighthouse / PageSpeed Insights: utiliser preconnect and LCP discovery diagnostics as candidate generators, alors confirmer chaque suggestion in the waterfall.
• Réponse headers view: vérifier HTTP Link headers and 103 Early Hints quand the hint comes from le serveur or CDN plutôt que the HTML.
• A slow-network tester profile: resource contention and over-preloading are easier to voir sous constrained bandwidth que on a warm, fast local connection.

Critical-resource timing

Tester to run: Capture matched cold-load waterfalls avant and après ajout un preload or preconnect pour a mesuré critical resource.

Attendu result: The intended connection or requête begins précédent, the resource is consumed une fois, and the associated FCP/LCP timing ne fait pas regress.

Échec interpretation: Le navigateur déjà découvert it early, the attributes ne faites pas match the consuming requête, or the hint competes with plus important fonctionner.

Monitoring window: Comparer repeated mobile and desktop lab runs immédiatement, alors watch the relevant field vital via its reporting window.

Rollback trigger: Supprimer the hint si it causes duplicate récupère, remains unused, or produces a repeatable regression in the critical metric.

Hint hygiene après deployment

Tester to run: Inventory tout deployed resource hints and match chaque un to an réel requête in a cold charger.

Attendu result: Every preconnect sert an origin utilisé early; every preload is consumed with matching requête attributes; speculative prefetches map to a deliberate next-navigation rule.

Échec interpretation: A stale template or vendor removal left unused fonctionner, or a URL/CORS/type mismatch empêche reuse.

Monitoring window: Recheck après vendor, font, CDN, LCP-element, and template changements.

Rollback trigger: Supprimer quelconque orphaned hint or revert a template modifier que sends invalid Lien headers or breaks lune page’s resource récupère.

Testez vos connaissances: Resource Hints

Five rapide questions on preload, preconnect, dns-prefetch, and prefetch. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

My connexe writing

• Ce que Is Plus grand affichage de contenu (LCP) & How To Améliorer It — my la plupart detailed treatment of resource hints En pratique: early hints, preload, fetchpriority="high", and preconnect/dns-prefetch pour cross-origin resources.
• 11 Types of Code d’état HTTPs & Leur SEO Impact — inclut 103 Early Hints, the HTTP-level façon to deliver preload/preconnect.
• The Beginner’s Guide to SEO technique — où page performances fits in the bigger picture.
• Google PageSpeed Insights Pour le SEOs & Developers — the outil que surfaces “Preconnect to required origins” and LCP recommendations.

My speaking

• What’s Suivant pour Page Experience (SMX Suivant 2021) — my deck with preconnect/dns-prefetch and preload-for-images exemples.

From autour the industry

• web.dev — Assist le navigateur with resource hints — Google’s canonical overview of tout four hints.
• web.dev — Establish network connections early — preconnect and dns-prefetch in depth.
• web.dev — Prefetch resources to speed up future navigations — prefetch and the Speculation Rules API.
• Chrome / Lighthouse — Preconnect to requis origins — the audit and its cautions.
• DebugBear — Navigateur Resource Hints: preload, prefetch, and preconnect — a thorough, testing-driven walkthrough.
• Cloudflare — Early Hints and Cloudflare Docs — Early Hints — how 103 Early Hints delivers mis en cache hints from the edge.
• KeyCDN — Resource Hints: Ce que is Preload, Prefetch, and Preconnect? — a concise référence.
• MDN — En utilisant dns-prefetch — the spec-level référence.

Journal des modifications