Guide : Resource Hints

TL;DR — Resource hints tell le navigateur à commencer some network fonctionner early — avant il voudrait normally figure out il nécessite à. Là sont four: dns-prefetch (regarder up a domain’s adresse early), preconnect (ouvrir a connection early), preload (récupérer quelque chose le actuel page nécessite maintenant, comme votre big hero image), et prefetch (quietly grab quelque chose le suivant page va probably besoin). Utilisé sparingly ils speed up votre page. Utilisé everywhere ils lent il bas.

Ce que resource hints are

Quand a navigateur charge votre page, il discovers ce que il nécessite as il goes. Il lit le HTML, trouve a CSS fichier, downloads il, parses il, et seulement alors realizes il y a a font or a background image il a à récupérer. Que “seulement alors” est wasted temps.

Resource hints let vous skip le waiting. ils sont little instructions vous put dans lune page (or dans le serveur’s réponse) que dire: commencer ce maintenant, ne pas wait à découvrir il. Four de les faire la plupart de le fonctionner:

«- dns-prefetch — “look up this domain’s address ahead of time.” Cheapest, smallest head start. » (Traduction) (Résumé en français de la section huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- preconnect — “actually open the connection to this domain ahead of time” (address lookup plus the secure handshake). Bigger head start, more work for the browser, so use it only for the connections that really matter. » (Traduction) (Résumé en français de la section huit, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- preload — “fetch this specific file now because the current page definitely needs it.” Best for things like your main image or a font. » (Traduction) (Résumé en français de la section huit, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- prefetch — “quietly grab this in the background because the user will probably go to that page next.” » (Traduction) (Résumé en français de la section huit, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

Le golden règle: ne pas overdo il

Le la plupart courant mistake est treating hints comme a magic “make it faster” button et ajout a bunch de les. Il backfires. Si vous tell le navigateur tout est urgent, alors rien est — ils tout fight pour le même bandwidth et votre page peut fin up slower que avant. A court, targeted liste de hints beats a long un chaque temps.

Do ces aider my Google rankings?

Pas directement, et c’est worth étant clair à propos de ce. Google’s robot d’exploration ne fait pas avantage depuis votre resource hints — il récupère pages differently que a réel navigateur fait. Ce que resource hints faire est faire lune page faster pour réel visitors, et que feeds dans Core Web Vitals, qui Google’s classement systèmes utiliser as un signal parmi plusieurs — Google est explicit que il y a aucun unique page-experience signal, et bon Core Web Vitals scores ne pas guarantee a top classement. Donc le chain est: hints → faster experience → meilleur Core Web Vitals → un entrée parmi nombreux dans classement. Pas “Google lit ce balise et se classe vous plus élevé.”

Vouloir le syntax, le as et crossorigin gotchas, le comparaison tableau, et le complet Core Web Vitals mapping? Switch à le Avancé tab.

TL;DR — Le principal resource hints formulaire a spectrum de navigateur coût: dns-prefetch (DNS lookup seulement) → preconnect (DNS + TCP + TLS) → preload (a mandatory récupérer de a spécifique, late-discovered resource) → prefetch (lowest-priority speculative récupérer pour a future navigation). modulepreload est preload’s sibling pour JS modules. preload est le seulement un le navigateur est obligated à récupérer — c’est différent depuis saying c’est automatiquement élevé priority; par défaut priority encore dépend on le resource type, et fetchpriority est a séparé hint pour raising il. Le as attribut est requis on preload; crossorigin est requis pour fonts et autre anonymous-mode récupère, or le navigateur downloads le resource twice. Overuse est le dominant échec mode. Et per Gary Illyes (Feb 2026), none de ce aide Googlebot — le SEO valeur est entirely indirect, via Core Web Vitals, qui est un de plusieurs classement signaux, pas a deterministic un.

A spectrum of navigateur “cost”

Le cleanest mental model pour resource hints est à line les up par comment beaucoup fonctionner vous êtes asking le navigateur à faire up front:

1. dns-prefetch — resolve a hostname à an IP. Cheapest.
2. preconnect — DNS lookup plus le TCP handshake plus TLS negotiation pour HTTPS. A complet ouvrir connection, ready à utiliser.
3. preload — go en réalité récupérer a spécifique resource, maintenant. Le navigateur doit traiter le récupérer, mais que ne fait pas automatiquement faire il élevé priority — plus on que ci-dessous.
4. modulepreload — preload’s sibling pour JavaScript modules; récupère le module dans le navigateur’s module map en utilisant module-script règles plutôt que a générique récupérer.
5. prefetch — go récupérer a spécifique resource, mais à le lowest priority, pour une page le utilisateur hasn’t navigated à yet.

Ils go dans un de deux places: a <link> element dans le <head>, or an HTTP Link réponse header (plus on le header chemin, et 103 Early Hints, ci-dessous). None de ce est le document-level Speculation Règles API — c’est a séparé mechanism pour prerendering/prefetching entier navigations, covered dans le prefetch section ci-dessous.

dns-prefetch

dns-prefetch performs simplement le DNS lookup pour a cross-origin serveur ahead de temps — il ne fait pas ouvrir a connection. Que rend il le cheapest hint et a sensible par défaut pour le nombreux lower-priority tiers domains une page touches (analytics, balise managers, minor widgets). Dans mon propre Plus grand affichage de contenu guide Je faire le practical point que “DNS-prefetch a meilleur prise en charge que preconnect” — donc c’est aussi a reasonable fallback pour navigateurs où preconnect n’est pas honored.

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

preconnect

preconnect goes plus loin: il opens le entier connection — DNS, TCP, et (pour HTTPS) le TLS handshake — donc que par le temps le navigateur nécessite le resource, le pipe est déjà warm. c’est a bigger win que dns-prefetch, mais c’est aussi plus expensive à le navigateur, qui est pourquoi il comes avec deux important caveats:

• Reserve il pour votre la plupart critical cross-origin connections. A handful (votre font host, votre image CDN, a critical script origin) — pas tout. Google’s Lighthouse “Preconnect to required origins” audit et web.dev les deux warn que unnecessary preconnects delay autre important fonctionner.
• An unused connection est wasted fonctionner. Navigateurs fermer a connection que n’est pas utilisé dans à propos de 10 seconds, donc a preconnect à quelque chose vous ne pas en réalité récupérer soon simplement burns handshake capacity pour rien.

Pour fonts, preconnect nécessite le crossorigin attribut — fonts sont toujours récupéré dans anonymous (CORS) mode, et sans il le navigateur opens a deuxième connection anyway, defeating le point.

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

preload

«preload is the one the browser is obligated to execute — if it processes the tag, it must start the fetch for a resource the current page definitely needs but would otherwise discover late. That’s a statement about when the fetch starts, not automatically about priority: the default priority a preloaded resource gets still depends on the resource type and the browser (web.dev is explicit that images, for example, stay low priority by default even when preloaded). If you want to actually raise a resource’s priority, that’s a separate, explicit hint — fetchpriority — not something preload does on its own. The classic candidates for preload: » (Traduction) (Résumé en français de la section trente et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

• Fonts referenced à l’intérieur a CSS fichier — le navigateur ne fait pas know le font exists jusqu’à il downloads et parses le CSS, donc preload surfaces il précédent.
• Le LCP (hero) image, surtout un définir via CSS or srcset que n’est pas a plain early <img> dans le HTML.
• Critical, late-discovered JavaScript or CSS.

Two attributes faire or break it:

• as est requis. Il indique le navigateur ce que type de resource ce est donc il peut assign le correct priority et match le cache entry. Omit il et le navigateur treats la requête comme a générique XHR — incorrect priority, et souvent a duplicate download.
• crossorigin pour fonts — même règle as preconnect; miss il et le font downloads twice.

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

«For the LCP image specifically, Google’s current recommendation is to pair preload with fetchpriority="high" so the fetch starts alongside the stylesheet. This is the combo I describe in my LCP guide too — fetchpriority="high" gets the image earliest, and preloading is a strong second signal, useful because as I note there, “Early Hints don’t work on all browsers, so you may also want to preload the image.” » (Traduction) (Résumé en français de la section trente-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

<!-- 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>

Le overuse warning s’applique hardest ici: si tout est preloaded à élevé priority, effectively rien est. web.dev est explicit que excessive preloads causer bandwidth contention, et il hits hardest on lent networks. Preload le deux or three genuinely late-discovered, genuinely critical resources — aucun plus.

modulepreload

modulepreload est preload’s counterpart pour JavaScript modules. Au lieu de a générique resource récupérer, il utilise module-script récupérer règles et puts le résultat straight dans le navigateur’s module map — donc quand le module est plus tard imported, le navigateur déjà a il. Selon le navigateur, il peut aussi go ahead et récupérer le module’s static imports. Prise en charge et comment deep que dependency-fetching goes les deux vary par navigateur, donc tester le réel behavior plutôt que assuming il matches preload.

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

prefetch

prefetch est le odd un out: c’est pas à propos de le actuel page à tout. c’est a faible-priority, speculative récupérer pour a resource a future navigation va probable besoin — le suivant étape dans a checkout, le article a utilisateur est à propos de à click. Parce que il exécute à le lowest priority, il ne fait pas steal bandwidth depuis le actuel page’s critical resources, et prefetched fichiers land dans le HTTP cache (si ils sont cacheable) ready pour le suivant navigation.

Le trade-off: si le utilisateur jamais goes là, vous avez spent bytes pour rien — donc appliquer il thoughtfully et éviter il on lent or metered connections.

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

Looking forward, le Speculation Règles API est le modern successor à prefetch pour predicting même-site navigations; web.dev notes il handles cas plain prefetch ne peut pas (comme non-cacheable navigations) et behaves plus consistently à travers origins. prefetch remains utile et plus broadly pris en charge dans le meantime.

«## Preload vs. prefetch vs. preconnect vs. dns-prefetch » (Traduction) (Résumé en français de la section quarante-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«| Hint | What it does | Priority | Browser must obey? | Best for | | --- | --- | --- | --- | --- | | dns-prefetch | DNS lookup only | — | Suggestion | Many lower-priority third-party domains | | preconnect | DNS + TCP + TLS (full connection) | — | Suggestion | Your few most critical cross-origin origins | | preload | Fetch a specific resource | Resource/browser-dependent — not automatically high; pair with fetchpriority to raise it | Yes, if processed | Late-discovered critical resources on this page | | modulepreload | Fetch a JS module into the module map | Resource/browser-dependent | Yes, if processed | Late-discovered ES modules this page needs | | prefetch | Fetch a specific resource, lowest priority | Lowest | Suggestion | Resources for a likely future navigation | » (Traduction) (Résumé en français de la section quarante-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Resource hints and Core Web Vitals » (Traduction) (Résumé en français de la section quarante-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Here’s the part SEOs actually care about — which hint moves which metric: » (Traduction) (Résumé en français de la section cinquante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- dns-prefetch / preconnect shave connection latency, which shows up as a faster start to loading your critical resources — feeding LCP and, before it, FCP. » (Traduction) (Résumé en français de la section cinquante et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- preload acts on LCP and FCP most directly by starting the fetch of the LCP image or a render-critical font/stylesheet earlier. » (Traduction) (Résumé en français de la section cinquante et un, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- prefetch doesn’t touch the current page’s Core Web Vitals at all — it improves the next page’s LCP/FCP by having its resources already cached. » (Traduction) (Résumé en français de la section cinquante et un, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

None de ces directement affecter INP or CLS, though getting fonts dans précédent (via preload) peut indirectly reduce layout shift depuis font swaps — c’est vraiment a font chargement topic, et ressources qui bloquent le rendu est le sibling article on le récupérer-order side de le même problème.

Do resource hints aider Google explorer or index my site?

Aucun — et ce est le unique la plupart important nuance à obtenir correct, parce que la plupart contenu on ce topic est vague à propos de il.

Dans a February 2026 Recherche Off le Record episode, Google’s Gary Illyes explained pourquoi Googlebot largely ignores ces hints: ils solve navigateur et network latency problèmes que Google’s propre exploration infrastructure ne fait pas ont. As reported par Moteur de recherche Journal, Illyes said “c’est very utile si vous ont comme a crappy internet à faire DNS Prefetching Par exemple. Dans notre cas, nous ne pas besoin à parce que nous peut talk very rapide à tout le cascading DNS serveurs.” Jump à citation Il fait le même point à propos de preload — “Même avec preload. Si nous ne sont pas synchronous alors nous ne pas particularly besoin à regarder à preload.” Jump à citation

Donc le correct causal chain est: resource hints → faster real-expérience utilisateur → meilleur Core Web Vitals → un de plusieurs signaux Google’s classement systèmes utiliser. Google’s propre page experience documentation est explicit que il y a aucun unique page-experience signal, que Core Web Vitals sont utilisé par classement systèmes alongside others, et que bon CWV scores ne pas guarantee a top classement — pertinence encore wins over page experience. Donc c’est pas rien — mais resource hints sont a UX/performances tactic premier, et leur SEO valeur est entirely downstream et non-deterministic. ne pas sell les internally as “ce aide 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: le Lien header et 103 Early Hints

Resource hints ne pas ont à actif dans votre HTML. Vous pouvez send les as an HTTP Link réponse header — Link: </hero.webp>; rel=preload; as=image — qui est comment serveur- et CDN-level implementations fonctionner. Le la plupart interesting version de ce est 103 Early Hints: a preliminary HTTP status que lets an edge (comme Cloudflare) send mis en cache preload/preconnect Link headers avant le origin serveur a même finished generating le complet réponse — giving le navigateur a head commencer on connections et récupère pendant que il waits. Je cover le 103 status itself dans mon Code d’état HTTPs guide, où Je décrire il as letting vous preload resources à aider LCP pour Core Web Vitals.

Erreurs fréquentes

«- Preloading too many resources — the cardinal sin; it creates bandwidth contention and can make the page slower overall. » (Traduction) (Résumé en français de la section soixante et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Preloading things the browser already finds early — an early <img> in the HTML doesn’t need preloading; you’re just spending a request slot. » (Traduction) (Résumé en français de la section soixante et un, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Missing as on preload — wrong priority and often a double download. » (Traduction) (Résumé en français de la section soixante et un, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Missing crossorigin on font preload/preconnect — a mismatched cache entry means the font downloads twice. » (Traduction) (Résumé en français de la section soixante et un, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Stale, unused preconnect tags — left behind after you removed the third-party script they were for, holding connections open for 10 seconds before the browser gives up. » (Traduction) (Résumé en français de la section soixante et un, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Ignoring the cost beyond your own page — unused hints don’t just waste your own bandwidth; they consume sockets and server/third-party capacity, and dns-prefetch/preconnect can reveal likely destinations to network observers. Browsers may also ignore, cancel, or limit hints under Save-Data, low-power, or support constraints — prefetch in particular is treated as optional and skipped for reduced-data users, so don’t assume a hint you shipped is actually running for every visitor.

» (Traduction) (Résumé en français de la section soixante et un, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.)

«## How to test and audit » (Traduction) (Résumé en français de la section soixante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- Lighthouse / PageSpeed Insights — the “Preconnect to required origins” audit flags missing preconnects on key requests; treat it as a prompt to add a targeted one, not to carpet-bomb. » (Traduction) (Résumé en français de la section soixante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Chrome DevTools → Network panel — the Priority column shows what the browser actually prioritized, and you can spot preloaded resources fetching twice (the as/crossorigin bugs). » (Traduction) (Résumé en français de la section soixante-trois, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Check for unused preconnects — if a preconnected origin never appears as an actual request, remove the hint. » (Traduction) (Résumé en français de la section soixante-trois, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

«For the metrics these all feed, see Core Web Vitals and Largest Contentful Paint; the web performance tools article covers the measurement stack in depth. » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

AI summary

A condensed prendre on the Avancé version:

«- Main hints, increasing browser cost: dns-prefetch (DNS only) → preconnect (DNS + TCP + TLS) → preload (mandatory fetch of a late-discovered current-page resource) → prefetch (lowest-priority speculative fetch for a future navigation). modulepreload is preload’s sibling for JS modules. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- preload is the only mandatory one — the browser must fetch it if it processes the tag — but that’s not the same as “automatically high priority.” Default priority still depends on resource type and browser; fetchpriority is the separate hint for actually raising it. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Attribute matching matters: as is required on preload (or you get wrong priority + a double download); crossorigin is required for fonts; the eventual request also has to match on URL, type/media, credentials, integrity, referrerpolicy, and (for responsive images) imagesrcset/ imagesizes — mismatches cause duplicate or wrong-candidate fetches. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Overuse is the dominant failure mode — “if everything is high priority, nothing is.” Unused hints also cost sockets/server capacity, can reveal likely destinations, and may be ignored under Save-Data constraints. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- LCP image combo: preload + fetchpriority="high" is Google’s current recommendation. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Core Web Vitals mapping: dns-prefetch/preconnect cut connection latency (LCP/FCP); preload acts on LCP/FCP directly; prefetch only helps the next page. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- SEO reality (Gary Illyes, Feb 2026): resource hints don’t help Googlebot crawl or index — Google’s infrastructure lacks the browser latency these solve. Value is indirect: hints → faster UX → Core Web Vitals → one of several ranking signals, not a guarantee. Bing has no hint-specific guidance. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.) «- Delivery: HTML <link> or HTTP Link header; 103 Early Hints lets a CDN push cached hints before the origin responds. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie huit : le texte source est conservé pour vérification lors de la relecture francophone.)

Documentation officielle

Primary-source guidance depuis Google (Bing a aucun resource-hint-spécifique docs).

Google — web.dev

• Assist le navigateur avec resource hints — le Apprendre Performances module covering tout four hints et quand à utiliser chaque.
• Establish network connections early — preconnect et dns-prefetch, le 10-deuxième unused-connection règle, et le crossorigin requirement pour fonts.
• Preload critical assets à améliorer chargement speed — le as attribut, late-discovered fonts/images, et le “if everything is prioritized, nothing is” warning.
• Optimize LCP — recommends pairing preload avec fetchpriority="high" pour le LCP image.
• Prefetch resources à speed up future navigations — prefetch priority, HTTP mise en cache behavior, et le Speculation Règles API as son successor.

Google — Chrome / Lighthouse & Recherche

• Preconnect à requis origins (Lighthouse audit) — ce que le audit flags et pourquoi unused preconnects waste CPU.
• Understanding Core Web Vitals et Recherche Google résultats — confirms CWV est partie de lune page experience classement signal (le indirect raison hints matter pour le SEO).
• Understanding page experience dans la recherche Google résultats — confirms il y a aucun unique page-experience signal et bon Core Web Vitals scores ne pas 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 » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«On-the-record statements. Each link is a deep link to the quoted passage. » (Traduction) (Résumé en français de la section quatre-vingt-un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Gary Illyes, Google — why the crawler ignores resource hints (Search Off the Record, Feb 2026) » (Traduction) (Résumé en français de la section quatre-vingt-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “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 » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Same with preload. If we are not synchronous then we don’t particularly need to look at preload.” — Gary Illyes. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

Patrick Stox — resource hints pour LCP (Ahrefs)

• “DNS-prefetch has better support than preconnect.” — depuis mon Plus grand affichage de contenu guide.
• “Early Hints don’t work on all browsers, so you may also want to preload the image.” — depuis le 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

Attribut règles

• as — requis on preload (type + priority signal + cache matching).
• crossorigin — requis pour fonts on les deux preload et preconnect.
• type — aide le navigateur skip formats il ne peut pas utiliser (e.g. type="image/webp").
• Match le consumer, pas simplement le balise — URL, as/destination, type/media, credentials, integrity, referrerpolicy, et (pour responsive images) imagesrcset/imagesizes tout ont à line up or vous obtenir a duplicate/incorrect récupérer au lieu de a enregistré un.
• preload’s par défaut priority est resource/navigateur-dependent, pas automatiquement “élevé” — utiliser fetchpriority à en réalité raise il.

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 et 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.” Wrong — preload is mandatory and high-priority for the current page; prefetch is speculative and lowest-priority for a future page. Mixing them up (using preload where you meant prefetch) makes the current page slower by competing with critical CSS/JS. Do instead: preload for now, prefetch for next. » (Traduction) (Résumé en français de la section cent quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Myth: “Vous ne pas besoin le as attribut; le navigateur figures il out.” Incorrect — sans as, le navigateur treats la requête comme a générique XHR, ne peut pas définir le correct priority, et souvent downloads le resource twice. Faire à 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 le complet handshake, qui coûts le navigateur plus et a historically avait narrower prise en charge. Faire à la place: preconnect seulement votre quelques la plupart critical origins; utiliser dns-prefetch pour le rest.

«Myth: “Adding preconnect automatically means fonts will use that connection.” Wrong without crossorigin — omit it and the browser opens a second connection for the font anyway. Do instead: add crossorigin to any preconnect/preload you’ll use for fonts or other CORS fetches. » (Traduction) (Résumé en français de la section cent sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Avant / après

Concrete corrections que suivre depuis le guidance ci-dessus.

1. LCP image découvert aussi late

• Avant: le hero image est définir via a CSS background-image, donc le navigateur ne fait pas trouver il jusqu’à il a downloaded et parsed le stylesheet. LCP est lent.
• Après: <lien rel="preload" fetchpriority="élevé" as="image" href="/hero.webp" type="image/webp"> in the <head> commence le récupérer alongside le stylesheet — Google’s recommended LCP combo.

2. Font downloading twice

• Avant: <link rel="preload" as="font" href="/inter.woff2"> — aucun crossorigin. Le preload cache entry ne fait pas match le CORS récupérer le CSS triggers, donc le font downloads twice.
• Après: ajouter type="font/woff2" et crossorigin; un download, surfaced early.

3. Over-preloaded page

• Avant: a dozen preload balises pour scripts, styles, et images “to be safe.” Ils contend pour bandwidth et lune page est slower que avec none.
• Après: garder preload pour le LCP image et un rendre-critical font; drop le rest. Faster overall, parce que maintenant le important choses en réalité obtenir priority.

4. Stale preconnect après a cleanup

• Avant: a tiers chat widget était supprimé, mais son <link rel="preconnect" href="https://chat.vendor.com"> était left behind. Le navigateur opens le connection, holds il ~10 seconds, et closes il unused — wasted handshake capacity.
• Après: delete le orphaned preconnect. Fewer competing connections à le critical moment.

«## Audit a proposed resource hint » (Traduction) (Résumé en français de la section cent dix-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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 depuis 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

• Le candidate solves a mesuré discovery or connection delay dans a cold-charger waterfall.
• preload targets a resource requis par le actuel page; prefetch targets a probable future navigation.
• Chaque preload a le correct as valeur et an appropriate type où utile.
• Font preloads et preconnects inclure le matching crossorigin mode.
• Le LCP image n’est pas les deux preloaded incorrectly et découvert via a competing source que causes a duplicate requête.
• Preconnect est limited à le quelques origins utilisé early dans le charger.
• Aucun hint remains pour a supprimé vendor, widget, font, or asset chemin.
• Lent-network testing montre critical resources déplacer précédent sans delaying higher-valeur fonctionner.
• A cold-charger Network trace montre aucun duplicate récupère.
• Le modifier est décrit as a utilisateur-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.

«## Tools for choosing and verifying hints » (Traduction) (Résumé en français de la section cent trente-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- Chrome DevTools Network panel: enable Priority and Initiator, disable cache, and inspect whether the target begins earlier or downloads twice. » (Traduction) (Résumé en français de la section cent quarante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Chrome DevTools Performance panel: connect the request-timing change to FCP or LCP rather than declaring success from markup alone. » (Traduction) (Résumé en français de la section cent quarante, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Lighthouse / PageSpeed Insights: use preconnect and LCP discovery diagnostics as candidate generators, then confirm each suggestion in the waterfall. » (Traduction) (Résumé en français de la section cent quarante, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Response headers view: verify HTTP Link headers and 103 Early Hints when the hint comes from the server or CDN rather than the HTML. » (Traduction) (Résumé en français de la section cent quarante, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- A slow-network test profile: resource contention and over-preloading are easier to see under constrained bandwidth than on a warm, fast local connection. » (Traduction) (Résumé en français de la section cent quarante, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

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 résultat: Le prévu connection or requête begins précédent, le resource est consumed une fois, et le associated FCP/LCP timing ne fait pas regress.

Échec interpretation: Le navigateur déjà découvert il early, le attributs ne faites pas match le consuming requête, or le hint competes avec plus important fonctionner.

«Monitoring window: Compare repeated mobile and desktop lab runs immediately, then watch the relevant field vital through its reporting window. » (Traduction) (Résumé en français de la section cent quarante-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Rollback trigger: Remove the hint if it causes duplicate fetches, remains unused, or produces a repeatable regression in the critical metric. » (Traduction) (Résumé en français de la section cent quarante-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Hint hygiene after deployment » (Traduction) (Résumé en français de la section cent quarante-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Test to run: Inventory all deployed resource hints and match each one to an actual request in a cold load. » (Traduction) (Résumé en français de la section cent cinquante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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, et 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, et prefetch. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

Mon connexe writing

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

Mon speaking

• qu’est-ce que Suivant pour Page Experience (SMX Suivant 2021) — mon deck avec preconnect/dns-prefetch et preload-pour-images exemples.

Depuis autour le industry

• web.dev — Assist le navigateur avec resource hints — Google’s canonical overview de tout four hints.
• web.dev — Establish network connections early — preconnect et dns-prefetch dans depth.
• web.dev — Prefetch resources à speed up future navigations — prefetch et le Speculation Règles API.
• Chrome / Lighthouse — Preconnect à requis origins — le audit et son cautions.
• DebugBear — Navigateur Resource Hints: preload, prefetch, et preconnect — a thorough, testing-driven walkthrough.
• Cloudflare — Early Hints et Cloudflare Docs — Early Hints — comment 103 Early Hints delivers mis en cache hints depuis le edge.
• KeyCDN — Resource Hints: Ce que est Preload, Prefetch, et Preconnect? — a concise référence.
• MDN — En utilisant dns-prefetch — le spec-level référence.

Journal des modifications