Panduan Resource Hints

TL;DR — Resource hints tell browser untuk mulai beberapa network berfungsi early — sebelum ini akan biasanya figure out ini perlu untuk. ada four: dns-prefetch (look up sebuah domain’s address early), preconnect (open sebuah connection early), preload (fetch sesuatu saat ini halaman perlu now, like Anda big hero image), dan prefetch (diam-diam grab sesuatu berikutnya halaman akan probably perlu). digunakan sparingly mereka speed up Anda halaman. digunakan di mana-mana mereka slow ini down.

Apa resource hints adalah

Ketika sebuah browser memuat Anda halaman, ini discovers apa ini perlu sebagai ini goes. ini membaca HTML, menemukan sebuah CSS file, downloads ini, parses ini, dan hanya lalu realizes ada sebuah font atau sebuah background image ini memiliki untuk fetch. itu “hanya lalu” (terjemahan) “hanya lalu” adalah wasted time.

Resource hints let Anda skip menunggu. mereka’re little instructions Anda put di halaman (atau di server’s respons) itu say: mulai ini now, jangan tunggu untuk menemukan ini. Four dari them melakukan sebagian besar dari berfungsi:

• dns-prefetch — “look up ini domain’s address ahead dari time.” (terjemahan) “look up ini domain’s address ahead dari time.” Cheapest, smallest head mulai.
• preconnect — “sebenarnya open itu connection untuk ini domain ahead dari time” (terjemahan) “sebenarnya open connection untuk ini domain ahead dari time” (address lookup plus secure handshake). Bigger head mulai, lebih berfungsi untuk browser, so gunakan ini hanya untuk connections itu benar-benar penting.
• preload — “fetch ini specific file now karena itu saat ini halaman definitely memerlukan it.” (terjemahan) “fetch ini spesifik file now karena saat ini halaman definitely perlu ini.” Best untuk hal like Anda main image atau sebuah font.
• prefetch — “diam-diam grab ini di itu background karena itu user akan probably go untuk itu halaman berikutnya.” (terjemahan) “diam-diam grab ini di background karena pengguna akan probably go untuk itu halaman berikutnya.”

golden aturan: jangan overdo ini

paling umum mistake adalah treating hints like sebuah magic “membuat it lebih cepat” (terjemahan) “membuat ini lebih cepat” button dan menambahkan sebuah bunch dari them. ini backfires. jika Anda tell browser semuanya adalah urgent, lalu tidak ada apa pun adalah — mereka semua fight untuk yang sama bandwidth dan Anda halaman dapat end up lebih lambat daripada sebelum. sebuah pendek, targeted list dari hints beats sebuah panjang satu setiap time.

melakukan ini help my Google rankings?

«Not directly, and it’s worth being clear about this. Google’s crawler doesn’t benefit from your resource hints — it fetches pages differently than a real browser does. What resource hints do is make the page faster for actual visitors, and that feeds into Core Web Vitals, which Google’s ranking systems use as one signal among several — Google is explicit that there’s no single page-experience signal, and good Core Web Vitals scores don’t guarantee a top ranking. So the chain is: hints → faster experience → better Core Web Vitals → one input among many into ranking. Not “Google reads this tag and ranks you higher.” » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua belas, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

ingin syntax, as dan crossorigin gotchas, perbandingan table, dan penuh Core Web Vitals mapping? Switch untuk Advanced tab.

«> TL;DR — The main resource hints form a spectrum of browser cost:

dns-prefetch (DNS lookup only) → preconnect (DNS + TCP + TLS) → preload (a mandatory fetch of a specific, late-discovered resource) → prefetch (lowest-priority speculative fetch for a future navigation). modulepreload is preload’s sibling for JS modules. preload is the only one the browser is obligated to fetch — that’s different from saying it’s automatically high priority; default priority still depends on the resource type, and fetchpriority is a separate hint for raising it. The as attribute is required on preload; crossorigin is required for fonts and other anonymous-mode fetches, or the browser downloads the resource twice. Overuse is the dominant failure mode. And per Gary Illyes (Feb 2026), none of this helps Googlebot — the SEO value is entirely indirect, through Core Web Vitals, which is one of several ranking signals, not a deterministic one. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam belas, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

«## A spectrum of browser “cost” » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan belas, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

paling bersih mental model untuk resource hints adalah untuk line them up oleh bagaimana banyak berfungsi Anda’re asking browser untuk melakukan up front:

«1. dns-prefetch — resolve a hostname to an IP. Cheapest. 2. preconnect — DNS lookup plus the TCP handshake plus TLS negotiation for HTTPS. A full open connection, ready to use. 3. preload — go actually fetch a specific resource, now. The browser must process the fetch, but that doesn’t automatically make it high priority — more on that below. 4. modulepreload — preload’s sibling for JavaScript modules; fetches the module into the browser’s module map using module-script rules rather than a generic fetch. 5. prefetch — go fetch a specific resource, but at the lowest priority, for a page the user hasn’t navigated to yet. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

mereka go di satu dari dua places: sebuah <link> element di <head>, atau sebuah HTTP Link respons header (lebih pada header path, dan 103 Early Hints, di bawah). None dari ini adalah document-tingkat Speculation aturan API — itu’s sebuah terpisah mechanism untuk prerendering/prefetching seluruh navigations, covered di prefetch bagian di bawah.

dns-prefetch

«dns-prefetch performs just the DNS lookup for a cross-origin server ahead of time — it doesn’t open a connection. That makes it the cheapest hint and a sensible default for the many lower-priority third-party domains a page touches (analytics, tag managers, minor widgets). In my own Largest Contentful Paint guide I make the practical point that “DNS-prefetch has better support than preconnect” — so it’s also a reasonable fallback for browsers where preconnect isn’t honored. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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

preconnect

preconnect goes further: ini opens seluruh connection — DNS, TCP, dan (untuk HTTPS) TLS handshake — so itu oleh time browser perlu resource, pipe adalah sudah warm. itu’s sebuah bigger win daripada dns-prefetch, tetapi ini adalah juga lebih expensive untuk browser, yang adalah mengapa ini muncul dengan dua penting caveats:

• Reserve ini untuk Anda sebagian besar critical cross-origin connections. sebuah handful (Anda font host, Anda image CDN, sebuah critical script origin) — tidak semuanya. Google’s Lighthouse “Preconnect to required origins” (terjemahan) “Preconnect untuk diperlukan origins” audit dan web.dev keduanya warn itu unnecessary preconnects delay lainnya penting berfungsi.
• sebuah unused connection adalah wasted berfungsi. browser close sebuah connection itu tidak digunakan di dalam tentang 10 seconds, so sebuah preconnect untuk sesuatu Anda tidak sebenarnya fetch soon hanya burns handshake capacity untuk tidak ada apa pun.

untuk fonts, preconnect perlu crossorigin attribute — fonts adalah selalu fetched di anonymous (CORS) mode, dan tanpa ini browser opens sebuah kedua connection anyway, defeating poin.

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

preload

preload adalah satu browser adalah obligated untuk execute — jika ini memproses tag, ini harus mulai fetch untuk sebuah resource saat ini halaman definitely perlu tetapi akan jika tidak menemukan late. itu’s sebuah statement tentang ketika fetch dimulai, tidak secara otomatis tentang priority: default priority sebuah preloaded resource mendapatkan masih bergantung pada resource jenis dan browser (web.dev adalah jelas itu images, misalnya, stay rendah priority oleh default bahkan ketika preloaded). jika Anda ingin sebenarnya raise sebuah resource’s priority, itu’s sebuah terpisah, jelas hint — fetchpriority — tidak sesuatu preload melakukan pada -nya own. classic candidates untuk preload:

• Fonts referenced di dalam sebuah CSS file — browser tidak know font ada until ini downloads dan parses CSS, so preload surfaces ini sebelumnya.
• ** LCP (hero) image**, terutama satu set melalui CSS atau srcset itu tidak sebuah plain early <img> di HTML.
• Critical, late-ditemukan JavaScript atau CSS.

Dua attributes membuat atau break ini:

• as adalah diperlukan. ini tells browser apa jenis dari resource ini adalah so ini dapat assign right priority dan match cache entry. Omit ini dan browser memperlakukan permintaan like sebuah generic XHR — wrong priority, dan sering sebuah duplicate download.
• crossorigin untuk fonts — sama aturan sebagai preconnect; miss ini dan font downloads twice.

Lebih umumnya, sebuah preload hanya mendapatkan reused jika eventual permintaan matches ini: sama URL, sama as/destination, yang sama type atau media condition, matching crossorigin/credentials mode, dan — di mana mereka apply — matching integrity dan referrerpolicy. untuk sebuah responsive image preload, itu juga berarti menggunakan imagesrcset/imagesizes itu mirror srcset/sizes browser akan sebenarnya pick, tidak sebuah single unconditional fallback URL. Mendapatkan apa pun dari ini out dari sync dan browser either dapat’t reuse preload (duplicate fetch) atau fetches wrong 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.” » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

<!-- 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 applies hardest here: if everything is preloaded at high priority, effectively nothing is. web.dev is explicit that excessive preloads cause bandwidth contention, and it hits hardest on slow networks. Preload the two or three genuinely late-discovered, genuinely critical resources — no more. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh delapan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

modulepreload

modulepreload adalah preload’s padanan untuk JavaScript modules. alih-alih sebuah generic resource fetch, ini menggunakan module-script fetch aturan dan puts hasil straight ke browser’s module map — so ketika module adalah kemudian imported, browser sudah memiliki ini. Depending pada browser, ini dapat juga go ahead dan fetch module’s static imports. mendukung dan bagaimana deep itu dependency-fetching goes keduanya vary oleh browser, so test sebenarnya perilaku alih-alih assuming ini matches preload.

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

prefetch

prefetch adalah odd satu out: ini adalah tidak tentang saat ini halaman di semua. ini adalah sebuah rendah-priority, speculative fetch untuk sebuah resource sebuah future navigation akan mungkin perlu — langkah berikutnya di sebuah checkout, artikel sebuah pengguna adalah tentang untuk click. Karena ini berjalan di lowest priority, ini tidak steal bandwidth dari saat ini halaman’s critical resources, dan prefetched files land di HTTP cache (jika mereka’re cacheable) ready untuk berikutnya navigation.

trade-off: jika pengguna tidak pernah goes di sana, Anda’ve spent bytes untuk tidak ada apa pun — so apply ini thoughtfully dan hindari ini pada slow atau metered connections.

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

Looking forward, Speculation aturan API adalah modern successor untuk prefetch untuk predicting sama-situs navigations; web.dev notes ini menangani cases plain prefetch dapat’t (like non-cacheable navigations) dan behaves lebih consistently di seluruh origins. prefetch tetap berguna dan lebih broadly didukung di meantime.

«## Preload vs. prefetch vs. preconnect vs. dns-prefetch » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

«| 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 | » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh delapan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Resource hints dan Core Web Vitals

Di sini’s bagian SEOs sebenarnya care tentang — yang hint moves yang metric:

• dns-prefetch / preconnect shave connection latency, yang menampilkan up sebagai sebuah lebih cepat mulai untuk memuat Anda critical resources — feeding LCP dan, sebelum ini, FCP.
• preload acts pada LCP dan FCP sebagian besar secara langsung oleh starting fetch dari LCP image atau sebuah render-critical font/stylesheet sebelumnya.
• prefetch tidak touch saat ini halaman’s Core Web Vitals di semua — ini improves berikutnya halaman’s LCP/FCP oleh memiliki -nya resources sudah cached.

None dari ini secara langsung memengaruhi INP atau CLS, though getting fonts di sebelumnya (melalui preload) dapat indirectly reduce layout shift dari font swaps — itu’s benar-benar sebuah font memuat topic, dan render-blocking resources adalah sibling artikel pada fetch-order side dari yang sama masalah.

melakukan resource hints help Google crawl atau indeks my situs?

Tidak — dan ini adalah single sebagian besar penting nuance untuk mendapatkan right, karena sebagian besar konten pada ini topic adalah vague tentang ini.

«In a February 2026 Search Off the Record episode, Google’s Gary Illyes explained why Googlebot largely ignores these hints: they solve browser and network latency problems that Google’s own crawling infrastructure doesn’t have. As reported by Search Engine Journal, Illyes said “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.” Jump to quote He made the same point about preload — “Same with preload. If we are not synchronous then we don’t particularly need to look at preload.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh lima, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

So correct causal chain adalah: resource hints → lebih cepat nyata-pengguna experience → better Core Web Vitals → satu dari several sinyal Google’s peringkat sistem gunakan. Google’s own pengalaman halaman documentation adalah jelas itu ada Tidak single halaman-experience sinyal, itu Core Web Vitals adalah digunakan oleh peringkat sistem alongside others, dan itu baik CWV scores jangan jaminan sebuah top peringkat — relevance masih wins di atas pengalaman halaman. So ini adalah tidak tidak ada apa pun — tetapi resource hints adalah sebuah UX/performa tactic pertama, dan mereka SEO nilai adalah entirely downstream dan non-deterministic. jangan sell them internally sebagai “this helps Google read the page.” (terjemahan) “ini helps Google baca halaman.”

Bing, untuk apa ini adalah worth, memiliki published Tidak hint-spesifik guidance di semua — -nya webmaster guidance references situs speed generically. browser-tingkat benefits (lebih cepat memuat, better vitals) apply yang sama regardless dari mesin pencari, so ada Tidak terpisah “Bing angle” (terjemahan) “Bing angle” untuk mengoptimalkan untuk di sini.

Delivering hints di atas HTTP: tautan header dan 103 Early Hints

Resource hints jangan memiliki untuk langsung di Anda HTML. Anda dapat kirim them sebagai sebuah HTTP Link respons header — Link: </hero.webp>; rel=preload; as=image — yang adalah bagaimana server- dan CDN-tingkat implementations berfungsi. paling interesting versi dari ini adalah 103 Early Hints: sebuah preliminary HTTP status itu lets sebuah edge (like Cloudflare) kirim cached preload/preconnect Link headers sebelum origin server memiliki bahkan finished generating penuh respons — giving browser sebuah head mulai pada connections dan fetches sementara ini menunggu. I cover 103 status itself di my HTTP kode status guide, di mana I deskripsikan ini sebagai letting Anda preload resources untuk help LCP untuk Core Web Vitals.

umum mistakes

• Preloading too banyak resources — cardinal sin; ini membuat bandwidth contention dan dapat membuat halaman lebih lambat overall.
• Preloading hal browser sudah menemukan early — sebuah early <img> di HTML tidak perlu preloading; Anda’re hanya spending sebuah permintaan slot.
• Missing as pada preload — wrong priority dan sering sebuah double download.
• Missing crossorigin pada font preload/preconnect — sebuah mismatched cache entry berarti font downloads twice.
• Stale, unused preconnect tags — left behind setelah Anda dihapus ketiga-party script mereka adalah untuk, holding connections open untuk 10 seconds sebelum browser memberikan up.
• Ignoring cost beyond Anda own halaman — unused hints jangan hanya waste Anda own bandwidth; mereka consume sockets dan server/ketiga-party capacity, dan dns-prefetch/preconnect dapat reveal mungkin destinations untuk network observers. browser dapat juga ignore, cancel, atau limit hints di bawah Save-data, rendah-power, atau mendukung constraints — prefetch di particular adalah treated sebagai opsional dan skipped untuk reduced-data pengguna, so jangan assume sebuah hint Anda shipped adalah sebenarnya berjalan untuk setiap pengunjung.

cara test dan audit

• Lighthouse / PageSpeed Insights — “Preconnect to required origins” (terjemahan) “Preconnect untuk diperlukan origins” audit flags missing preconnects pada key permintaan; treat ini sebagai sebuah prompt untuk tambahkan sebuah targeted satu, tidak untuk carpet-bomb.
• Chrome DevTools → Network panel — Priority column menampilkan apa browser sebenarnya prioritized, dan Anda dapat spot preloaded resources fetching twice ( as/crossorigin bugs).
• periksa untuk unused preconnects — jika sebuah preconnected origin tidak pernah muncul sebagai sebuah sebenarnya permintaan, hapus hint.

untuk metrics ini semua feed, see Core Web Vitals dan Largest Contentful Paint; web performa alat artikel covers pengukuran stack secara mendalam.

AI summary

sebuah condensed take pada Advanced versi:

«- 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.

• 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.
• 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.
• 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.
• 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 directly; prefetch only helps the next page. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- 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.
• Delivery: HTML <link> or HTTP Link header; 103 Early Hints lets a CDN push cached hints before the origin responds. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh sembilan, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Dokumentasi resmi

Utama-sumber guidance dari Google (Bing memiliki Tidak resource-hint-spesifik docs).

Google — web.dev

• Assist browser dengan resource hints — Learn performa module covering semua four hints dan ketika untuk gunakan setiap.
• Establish network connections early — preconnect dan dns-prefetch, 10-kedua unused-connection aturan, dan crossorigin requirement untuk fonts.
• Preload critical assets untuk meningkatkan memuat speed — as attribute, late-ditemukan fonts/images, dan “if everything is prioritized, nothing is” (terjemahan) “jika semuanya adalah prioritized, tidak ada apa pun adalah” warning.
• mengoptimalkan LCP — recommends pairing preload dengan fetchpriority="high" untuk LCP image.
• Prefetch resources untuk speed up future navigations — prefetch priority, HTTP caching perilaku, dan Speculation aturan API sebagai -nya successor.

Google — Chrome / Lighthouse & Penelusuran

• Preconnect untuk diperlukan origins (Lighthouse audit) — apa audit flags dan mengapa unused preconnects waste CPU.
• Understanding Core Web Vitals dan Google hasil pencarian — mengonfirmasi CWV adalah bagian dari pengalaman halaman sinyal peringkat ( indirect alasan hints penting untuk SEO).
• Understanding pengalaman halaman di Google hasil pencarian — mengonfirmasi ada Tidak single halaman-experience sinyal dan baik Core Web Vitals scores jangan jaminan top rankings.

Bing / Microsoft

• Bing Webmaster Guidelines — references situs performa generically; Tidak hint-spesifik guidance published.

Reference

• MDN — menggunakan dns-prefetch.

Quotes dari sumber

pada—record statements. setiap tautan adalah sebuah deep tautan untuk quoted passage.

Gary Illyes, Google — mengapa crawler ignores resource hints (Penelusuran Off 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 » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Patrick Stox — resource hints untuk LCP (Ahrefs)

«- “DNS-prefetch has better support than preconnect.” — from my Largest Contentful Paint guide. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “Early Hints don’t work on all browsers, so you may also want to preload the image.” — from the same LCP guide. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh enam, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Resource hints — cheat sheet

Yang hint, ketika

«| You want to… | Use | Note | | --- | --- | --- | | Warm up connections to your few most critical cross-origin hosts | preconnect | Add crossorigin for fonts; max a handful | | Warm up DNS for many lower-priority third-party domains | dns-prefetch | Cheapest; broader support than preconnect | | Fetch a late-discovered current-page resource early (LCP image, font in CSS) | preload | as required; not automatically high priority — pair with fetchpriority="high" for the LCP image | | Fetch a late-discovered JS module | modulepreload | Uses module-script fetch rules; may also fetch static imports depending on the browser | | Grab resources for the next page a user will likely visit | prefetch | Lowest priority; consider the Speculation Rules API instead | » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh satu, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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

header HTTP equivalent (untuk CDN / 103 Early Hints)

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

«Attribute rules

• as — required on preload (type + priority signal + cache matching).
• crossorigin — required for fonts on both preload and preconnect.
• type — helps the browser skip formats it can’t use (e.g. type="image/webp").
• Match the consumer, not just the tag — URL, as/destination, type/media, credentials, integrity, referrerpolicy, and (for responsive images) imagesrcset/imagesizes all have to line up or you get a duplicate/wrong fetch instead of a saved one.
• preload’s default priority is resource/browser-dependent, not automatically “high” — use fetchpriority to actually raise it. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Core Web Vitals mapping

• dns-prefetch / preconnect → connection latency → LCP / FCP
• preload → LCP / FCP secara langsung
• prefetch → berikutnya halaman’s LCP/FCP hanya (tidak saat ini-halaman CWV)

Resource hint myths dan mistakes

setiap satu: mengapa ini adalah wrong, dan apa untuk melakukan alih-alih.

Myth: “Resource hints help Google crawl or index my page faster.” (terjemahan) “Resource hints help Google crawl atau indeks my halaman lebih cepat.” Wrong — per Gary Illyes (Feb 2026), Google’s crawling infrastructure tidak memiliki browser-side latency ini hints solve; ini resolves DNS internally dan fetches resources melalui -nya own pipeline. melakukan alih-alih: treat hints sebagai sebuah nyata-pengguna performa tactic. satu-satunya SEO payoff adalah indirect, melalui Core Web Vitals.

«Myth: “More preloads = more speed.” Wrong — preloading a long list creates bandwidth contention, and the page can end up slower. “If everything is high priority, nothing is.” Do instead: preload only your two or three genuinely late-discovered, genuinely critical resources. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

«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. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Myth: “Anda jangan perlu itu as attribute; itu browser figures it out.” (terjemahan) “Anda tidak perlu tidak terdefinisi attribute; browser figures ini out.” Wrong — tanpa as, browser memperlakukan permintaan like sebuah generic XHR, dapat’t atur right priority, dan sering downloads resource twice. melakukan alih-alih: selalu set as (e.g. as="image", as="font", as="style").

Myth: “Preconnect adalah selalu better daripada dns-prefetch.” (terjemahan) “Preconnect adalah selalu better daripada dns-prefetch.” Tidak quite — preconnect melakukan penuh handshake, yang costs browser lebih dan memiliki secara historis memiliki lebih sempit mendukung. melakukan alih-alih: preconnect hanya Anda sedikit sebagian besar critical origins; gunakan dns-prefetch untuk rest.

Myth: “Adding preconnect secara otomatis berarti fonts akan gunakan itu connection.” (terjemahan) “menambahkan preconnect secara otomatis berarti fonts akan gunakan itu connection.” Wrong tanpa crossorigin — omit ini dan browser opens sebuah kedua connection untuk font anyway. melakukan alih-alih: tambahkan crossorigin untuk apa pun preconnect/preload Anda’ll gunakan untuk fonts atau lainnya CORS fetches.

sebelum / setelah

Concrete memperbaiki itu ikuti dari guidance di atas.

1. LCP image ditemukan too late

• sebelum: hero image adalah set melalui sebuah CSS background-image, so browser tidak temukan ini until ini memiliki downloaded dan parsed stylesheet. LCP adalah slow.
• setelah: <link rel="preload" fetchpriority="high" sebagai="image" href="/hero.webp" jenis="image/webp"> di <head> dimulai fetch alongside stylesheet — Google’s recommended LCP combo.

2. Font downloading twice

• sebelum: <link rel="preload" as="font" href="/inter.woff2"> — Tidak crossorigin. preload cache entry tidak match CORS fetch CSS triggers, so font downloads twice.
• setelah: tambahkan type="font/woff2" dan crossorigin; satu download, surfaced early.

3. di atas-preloaded halaman

• sebelum: sebuah dozen preload tags untuk scripts, styles, dan images “untuk menjadi safe.” (terjemahan) “untuk menjadi safe.” mereka contend untuk bandwidth dan halaman adalah lebih lambat daripada dengan none.
• setelah: pertahankan preload untuk LCP image dan satu render-critical font; drop rest. Lebih cepat overall, karena now penting hal sebenarnya mendapatkan priority.

4. Stale preconnect setelah sebuah cleanup

• sebelum: sebuah ketiga-party chat widget adalah dihapus, tetapi -nya <link rel="preconnect" href="https://chat.vendor.com"> adalah left behind. browser opens connection, holds ini ~10 seconds, dan closes ini unused — wasted handshake capacity.
• setelah: delete orphaned preconnect. Fewer competing connections di critical moment.

Audit sebuah 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 dari sebuah 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.

hapus 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 rilis checklist

«- [ ] The candidate solves a measured discovery or connection delay in a cold-load waterfall.

• preload targets a resource required by the current page; prefetch targets a likely future navigation.
• Every preload has the correct as value and an appropriate type where useful.
• Font preloads and preconnects include the matching crossorigin mode.
• The LCP image is not both preloaded incorrectly and discovered through a competing source that causes a duplicate request.
• Preconnect is limited to the few origins used early in the load.
• No hint remains for a removed vendor, widget, font, or asset path.
• Slow-network testing shows critical resources move earlier without delaying higher-value work.
• A cold-load Network trace shows no duplicate fetches.
• The change is described as a user-performance optimization, not a Googlebot crawling or indexing tactic. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus dua puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Inventory hints dan mereka attributes

Paste ini ke DevTools Console pada deployed halaman:

[...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)',
  }));

Review missing as nilai pada preloads dan missing CORS mode pada font permintaan; lainnya blank fields dapat menjadi valid untuk itu hint jenis.

temukan preloads itu fetched lebih daripada setelah

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;
  }, {});

apa pun count di atas satu deserves inspection untuk sebuah as, crossorigin, URL, atau cache-key mismatch. sebuah count dari satu melakukan tidak oleh itself prove itu hint ditingkatkan timing.

alat untuk choosing dan verifying hints

• Chrome DevTools Network panel: enable Priority dan Initiator, disable cache, dan inspect apakah target begins sebelumnya atau downloads twice.
• Chrome DevTools performa panel: connect permintaan-timing perubahan untuk FCP atau LCP alih-alih declaring success dari markup alone.
• Lighthouse / PageSpeed Insights: gunakan preconnect dan LCP penemuan diagnostics sebagai candidate generators, lalu konfirmasi setiap suggestion di waterfall.
• respons headers view: verify HTTP Link headers dan 103 Early Hints ketika hint muncul dari server atau CDN alih-alih HTML.
• sebuah slow-network test profile: resource contention dan di atas-preloading adalah easier untuk see di bawah constrained bandwidth daripada pada sebuah warm, fast local connection.

Critical-resource timing

Test untuk jalankan: Capture cocok cold-muat waterfalls sebelum dan setelah menambahkan satu preload atau preconnect untuk sebuah diukur critical resource.

Yang diharapkan hasil: yang dimaksud connection atau permintaan begins sebelumnya, resource adalah consumed setelah, dan associated FCP/LCP timing melakukan tidak regress.

Failure interpretation: browser sudah ditemukan ini early, attributes melakukan tidak match consuming permintaan, atau hint competes dengan lebih penting berfungsi.

Monitoring window: Bandingkan repeated mobile dan desktop lab berjalan immediately, lalu watch relevant field vital melalui -nya reporting window.

Rollback trigger: hapus hint jika ini penyebab duplicate fetches, tetap unused, atau produces sebuah repeatable regression di critical metric.

Hint hygiene setelah deployment

Test untuk jalankan: Inventory semua deployed resource hints dan match setiap satu untuk sebuah sebenarnya permintaan di sebuah cold muat.

Yang diharapkan hasil: setiap preconnect menyajikan sebuah origin digunakan early; setiap preload adalah consumed dengan matching permintaan attributes; speculative prefetches map untuk sebuah deliberate berikutnya-navigation aturan.

Failure interpretation: sebuah stale template atau vendor removal left unused berfungsi, atau sebuah URL/CORS/jenis mismatch mencegah reuse.

Monitoring window: Recheck setelah vendor, font, CDN, LCP-element, dan template perubahan.

Rollback trigger: hapus apa pun orphaned hint atau revert sebuah template perubahan itu mengirim tidak valid tautan headers atau breaks halaman’s resource fetches.

Uji pemahaman Anda: Resource Hints

Five quick pertanyaan pada preload, preconnect, dns-prefetch, dan prefetch. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

My related writing

• Apa adalah Largest Contentful Paint (LCP) & cara meningkatkan ini — my sebagian besar detailed treatment dari resource hints dalam praktik: early hints, preload, fetchpriority="high", dan preconnect/dns-prefetch untuk cross-origin resources.
• 11 jenis dari HTTP kode status & mereka SEO Impact — mencakup 103 Early Hints, HTTP-tingkat cara untuk deliver preload/preconnect.
• Beginner’s Guide untuk SEO teknis — di mana halaman performa fits di bigger picture.
• Google PageSpeed Insights untuk SEOs & Developers — alat itu surfaces “Preconnect to required origins” (terjemahan) “Preconnect untuk diperlukan origins” dan LCP recommendations.

My speaking

• apa Berikutnya untuk pengalaman halaman (SMX Berikutnya 2021) — my deck dengan preconnect/dns-prefetch dan preload-untuk-images contoh.

dari sekitar industry

• web.dev — Assist browser dengan resource hints — Google’s canonical overview dari semua four hints.
• web.dev — Establish network connections early — preconnect dan dns-prefetch secara mendalam.
• web.dev — Prefetch resources untuk speed up future navigations — prefetch dan Speculation aturan API.
• Chrome / Lighthouse — Preconnect untuk diperlukan origins — audit dan -nya cautions.
• DebugBear — browser Resource Hints: preload, prefetch, dan preconnect — sebuah thorough, testing-driven walkthrough.
• Cloudflare — Early Hints dan Cloudflare Docs — Early Hints — bagaimana 103 Early Hints delivers cached hints dari edge.
• KeyCDN — Resource Hints: Apa adalah Preload, Prefetch, dan Preconnect? — sebuah concise reference.
• MDN — menggunakan dns-prefetch — spec-tingkat reference.

Log perubahan