Panduan Resource Hints

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

What resource hints adalah

When sebuah browser memuat Anda halaman, ini discovers what ini perlu sebagai ini goes. ini reads HTML, menemukan sebuah CSS file, downloads ini, parses ini, dan hanya lalu realizes there’s sebuah font atau sebuah background image ini memiliki untuk fetch. itu “only then” (terjemahan) “hanya lalu” adalah wasted time.

Resource hints let Anda skip waiting. mereka’re little instructions Anda put di halaman (atau di server’s respons) itu say: start ini now, don’t wait untuk menemukan ini. Four dari them melakukan sebagian besar dari berfungsi:

• dns-prefetch — “look up this domain’s address ahead of time.” (terjemahan) “look up ini domain’s address ahead dari time.” Cheapest, smallest head start.
• preconnect — “actually open the connection to this domain ahead of time” (terjemahan) “actually open connection untuk ini domain ahead dari time” (address lookup plus secure handshake). Bigger head start, more berfungsi untuk browser, so gunakan ini hanya untuk connections itu really penting.
• preload — “fetch this specific file now because the current page definitely needs it.” (terjemahan) “fetch ini spesifik file now because saat ini halaman definitely perlu ini.” Best untuk things like Anda main image atau sebuah font.
• prefetch — “quietly grab this in the background because the user will probably go to that page next.” (terjemahan) “quietly grab ini di background because pengguna akan probably go untuk itu halaman next.”

golden aturan: don’t overdo ini

paling umum mistake adalah treating hints like sebuah magic “make it faster” (terjemahan) “membuat ini faster” button dan menambahkan sebuah bunch dari them. ini backfires. jika Anda tell browser everything adalah urgent, lalu nothing adalah — mereka semua fight untuk yang sama bandwidth dan Anda halaman dapat end up slower daripada sebelum. sebuah pendek, targeted list dari hints beats sebuah panjang one setiap time.

melakukan ini help my Google rankings?

Not directly, dan ini adalah worth menjadi jelas tentang ini. Google’s crawler doesn’t benefit dari Anda resource hints — ini fetches halaman differently daripada sebuah nyata browser melakukan. What resource hints melakukan adalah membuat halaman faster untuk actual pengunjung, dan itu feeds ke Core Web Vitals, which Google’s peringkat sistem gunakan sebagai one signal among several — Google adalah explicit itu there’s no single halaman-experience signal, dan baik Core Web Vitals scores don’t guarantee sebuah top peringkat. So chain adalah: hints → faster experience → better Core Web Vitals → one input among banyak ke peringkat. Not “Google reads this tag and ranks you higher.” (terjemahan) “Google reads ini tag dan peringkat Anda higher.”

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

TL;DR — main resource hints form sebuah spectrum dari browser cost: dns-prefetch (DNS lookup hanya) → preconnect (DNS + TCP + TLS) → preload (sebuah mandatory fetch dari sebuah spesifik, late-ditemukan resource) → prefetch (lowest-priority speculative fetch untuk sebuah future navigation). modulepreload adalah preload’s sibling untuk JS modules. preload adalah satu-satunya one browser adalah obligated untuk fetch — itu’s berbeda dari saying ini adalah automatically tinggi priority; default priority masih depends pada resource jenis, dan fetchpriority adalah sebuah separate hint untuk raising ini. as attribute adalah diperlukan pada preload; crossorigin adalah diperlukan untuk fonts dan lainnya anonymous-mode fetches, atau browser downloads resource twice. Overuse adalah dominant failure mode. dan per Gary Illyes (Feb 2026), none dari ini helps Googlebot — SEO nilai adalah entirely indirect, melalui Core Web Vitals, which adalah one dari several sinyal peringkat, not sebuah deterministic one.

sebuah spectrum dari browser “cost” (terjemahan) “cost”

cleanest mental model untuk resource hints adalah untuk line them up oleh how much berfungsi Anda’re asking browser untuk melakukan up front:

1. dns-prefetch — resolve sebuah hostname untuk sebuah IP. Cheapest.
2. preconnect — DNS lookup plus TCP handshake plus TLS negotiation untuk HTTPS. sebuah full open connection, ready untuk gunakan.
3. preload — go actually fetch sebuah spesifik resource, now. browser harus process fetch, tetapi itu doesn’t automatically membuat ini tinggi priority — more pada itu below.
4. modulepreload — preload’s sibling untuk JavaScript modules; fetches module ke browser’s module map menggunakan module-script aturan alih-alih sebuah generic fetch.
5. prefetch — go fetch sebuah spesifik resource, tetapi di lowest priority, untuk sebuah halaman pengguna hasn’t navigated untuk yet.

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

dns-prefetch

dns-prefetch performs hanya DNS lookup untuk sebuah cross-origin server ahead dari time — ini doesn’t open sebuah connection. itu membuat ini cheapest hint dan sebuah sensible default untuk banyak lower-priority ketiga-party domains sebuah halaman touches (analytics, tag managers, minor widgets). di my own Largest Contentful Paint guide I membuat practical poin itu “DNS-prefetch has better support than preconnect” (terjemahan) “DNS-prefetch memiliki better mendukung daripada preconnect” — so ini adalah juga sebuah reasonable fallback untuk browser where preconnect isn’t honored.

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

preconnect

preconnect goes further: ini opens whole 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 more expensive untuk browser, which adalah why ini comes dengan two penting caveats:

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

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

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

preload

preload adalah one browser adalah obligated untuk execute — jika ini processes tag, ini harus start fetch untuk sebuah resource saat ini halaman definitely perlu tetapi akan otherwise menemukan late. itu’s sebuah statement tentang when fetch starts, not automatically tentang priority: default priority sebuah preloaded resource gets masih depends pada resource jenis dan browser (web.dev adalah explicit itu images, misalnya, stay rendah priority oleh default bahkan when preloaded). jika Anda ingin actually raise sebuah resource’s priority, itu’s sebuah separate, explicit hint — fetchpriority — not something preload melakukan pada -nya own. classic candidates untuk preload:

• Fonts referenced inside sebuah CSS file — browser doesn’t know font exists until ini downloads dan parses CSS, so preload surfaces ini earlier.
• ** LCP (hero) image**, terutama one set via CSS atau srcset itu isn’t sebuah plain early <img> di HTML.
• Critical, late-ditemukan JavaScript atau CSS.

Two attributes membuat atau break ini:

• as adalah diperlukan. ini tells browser what jenis dari resource ini adalah so ini dapat assign right priority dan match cache entry. Omit ini dan browser treats 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.

More umumnya, sebuah preload hanya gets reused jika eventual permintaan matches ini: sama URL, sama as/destination, yang sama type atau media condition, matching crossorigin/credentials mode, dan — where mereka apply — matching integrity dan referrerpolicy. untuk sebuah responsive image preload, itu juga berarti menggunakan imagesrcset/imagesizes itu mirror srcset/sizes browser akan actually pick, not sebuah single unconditional fallback URL. Get apa pun dari ini out dari sync dan browser either dapat’t reuse preload (duplicate fetch) atau fetches wrong candidate.

untuk LCP image specifically, Google’s saat ini recommendation adalah untuk pair preload dengan fetchpriority="high" so fetch starts alongside stylesheet. ini adalah combo I describe di my LCP guide too — fetchpriority="high" gets image earliest, dan preloading adalah sebuah strong kedua signal, berguna because sebagai I note there, “Early Hints don’t work on all browsers, so you may also want to preload the image.” (terjemahan) “Early Hints don’t berfungsi pada semua browser, so Anda dapat juga ingin untuk preload 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>

overuse warning applies hardest here: jika everything adalah preloaded di tinggi priority, effectively nothing adalah. web.dev adalah explicit itu excessive preloads cause bandwidth contention, dan ini hits hardest pada slow networks. Preload two atau three genuinely late-ditemukan, genuinely critical resources — no more.

modulepreload

modulepreload adalah preload’s counterpart 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 when module adalah later imported, browser sudah memiliki ini. Depending pada browser, ini dapat juga go ahead dan fetch module’s static imports. mendukung dan how deep itu dependency-fetching goes both vary oleh browser, so test actual perilaku alih-alih assuming ini matches preload.

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

prefetch

prefetch adalah odd one out: ini adalah not 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. Because ini runs di lowest priority, ini doesn’t steal bandwidth dari saat ini halaman’s critical resources, dan prefetched files land di HTTP cache (jika mereka’re cacheable) ready untuk next navigation.

trade-off: jika pengguna tidak pernah goes there, Anda’ve spent bytes untuk nothing — 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 handles cases plain prefetch dapat’t (like non-cacheable navigations) dan behaves more consistently di seluruh origins. prefetch remains berguna dan more broadly didukung di meantime.

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

Resource hints dan Core Web Vitals

Here’s bagian SEOs actually care tentang — which hint moves which metric:

• dns-prefetch / preconnect shave connection latency, which menampilkan up sebagai sebuah faster start untuk memuat Anda critical resources — feeding LCP dan, sebelum ini, FCP.
• preload acts pada LCP dan FCP sebagian besar directly oleh starting fetch dari LCP image atau sebuah render-critical font/stylesheet earlier.
• prefetch doesn’t touch saat ini halaman’s Core Web Vitals di semua — ini improves next halaman’s LCP/FCP oleh having -nya resources sudah cached.

None dari ini directly affect INP atau CLS, though getting fonts di earlier (via preload) dapat indirectly reduce layout shift dari font swaps — itu’s really 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?

No — dan ini adalah single sebagian besar penting nuance untuk get right, because sebagian besar konten pada ini topic adalah vague tentang ini.

di sebuah February 2026 Search Off Record episode, Google’s Gary Illyes dijelaskan why Googlebot largely ignores ini hints: mereka solve browser dan network latency masalah itu Google’s own crawling infrastructure doesn’t memiliki. sebagai reported oleh mesin pencari 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.” (terjemahan) “ini adalah very helpful jika Anda memiliki like sebuah crappy internet untuk melakukan DNS Prefetching misalnya. di kami case, kami don’t perlu untuk because kami dapat talk very fast untuk semua cascading DNS server.” Jump untuk quote He dibuat yang sama poin tentang preload — “Same with preload. If we are not synchronous then we don’t particularly need to look at preload.” (terjemahan) “sama dengan preload. jika kami adalah not synchronous lalu kami don’t particularly perlu untuk lihat preload.” Jump untuk quote

So correct causal chain adalah: resource hints → faster nyata-pengguna experience → better Core Web Vitals → one dari several signals Google’s peringkat sistem gunakan. Google’s own pengalaman halaman documentation adalah explicit itu there’s no single halaman-experience signal, itu Core Web Vitals adalah digunakan oleh peringkat sistem alongside others, dan itu baik CWV scores don’t guarantee sebuah top peringkat — relevance masih wins di atas pengalaman halaman. So ini adalah not nothing — tetapi resource hints adalah sebuah UX/performa tactic pertama, dan mereka SEO nilai adalah entirely downstream dan non-deterministic. Don’t sell them internally sebagai “this helps Google read the page.” (terjemahan) “ini helps Google read halaman.”

Bing, untuk what ini adalah worth, memiliki published no hint-spesifik guidance di semua — -nya webmaster guidance references situs speed generically. browser-tingkat benefits (faster memuat, better vitals) apply yang sama regardless dari mesin pencari, so there’s no separate “Bing angle” (terjemahan) “Bing angle” untuk mengoptimalkan untuk here.

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

Resource hints don’t memiliki untuk live di Anda HTML. Anda dapat kirim them sebagai sebuah HTTP Link respons header — Link: </hero.webp>; rel=preload; as=image — which adalah how 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 full respons — giving browser sebuah head start pada connections dan fetches while ini waits. I cover 103 status itself di my HTTP kode status guide, where I describe 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 slower overall.
• Preloading things browser sudah menemukan early — sebuah early <img> di HTML doesn’t 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 gives up.
• Ignoring cost beyond Anda own halaman — unused hints don’t 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 optional dan skipped untuk reduced-data pengguna, so don’t assume sebuah hint Anda shipped adalah actually running 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 one, not untuk carpet-bomb.
• Chrome DevTools → Network panel — Priority column menampilkan what browser actually prioritized, dan Anda dapat spot preloaded resources fetching twice ( as/crossorigin bugs).
• periksa untuk unused preconnects — jika sebuah preconnected origin tidak pernah appears sebagai sebuah actual 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 hanya) → preconnect (DNS + TCP + TLS) → preload (mandatory fetch dari sebuah late-ditemukan saat ini-halaman resource) → prefetch (lowest-priority speculative fetch untuk sebuah future navigation). modulepreload adalah preload’s sibling untuk JS modules.
• preload adalah satu-satunya mandatory one — browser harus fetch ini jika ini processes tag — tetapi itu’s not yang sama sebagai “automatically high priority.” (terjemahan) “automatically tinggi priority.” Default priority masih depends pada resource jenis dan browser; fetchpriority adalah separate hint untuk actually raising ini.
• Attribute matching penting: as adalah diperlukan pada preload (atau Anda get wrong priority + sebuah double download); crossorigin adalah diperlukan untuk fonts; eventual permintaan juga memiliki untuk match pada URL, type/media, credentials, integrity, referrerpolicy, dan (untuk responsive images) imagesrcset/ imagesizes — mismatches cause duplicate atau wrong-candidate fetches.
• Overuse adalah dominant failure mode — “if everything is high priority, nothing is.” (terjemahan) “jika everything adalah tinggi priority, nothing adalah.” Unused hints juga cost sockets/server capacity, dapat reveal mungkin destinations, dan dapat menjadi ignored di bawah Save-data constraints.
• LCP image combo: preload + fetchpriority="high" adalah Google’s saat ini recommendation.
• Core Web Vitals mapping: dns-prefetch/preconnect cut connection latency (LCP/FCP); preload acts pada LCP/FCP directly; prefetch hanya helps next halaman.
• SEO reality (Gary Illyes, Feb 2026): resource hints don’t help Googlebot crawl atau indeks — Google’s infrastructure lacks browser latency ini solve. nilai adalah indirect: hints → faster UX → Core Web Vitals → one dari several sinyal peringkat, not sebuah guarantee. Bing memiliki no hint-spesifik guidance.
• Delivery: HTML <link> atau HTTP Link header; 103 Early Hints lets sebuah CDN push cached hints sebelum origin responds.

Official documentation

Primary-source guidance dari Google (Bing memiliki no resource-hint-spesifik docs).

Google — web.dev

• Assist browser dengan resource hints — Learn performa module covering semua four hints dan when 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 everything adalah prioritized, nothing 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 & Search

• Preconnect untuk diperlukan origins (Lighthouse audit) — what audit flags dan why unused preconnects waste CPU.
• Understanding Core Web Vitals dan Google hasil pencarian — confirms CWV adalah bagian dari pengalaman halaman sinyal peringkat ( indirect alasan hints penting untuk SEO).
• Understanding pengalaman halaman di Google hasil pencarian — confirms there’s no single halaman-experience signal dan baik Core Web Vitals scores don’t guarantee top rankings.

Bing / Microsoft

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

Reference

• MDN — menggunakan dns-prefetch.

Quotes dari source

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

Gary Illyes, Google — why crawler ignores resource hints (Search 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.” (terjemahan) “ini adalah very helpful jika Anda memiliki like sebuah crappy internet untuk melakukan DNS Prefetching misalnya. di kami case, kami don’t perlu untuk because kami dapat talk very fast untuk semua cascading DNS server.” — Gary Illyes. Jump untuk quote
• “Same with preload. If we are not synchronous then we don’t particularly need to look at preload.” (terjemahan) “sama dengan preload. jika kami adalah not synchronous lalu kami don’t particularly perlu untuk lihat preload.” — Gary Illyes. Jump untuk quote

Patrick Stox — resource hints untuk LCP (Ahrefs)

• “DNS-prefetch has better support than preconnect.” (terjemahan) “DNS-prefetch memiliki better mendukung daripada preconnect.” — dari my Largest Contentful Paint guide.
• “Early Hints don’t work on all browsers, so you may also want to preload the image.” (terjemahan) “Early Hints don’t berfungsi pada semua browser, so Anda dapat juga ingin untuk preload image.” — dari yang sama LCP guide.

Resource hints — cheat sheet

Which hint, when

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 aturan

• as — diperlukan pada preload (jenis + priority signal + cache matching).
• crossorigin — diperlukan untuk fonts pada both preload dan preconnect.
• type — helps browser skip formats ini dapat’t gunakan (e.g. type="image/webp").
• Match consumer, not hanya tag — URL, as/destination, type/media, credentials, integrity, referrerpolicy, dan (untuk responsive images) imagesrcset/imagesizes semua memiliki untuk line up atau Anda get sebuah duplicate/wrong fetch alih-alih sebuah saved one.
• preload’s default priority adalah resource/browser-dependent, not automatically “high” (terjemahan) “tinggi” — gunakan fetchpriority untuk actually raise ini.

Core Web Vitals mapping

• dns-prefetch / preconnect → connection latency → LCP / FCP
• preload → LCP / FCP directly
• prefetch → next halaman’s LCP/FCP hanya (not saat ini-halaman CWV)

Resource hint myths dan mistakes

setiap one: why ini adalah wrong, dan what untuk melakukan instead.

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

Myth: “More preloads = more speed.” (terjemahan) “More preloads = more speed.” Wrong — preloading sebuah panjang list membuat bandwidth contention, dan halaman dapat end up slower. “If everything is high priority, nothing is.” (terjemahan) “jika everything adalah tinggi priority, nothing adalah.” melakukan instead: preload hanya Anda two atau three genuinely late-ditemukan, genuinely critical resources.

Myth: “Preload and prefetch are basically the same thing.” (terjemahan) “Preload dan prefetch adalah basically yang sama thing.” Wrong — preload adalah mandatory dan tinggi-priority untuk saat ini halaman; prefetch adalah speculative dan lowest-priority untuk sebuah future halaman. Mixing them up (menggunakan preload where Anda dimaksudkan prefetch) membuat saat ini halaman slower oleh competing dengan critical CSS/JS. melakukan instead: preload untuk now, prefetch untuk next.

Myth: “You don’t need the as attribute; the browser figures it out.” (terjemahan) “Anda tidak perlu undefined attribute; browser figures ini out.” Wrong — without as, browser treats permintaan like sebuah generic XHR, dapat’t atur right priority, dan sering downloads resource twice. melakukan instead: selalu set as (e.g. as="image", as="font", as="style").

Myth: “Preconnect is always better than dns-prefetch.” (terjemahan) “Preconnect adalah selalu better daripada dns-prefetch.” Not quite — preconnect melakukan full handshake, which costs browser more dan memiliki historically memiliki narrower mendukung. melakukan instead: preconnect hanya Anda few sebagian besar critical origins; gunakan dns-prefetch untuk rest.

Myth: “Adding preconnect automatically means fonts will use that connection.” (terjemahan) “menambahkan preconnect automatically berarti fonts akan gunakan itu connection.” Wrong without crossorigin — omit ini dan browser opens sebuah kedua connection untuk font anyway. melakukan instead: tambahkan crossorigin untuk apa pun preconnect/preload Anda’ll gunakan untuk fonts atau lainnya CORS fetches.

sebelum / setelah

Concrete fixes itu ikuti dari guidance above.

1. LCP image ditemukan too late

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

2. Font downloading twice

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

3. di atas-preloaded halaman

• sebelum: sebuah dozen preload tags untuk scripts, styles, dan images “to be safe.” (terjemahan) “untuk menjadi safe.” mereka contend untuk bandwidth dan halaman adalah slower daripada dengan none.
• setelah: pertahankan preload untuk LCP image dan one render-critical font; drop rest. Faster overall, because now penting things actually get 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 release checklist

• candidate solves sebuah diukur penemuan atau connection delay di sebuah cold-muat waterfall.
• preload targets sebuah resource diperlukan oleh saat ini halaman; prefetch targets sebuah mungkin future navigation.
• setiap preload memiliki correct as nilai dan sebuah appropriate type where berguna.
• Font preloads dan preconnects sertakan matching crossorigin mode.
• LCP image adalah not both preloaded incorrectly dan ditemukan melalui sebuah competing source itu causes sebuah duplicate permintaan.
• Preconnect adalah limited untuk few origins digunakan early di muat.
• No hint remains untuk sebuah dihapus vendor, widget, font, atau asset path.
• Slow-network testing menampilkan critical resources move earlier without delaying higher-nilai berfungsi.
• sebuah cold-muat Network trace menampilkan no duplicate fetches.
• perubahan adalah described sebagai sebuah pengguna-performa optimization, not sebuah Googlebot crawling atau pengindeksan tactic.

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 more daripada once

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 above one deserves inspection untuk sebuah as, crossorigin, URL, atau cache-key mismatch. sebuah count dari one melakukan not 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 whether target begins earlier 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 confirm setiap suggestion di waterfall.
• respons headers view: verify HTTP Link headers dan 103 Early Hints when hint comes 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 run: Capture matched cold-muat waterfalls sebelum dan setelah menambahkan one preload atau preconnect untuk sebuah diukur critical resource.

Expected hasil: intended connection atau permintaan begins earlier, resource adalah consumed once, dan associated FCP/LCP timing melakukan not regress.

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

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

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

Hint hygiene setelah deployment

Test untuk run: Inventory semua deployed resource hints dan match setiap one untuk sebuah actual permintaan di sebuah cold muat.

Expected hasil: setiap preconnect menyajikan sebuah origin digunakan early; setiap preload adalah consumed dengan matching permintaan attributes; speculative prefetches map untuk sebuah deliberate next-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 invalid tautan headers atau breaks halaman’s resource fetches.

Test yourself: 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

• What 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 — where 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

• What’s Next untuk pengalaman halaman (SMX Next 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 — how 103 Early Hints delivers cached hints dari edge.
• KeyCDN — Resource Hints: What adalah Preload, Prefetch, dan Preconnect? — sebuah concise reference.
• MDN — menggunakan dns-prefetch — spec-tingkat reference.

Log perubahan