Tài nguyên Hints

Tóm tắt — tài nguyên hints tell trình duyệt để bắt đầu some network hoạt động sớm — trước khi nó sẽ thông thường hình out nó cần để. có four: dns-prefetch (look lên domain address sớm), preconnect (open connection sớm), preload (fetch điều gì đó hiện tại trang cần hiện tại, như của bạn big hero image), và prefetch (âm thầm grab điều gì đó tiếp theo trang sẽ probably cần). được sử dụng sparingly họ speed lên của bạn trang. được sử dụng mọi nơi họ chậm nó xuống.

Điều gì tài nguyên hints là

Khi trình duyệt loads của bạn trang, nó discovers Điều gì nó cần as nó goes. nó đọc HTML, tìm thấy CSS file, downloads nó, parses nó, và chỉ sau đó realizes có font hoặc background image nó có để fetch. đó “chỉ thì” là wasted time.

tài nguyên hints let bạn skip đang chờ. họ’re little instructions bạn put trong trang (hoặc trong máy chủ phản hồi) đó chẳng hạn: bắt đầu điều này hiện tại, không chờ để discover nó. Four của them làm phần lớn của hoạt động:

• dns-prefetch — “look up this domain’s address ahead of time.” (bản dịch) «look lên này domain address ahead of time.» Cheapest, smallest head bắt đầu.
• preconnect — “actually open the connection to this domain ahead of time” (bản dịch) «thực ra open đó connection để này domain ahead of time» (address lookup plus đó secure handshake). Bigger head bắt đầu, hơn hoạt động cho đó trình duyệt, so dùng điều này chỉ cho đó connections đó thực sự quan trọng.
• preload — “fetch this specific file now because the current page definitely needs it.” (bản dịch) «fetch này cụ thể file hiện tại vì đó hiện tại trang definitely cần điều này.» Best cho điều như của bạn main image hoặc một font.
• prefetch — “quietly grab this in the background because the user will probably go to that page next.” (bản dịch) «âm thầm grab này trong đó background vì người dùng sẽ probably go để đó trang tiếp theo.»

golden rule: không overdo nó

Đó hầu hết phổ biến mistake là treating hints như một magic “make it faster” (bản dịch) «làm điều này nhanh hơn» button và thêm một bunch of them. Điều này backfires. Nếu bạn tell đó trình duyệt mọi thứ là urgent, thì không có gì là — they all fight cho đó giống nhau bandwidth và trang của bạn có thể end lên chậm hơn hơn trước. MỘT ngắn, targeted list of hints beats một dài một mỗi khi.

Làm những điều này help my Google thứ hạng?

Không trực tiếp, và đây là worth đang clear về này. Google crawler không benefit từ của bạn tài nguyên hints — điều này fetches các trang differently hơn một real trình duyệt làm. Điều gì tài nguyên hints làm là làm đó trang nhanh hơn cho thực tế khách truy cập, và đó feeds vào Core Web Vitals, mà Google xếp hạng các hệ thống dùng as một tín hiệu among several — Google là rõ ràng đó có không single trang-experience tín hiệu, và good Core Web Vitals scores không bảo đảm một top xếp hạng. So đó chain là: hints → nhanh hơn experience → tốt hơn Core Web Vitals → một input among nhiều vào xếp hạng. Không “Google reads this tag and ranks you higher.” (bản dịch) «Google đọc này tag và ranks bạn cao hơn.»

Muốn syntax, as và crossorigin gotchas, so sánh bảng, và đầy đủ Core Web Vitals mapping? Chuyển để Nâng cao tab.

Tóm tắt — main tài nguyên hints form spectrum của trình duyệt cost: dns-prefetch (DNS lookup chỉ) → preconnect (DNS + TCP + TLS) → preload ( mandatory fetch của cụ thể, muộn-discovered tài nguyên) → prefetch (lowest-priority speculative fetch cho tương lai navigation). modulepreload là preload sibling cho JS modules. preload là chỉ một trình duyệt là obligated để fetch — đó khác từ nói rằng nó tự động cao priority; default priority vẫn phụ thuộc vào tài nguyên loại, và fetchpriority là tách biệt hint cho raising nó. as thuộc tính là bắt buộc on preload; crossorigin là bắt buộc cho fonts và khác anonymous-chế độ fetches, hoặc trình duyệt downloads tài nguyên twice. Overuse là dominant thất bại chế độ. và theo Gary Illyes (Feb 2026), none của điều này helps Googlebot — SEO giá trị là hoàn toàn gián tiếp, qua Cốt lõi Web Chỉ số quan trọng, mà là một của several các tín hiệu xếp hạng, không deterministic một.

spectrum của trình duyệt “cost”

sạch nhất mental model cho tài nguyên hints là để line them lên by Cách nhiều hoạt động bạn’re asking trình duyệt để làm lên front:

1. dns-prefetch — resolve hostname để IP. Cheapest.
2. preconnect — DNS lookup plus TCP handshake plus TLS negotiation cho HTTPS. đầy đủ open connection, ready để sử dụng.
3. preload — go thực ra fetch cụ thể tài nguyên, hiện tại. trình duyệt phải xử lý fetch, nhưng đó không tự động làm nó cao priority — nhiều hơn on đó dưới.
4. modulepreload — preload sibling cho JavaScript modules; fetches module vào trình duyệt module map sử dụng module-script rules thay vì generic fetch.
5. prefetch — go fetch cụ thể tài nguyên, nhưng tại lowest priority, Đối với một trang người dùng hasn’t navigated để tuy vậy.

họ go trong một của hai places: <link> element trong <head>, hoặc HTTP Link phản hồi header (nhiều hơn on header path, và 103 Sớm Hints, dưới). None của Đây là document-cấp độ Speculation Rules API — đó tách biệt mechanism cho prerendering/prefetching toàn bộ navigations, covered trong prefetch section dưới.

dns-prefetch

dns-prefetch thực hiện chỉ đó DNS lookup cho một cross-origin máy chủ ahead of time — điều này không open một connection. Đó làm điều này đó cheapest hint và một sensible default cho đó nhiều thấp hơn-priority bên thứ ba domains một trang touches (analytics, tag managers, minor widgets). Trong my own Largest Contentful Paint hướng dẫn I làm đó practical point đó “DNS-prefetch has better support than preconnect” (bản dịch) «DNS-prefetch có tốt hơn hỗ trợ hơn preconnect» — so đây là cũng một reasonable fallback cho các trình duyệt nơi preconnect không honored.

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

preconnect

preconnect goes further: nó opens toàn bộ connection — DNS, TCP, và (cho HTTPS) TLS handshake — so đó by time trình duyệt cần tài nguyên, pipe là đã warm. đó bigger win hơn dns-prefetch, nhưng nó cũng nhiều hơn expensive để trình duyệt, mà là Vì sao nó xuất hiện với hai quan trọng caveats:

• Reserve điều này cho của bạn hầu hết cốt yếu cross-origin connections. MỘT handful (của bạn font host, của bạn image CDN, một cốt yếu script origin) — không mọi thứ. Google Lighthouse “Preconnect to required origins” (bản dịch) «Preconnect để bắt buộc origins» audit và web.dev cả hai warn đó unnecessary preconnects delay other quan trọng hoạt động.
• An unused connection là wasted hoạt động. Các trình duyệt close một connection đó không dùng trong về 10 seconds, so một preconnect để điều gì đó bạn không thực ra fetch soon chỉ burns handshake capacity cho không có gì.

cho fonts, preconnect cần crossorigin thuộc tính — fonts là luôn fetched trong anonymous (CORS) chế độ, và không có nó trình duyệt opens thứ hai connection anyway, defeating point.

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

preload

preload là một trình duyệt là obligated để execute — nếu nó xử lý tag, nó phải bắt đầu fetch cho tài nguyên hiện tại trang definitely cần nhưng sẽ nếu không discover muộn. đó statement về Khi fetch bắt đầu, không tự động về priority: default priority preloaded tài nguyên nhận vẫn phụ thuộc vào tài nguyên loại và trình duyệt (web.dev là rõ ràng đó images, ví dụ, stay thấp priority theo mặc định ngay cả Khi preloaded). nếu bạn muốn để thực ra raise tài nguyên priority, đó tách biệt, rõ ràng hint — fetchpriority — không điều gì đó preload làm on của nó own. kinh điển candidates cho preload:

• Fonts referenced bên trong CSS file — trình duyệt không know font tồn tại cho đến khi nó downloads và parses CSS, so preload surfaces nó trước đó.
• ** LCP (hero) image**, especially một đặt qua CSS hoặc srcset đó không phải đơn giản sớm <img> trong HTML.
• Cốt yếu, muộn-discovered JavaScript hoặc CSS.

Hai các thuộc tính làm hoặc break nó:

• as là bắt buộc. nó tells trình duyệt Điều gì loại của tài nguyên Đây là so nó có thể assign right priority và match bộ nhớ đệm entry. Omit nó và trình duyệt xử lý yêu cầu như generic XHR — sai priority, và thường duplicate download.
• crossorigin cho fonts — giống nhau rule as preconnect; miss nó và font downloads twice.

nhiều hơn generally, preload chỉ nhận reused nếu eventual yêu cầu matches nó: giống nhau URL, giống nhau as/đích, giống nhau type hoặc media condition, matching crossorigin/credentials chế độ, và — nơi họ apply — matching integrity và referrerpolicy. cho responsive image preload, đó cũng có nghĩ là sử dụng imagesrcset/imagesizes đó mirror srcset/sizes trình duyệt sẽ thực ra pick, không single unconditional fallback URL. Nhận bất kỳ của những điều này out của sync và trình duyệt either có thể’t reuse preload (duplicate fetch) hoặc fetches sai candidate.

Cho đó LCP image cụ thể, Google hiện tại khuyến nghị là để pair preload với fetchpriority="high" so đó fetch bắt đầu alongside đó stylesheet. Này là đó combo I mô tả trong my LCP hướng dẫn cũng — fetchpriority="high" nhận đó image earliest, và preloading là một mạnh second tín hiệu, hữu ích vì as I note ở đó, “Early Hints don’t work on all browsers, so you may also want to preload the image.” (bản dịch) «Sớm Hints không hoạt động on all các trình duyệt, so bạn có thể cũng muốn để 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 áp dụng hardest ở đây: nếu mọi thứ là preloaded tại cao priority, effectively không có gì là. web.dev là rõ ràng đó excessive preloads nguyên nhân bandwidth contention, và nó hits hardest on chậm networks. Preload hai hoặc three genuinely muộn-discovered, genuinely cốt yếu các tài nguyên — không nhiều hơn.

modulepreload

modulepreload là preload đối tác tương ứng cho JavaScript modules. thay vì generic tài nguyên fetch, nó dùng module-script fetch rules và diễn đạt kết quả straight vào trình duyệt module map — so Khi module là sau đó imported, trình duyệt đã có nó. Depending on trình duyệt, nó có thể cũng go ahead và fetch module static imports. Hỗ trợ và Cách deep đó dependency-fetching goes cả hai vary by trình duyệt, so kiểm thử thực tế behavior thay vì assuming nó matches preload.

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

prefetch

prefetch là odd một out: nó không về hiện tại trang tại all. nó thấp-priority, speculative fetch cho tài nguyên tương lai navigation sẽ có khả năng cần — tiếp theo step trong checkout, bài viết người dùng là về để nhấp. vì nó chạy tại lowest priority, nó không steal bandwidth từ hiện tại trang cốt yếu các tài nguyên, và prefetched files land trong HTTP bộ nhớ đệm (nếu họ’re có thể lưu vào bộ nhớ đệm) ready cho tiếp theo navigation.

trade-off: nếu người dùng không bao giờ goes ở đó, bạn’ve spent bytes cho không có gì — so apply nó thoughtfully và tránh nó on chậm hoặc metered connections.

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

Looking forward, Speculation Rules API là modern successor để prefetch cho predicting giống nhau-trang web navigations; web.dev notes nó xử lý cases đơn giản prefetch có thể’t (như non-có thể lưu vào bộ nhớ đệm navigations) và behaves nhiều hơn consistently trên origins. prefetch vẫn hữu ích và nhiều hơn broadly supported trong meantime.

Preload so với. prefetch so với. preconnect so với. dns-prefetch

tài nguyên hints và Core Web Vitals

Ở đây part SEOs thực ra care về — mà hint moves mà chỉ số:

• dns-prefetch / preconnect shave connection latency, mà hiển thị lên as nhanh hơn bắt đầu để loading của bạn cốt yếu các tài nguyên — feeding LCP và, trước khi nó, FCP.
• preload acts on LCP và FCP phần lớn trực tiếp by starting fetch của LCP image hoặc render-cốt yếu font/stylesheet trước đó.
• prefetch không touch hiện tại trang Core Web Vitals tại all — nó improves tiếp theo trang LCP/FCP by có của nó các tài nguyên đã được lưu đệm.

None của những điều này trực tiếp ảnh hưởng INP hoặc CLS, though getting fonts trong trước đó (qua preload) có thể indirectly reduce layout shift từ font swaps — đó thực sự font loading topic, và render-blocking các tài nguyên là sibling bài viết on fetch-order side của giống nhau vấn đề.

Làm tài nguyên hints help Google crawl hoặc chỉ mục my trang web?

Không — và Đây là single phần lớn quan trọng nuance để nhận right, vì phần lớn nội dung on điều này topic là vague về nó.

Trong một February 2026 Tìm kiếm Off đó Record episode, Google Gary Illyes explained vì sao Googlebot largely bỏ qua những hints: they solve trình duyệt và network latency các vấn đề đó Google own crawling infrastructure không có. As reported by Search Engine Journal, Illyes đã nói “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.” (bản dịch) «đây là very helpful nếu bạn có như một crappy internet để làm DNS Prefetching ví dụ. Trong của chúng ta case, we không cần để vì we có thể talk very fast để all đó cascading DNS các máy chủ.» Nhảy đến trích dẫn He đã làm đó giống nhau point về preload — “Same with preload. If we are not synchronous then we don’t particularly need to look at preload.” (bản dịch) «Giống nhau với preload. Nếu we không phải synchronous thì we không particularly cần để xem preload.» Nhảy đến trích dẫn

So đó correct causal chain là: tài nguyên hints → nhanh hơn real-người dùng experience → tốt hơn Core Web Vitals → một of several các tín hiệu Google xếp hạng các hệ thống dùng. Google own trang experience tài liệu là rõ ràng đó có không single trang-experience tín hiệu, đó Core Web Vitals là dùng by xếp hạng các hệ thống alongside others, và đó good CWV scores không bảo đảm một top xếp hạng — relevance vẫn wins over trang experience. So đây là không không có gì — nhưng tài nguyên hints là một UX/performance tactic đầu tiên, và của họ SEO giá trị là hoàn toàn downstream và non-deterministic. không sell them internally as “this helps Google read the page.” (bản dịch) «này helps Google đọc đó trang.»

Bing, cho Điều gì nó worth, có published không hint-cụ thể hướng dẫn tại all — của nó quản trị viên web hướng dẫn references trang web speed generically. trình duyệt-cấp độ benefits (nhanh hơn loads, tốt hơn chỉ số quan trọng) apply giống nhau regardless của công cụ tìm kiếm, so có không tách biệt “Bing angle” để optimize cho ở đây.

Delivering hints over HTTP: Link header và 103 Sớm Hints

tài nguyên hints không có để trực tiếp trong của bạn HTML. Bạn có thể gửi them as HTTP Link phản hồi header — Link: </hero.webp>; rel=preload; as=image — mà là Cách máy chủ- và CDN-cấp độ implementations hoạt động. phần lớn interesting version của Đây là 103 Sớm Hints: preliminary HTTP status đó lets edge (như Cloudflare) gửi được lưu đệm preload/preconnect Link các header trước khi origin máy chủ có ngay cả finished generating đầy đủ phản hồi — giving trình duyệt head bắt đầu on connections và fetches trong khi nó chờ. I cover 103 status itself trong my HTTP các mã trạng thái hướng dẫn, nơi I mô tả nó as letting bạn preload các tài nguyên để help LCP cho Core Web Vitals.

phổ biến mistakes

• Preloading cũng nhiều các tài nguyên — cardinal sin; nó tạo bandwidth contention và có thể làm trang chậm hơn overall.
• Preloading điều trình duyệt đã tìm thấy sớm — sớm <img> trong HTML không cần preloading; bạn’re chỉ spending yêu cầu slot.
• Bị thiếu as on preload — sai priority và thường double download.
• Bị thiếu crossorigin on font preload/preconnect — mismatched bộ nhớ đệm entry có nghĩ là font downloads twice.
• Stale, unused preconnect tags — left behind sau khi bạn đã xóa thứ ba-party script họ là cho, holding connections open cho 10 seconds trước khi trình duyệt cho lên.
• Ignoring cost beyond của bạn own trang — unused hints không chỉ waste của bạn own bandwidth; họ consume sockets và máy chủ/thứ ba-party capacity, và dns-prefetch/preconnect có thể reveal có khả năng destinations để network observers. các trình duyệt có thể cũng bỏ qua, cancel, hoặc limit hints dưới Save-Dữ liệu, thấp-power, hoặc hỗ trợ constraints — prefetch trong particular là được xem như tùy chọn và skipped cho reduced-dữ liệu người dùng, so không assume hint bạn shipped là thực ra đang chạy cho mỗi khách truy cập.

Cách kiểm thử và audit

• Lighthouse / PageSpeed Insights — đó “Preconnect to required origins” (bản dịch) «Preconnect để bắt buộc origins» audit flags bị thiếu preconnects on key các yêu cầu; treat điều này as một prompt để thêm một targeted một, không để carpet-bomb.
• Chrome DevTools → Network panel — đó Priority cột cho thấy điều gì đó trình duyệt thực ra prioritized, và bạn có thể spot preloaded các tài nguyên fetching twice (đó as/crossorigin bugs).
• Kiểm tra cho unused preconnects — nếu một preconnected origin không bao giờ xuất hiện as an thực tế yêu cầu, xóa đó hint.

cho các chỉ số những điều này all feed, see Core Web Vitals và Largest Contentful Paint; web performance tools bài viết covers việc đo lường stack trong depth.

AI summary

condensed take on Nâng cao version:

• Main hints, increasing trình duyệt cost: dns-prefetch (DNS chỉ) → preconnect (DNS + TCP + TLS) → preload (mandatory fetch of một muộn-discovered hiện tại-trang tài nguyên) → prefetch (lowest-priority speculative fetch cho một tương lai navigation). modulepreload là preload sibling cho JS modules.
• preload là đó chỉ mandatory một — đó trình duyệt phải fetch điều này nếu điều này xử lý đó tag — nhưng đó là không đó giống nhau as “automatically high priority.” (bản dịch) «tự động cao priority.» Default priority vẫn phụ thuộc vào tài nguyên loại và trình duyệt; fetchpriority là đó tách biệt hint cho thực ra raising điều này.
• Thuộc tính matching matters: as là bắt buộc on preload (hoặc bạn nhận sai priority + một double download); crossorigin là bắt buộc cho fonts; đó eventual yêu cầu cũng có để match on URL, type/media, credentials, integrity, referrerpolicy, và (cho responsive images) imagesrcset/ imagesizes — mismatches nguyên nhân duplicate hoặc sai-candidate fetches.
• Overuse là đó dominant chế độ lỗi — “if everything is high priority, nothing is.” (bản dịch) «nếu mọi thứ là cao priority, không có gì là.» Unused hints cũng cost sockets/máy chủ capacity, có thể reveal có khả năng destinations, và có thể là đã bỏ qua dưới Save-Dữ liệu constraints.
• LCP image combo: preload + fetchpriority="high" là Google hiện tại khuyến nghị.
• Core Web Vitals mapping: dns-prefetch/preconnect cut connection latency (LCP/FCP); preload acts on LCP/FCP trực tiếp; prefetch chỉ helps đó tiếp theo trang.
• SEO reality (Gary Illyes, Feb 2026): tài nguyên hints không help Googlebot crawl hoặc chỉ mục — Google infrastructure lacks đó trình duyệt latency những solve. Giá trị là gián tiếp: hints → nhanh hơn UX → Core Web Vitals → một of several các tín hiệu xếp hạng, không phải là bảo đảm. Bing có không hint-cụ thể hướng dẫn.
• Phân phối: HTML <link> hoặc HTTP Link header; 103 Sớm Hints lets một CDN push được lưu đệm hints trước đó origin responds.

Tài liệu chính thức

Chính-nguồn hướng dẫn từ Google (Bing có không tài nguyên-hint-cụ thể tài liệu).

Google — web.dev

• Assist đó trình duyệt với tài nguyên hints — đó Learn Performance module covering all four hints và khi nào nên dùng mỗi.
• Establish network connections sớm — preconnect và dns-prefetch, đó 10-second unused-connection rule, và đó crossorigin requirement cho fonts.
• Preload cốt yếu assets để improve loading speed — đó as thuộc tính, muộn-discovered fonts/images, và đó “if everything is prioritized, nothing is” (bản dịch) «nếu mọi thứ là prioritized, không có gì là» warning.
• Optimize LCP — khuyến nghị pairing preload với fetchpriority="high" cho đó LCP image.
• Prefetch các tài nguyên để speed lên tương lai navigations — prefetch priority, HTTP bộ nhớ đệm behavior, và đó Speculation Rules API as của nó successor.

Google — Chrome / Lighthouse & Tìm kiếm

• Preconnect để bắt buộc origins (Lighthouse audit) — Điều gì audit flags và Vì sao unused preconnects waste CPU.
• Understanding Core Web Vitals và Google kết quả tìm kiếm — xác nhận CWV là part của trang experience tín hiệu xếp hạng ( gián tiếp reason hints quan trọng Đối với SEO).
• Understanding trang experience trong Google kết quả tìm kiếm — xác nhận có không single trang-experience tín hiệu và good Core Web Vitals scores không bảo đảm top thứ hạng.

Bing / Microsoft

• Bing Quản trị viên web Guidelines — references trang web performance generically; không hint-cụ thể hướng dẫn published.

Reference

• MDN — sử dụng dns-prefetch.

Quotes từ nguồn

On—record statements. mỗi link là deep link để quoted passage.

Gary Illyes, Google — Vì sao crawler bỏ qua tài nguyên hints (Tìm kiếm 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.” (bản dịch) «đây là very helpful nếu bạn có như một crappy internet để làm DNS Prefetching ví dụ. Trong của chúng ta case, we không cần để vì we có thể talk very fast để all đó cascading DNS các máy chủ.» — Gary Illyes. Nhảy đến trích dẫn
• “Same with preload. If we are not synchronous then we don’t particularly need to look at preload.” (bản dịch) «Giống nhau với preload. Nếu we không phải synchronous thì we không particularly cần để xem preload.» — Gary Illyes. Nhảy đến trích dẫn

Patrick Stox — tài nguyên hints cho LCP (Ahrefs)

• “DNS-prefetch has better support than preconnect.” (bản dịch) «DNS-prefetch có tốt hơn hỗ trợ hơn preconnect.» — từ my Largest Contentful Paint hướng dẫn.
• “Early Hints don’t work on all browsers, so you may also want to preload the image.” (bản dịch) «Sớm Hints không hoạt động on all các trình duyệt, so bạn có thể cũng muốn để preload đó image.» — từ đó giống nhau LCP hướng dẫn.

tài nguyên hints — bảng tra nhanh

Mà hint, Khi

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 tương đương (cho CDN / 103 Sớm Hints)

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

Thuộc tính rules

• as — bắt buộc on preload (loại + priority tín hiệu + bộ nhớ đệm matching).
• crossorigin — bắt buộc cho fonts on cả hai preload và preconnect.
• type — helps trình duyệt skip formats nó có thể’t sử dụng (e.g. type="image/webp").
• Match consumer, không chỉ tag — URL, as/đích, type/media, credentials, integrity, referrerpolicy, và (cho responsive images) imagesrcset/imagesizes all có để line lên hoặc bạn nhận duplicate/sai fetch thay vì saved một.
• preload’s default priority là tài nguyên/trình duyệt-phụ thuộc, không tự động “cao” — sử dụng fetchpriority để thực ra raise nó.

Core Web Vitals mapping

• dns-prefetch / preconnect → connection latency → LCP / FCP
• preload → LCP / FCP trực tiếp
• prefetch → tiếp theo trang LCP/FCP chỉ (không hiện tại-trang CWV)

tài nguyên hint myths và mistakes

mỗi một: Vì sao nó sai, và Điều gì để làm thay vì.

Myth: “Resource hints help Google crawl or index my page faster.” (bản dịch) «Tài nguyên hints help Google crawl hoặc chỉ mục my trang nhanh hơn.» Sai — theo Gary Illyes (Feb 2026), Google crawling infrastructure không có đó trình duyệt-side latency những hints solve; điều này resolves DNS internally và fetches các tài nguyên qua của nó own pipeline. Làm thay vì: treat hints as một real-người dùng performance tactic. Đó chỉ SEO payoff là gián tiếp, qua Core Web Vitals.

Myth: “More preloads = more speed.” (bản dịch) «Hơn preloads = hơn speed.» Sai — preloading một dài list tạo bandwidth contention, và đó trang có thể end lên chậm hơn. “If everything is high priority, nothing is.” (bản dịch) «Nếu mọi thứ là cao priority, không có gì là.» Làm thay vì: preload chỉ của bạn hai hoặc three genuinely muộn-discovered, genuinely cốt yếu các tài nguyên.

Myth: “Preload and prefetch are basically the same thing.” (bản dịch) «Preload và prefetch là basically cùng một điều.» Sai — preload là mandatory và cao-priority cho đó hiện tại trang; prefetch là speculative và lowest-priority cho một tương lai trang. Mixing them lên (dùng preload nơi bạn meant prefetch) làm đó hiện tại trang chậm hơn by competing với cốt yếu CSS/JS. Làm thay vì: preload cho hiện tại, prefetch cho tiếp theo.

Myth: “You don’t need the as attribute; the browser figures it out.” (bản dịch) «Bạn không cần đó thuộc tính; đó trình duyệt figures điều này out.» Sai — không có as, đó trình duyệt xử lý đó yêu cầu như một generic XHR, không thể set đó right priority, và thường downloads đó tài nguyên twice. Làm thay vì: luôn set as (e.g. as="image", as="font", as="style").

Myth: “Preconnect is always better than dns-prefetch.” (bản dịch) «Preconnect là luôn tốt hơn dns-prefetch.» Không quite — preconnect làm đó đầy đủ handshake, mà costs đó trình duyệt hơn và có trong lịch sử đã có hẹp hơn hỗ trợ. Làm thay vì: preconnect chỉ của bạn một vài hầu hết cốt yếu origins; dùng dns-prefetch cho đó rest.

Myth: “Adding preconnect automatically means fonts will use that connection.” (bản dịch) «Thêm preconnect tự động có nghĩa là fonts sẽ dùng đó connection.» Sai không có crossorigin — omit điều này và đó trình duyệt opens một second connection cho đó font anyway. Làm thay vì: thêm crossorigin để bất kỳ preconnect/preload bạn’ll dùng cho fonts hoặc other CORS fetches.

trước khi / sau khi

Concrete các cách sửa đó follow từ hướng dẫn trên.

1. LCP image discovered cũng muộn

• trước khi: hero image là đặt qua CSS background-image, so trình duyệt không tìm nó cho đến khi nó có downloaded và parsed stylesheet. LCP là chậm.
• sau khi: <link rel="preload" fetchpriority="high" as="image" href="/hero.webp" type="image/webp"> trong đó <head> bắt đầu fetch alongside stylesheet — Google được khuyến nghị LCP combo.

2. Font downloading twice

• trước khi: <link rel="preload" as="font" href="/inter.woff2"> — không crossorigin. preload bộ nhớ đệm entry không match CORS fetch CSS triggers, so font downloads twice.
• sau khi: thêm type="font/woff2" và crossorigin; một download, surfaced sớm.

3. Over-preloaded trang

• Trước: một dozen preload tags cho scripts, styles, và images “to be safe.” (bản dịch) «để là safe.» They contend cho bandwidth và đó trang là chậm hơn với none.
• Sau: giữ preload cho đó LCP image và một render-cốt yếu font; drop đó rest. Nhanh hơn overall, vì hiện tại đó quan trọng điều thực ra nhận priority.

4. Stale preconnect sau khi cleanup

• trước khi: thứ ba-party chat widget là đã xóa, nhưng của nó <link rel="preconnect" href="https://chat.vendor.com"> là left behind. trình duyệt opens connection, holds nó ~10 seconds, và closes nó unused — wasted handshake capacity.
• sau khi: delete orphaned preconnect. Ít hơn competing connections tại cốt yếu moment.

Audit proposed tài nguyên 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 từ 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.

Xóa 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.

tài nguyên-hint phát hành checklist

• candidate solves measured phát hiện hoặc connection delay trong cold-load waterfall.
• preload targets tài nguyên bắt buộc by hiện tại trang; prefetch targets có khả năng tương lai navigation.
• mỗi preload có đúng as giá trị và appropriate type nơi hữu ích.
• Font preloads và preconnects bao gồm matching crossorigin chế độ.
• LCP image không phải cả hai preloaded incorrectly và discovered qua competing nguồn đó gây ra duplicate yêu cầu.
• Preconnect là limited để một vài origins được sử dụng sớm trong load.
• Không hint vẫn cho đã xóa vendor, widget, font, hoặc asset path.
• Chậm-network kiểm thử hiển thị cốt yếu các tài nguyên move trước đó không có delaying cao hơn-giá trị hoạt động.
• cold-load Network trace hiển thị không duplicate fetches.
• thay đổi là described as người dùng-performance optimization, không Googlebot crawling hoặc lập chỉ mục tactic.

Inventory hints và của họ các thuộc tính

Paste điều này vào DevTools Console on deployed trang:

[...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 bị thiếu as các giá trị on preloads và bị thiếu CORS chế độ on font các yêu cầu; khác blank các trường có thể là hợp lệ cho đó hint loại.

tìm preloads đó fetched nhiều hơn sau khi

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

bất kỳ count trên một deserves inspection cho as, crossorigin, URL, hoặc bộ nhớ đệm-mấu chốt mismatch. count của một không by itself prove đó hint improved timing.

Tools cho chọn và verifying hints

• Chrome DevTools Network panel: enable Priority và Initiator, disable bộ nhớ đệm, và inspect liệu đích begins trước đó hoặc downloads twice.
• Chrome DevTools Performance panel: connect yêu cầu-timing thay đổi để FCP hoặc LCP thay vì declaring thành công từ markup alone.
• Lighthouse / PageSpeed Insights: sử dụng preconnect và LCP phát hiện diagnostics as candidate generators, sau đó xác nhận mỗi suggestion trong waterfall.
• phản hồi các header view: verify HTTP Link các header và 103 Sớm Hints Khi hint xuất hiện từ máy chủ hoặc CDN thay vì HTML.
• ** chậm-network kiểm thử profile:** tài nguyên contention và over-preloading là easier để see dưới constrained bandwidth hơn on warm, fast local connection.

Cốt yếu-tài nguyên timing

Kiểm thử để chạy: Capture khớp cold-load waterfalls trước khi và sau khi thêm một preload hoặc preconnect cho measured cốt yếu tài nguyên.

Dự kiến kết quả: dự kiến connection hoặc yêu cầu begins trước đó, tài nguyên là consumed sau khi, và associated FCP/LCP timing không regress.

thất bại interpretation: trình duyệt đã discovered nó sớm, các thuộc tính không match consuming yêu cầu, hoặc hint competes với nhiều hơn quan trọng hoạt động.

Monitoring window: So sánh repeated mobile và desktop lab chạy immediately, sau đó watch relevant trường vital qua của nó reporting window.

Rollback trigger: Xóa hint nếu nó gây ra duplicate fetches, vẫn unused, hoặc produces repeatable regression trong cốt yếu chỉ số.

Hint hygiene sau khi deployment

Kiểm thử để chạy: Inventory all deployed tài nguyên hints và match mỗi một để thực tế yêu cầu trong cold load.

Dự kiến kết quả: mỗi preconnect phục vụ origin được sử dụng sớm; mỗi preload là consumed với matching yêu cầu các thuộc tính; speculative prefetches map để deliberate tiếp theo-navigation rule.

thất bại interpretation: stale template hoặc vendor removal left unused hoạt động, hoặc URL/CORS/loại mismatch ngăn reuse.

Monitoring window: Recheck sau khi vendor, font, CDN, LCP-element, và template thay đổi.

Rollback trigger: Xóa bất kỳ orphaned hint hoặc revert template thay đổi đó gửi không hợp lệ Link các header hoặc breaks trang tài nguyên fetches.

Tự kiểm tra: tài nguyên Hints

Five nhanh các câu hỏi on preload, preconnect, dns-prefetch, và prefetch. Pick câu trả lời cho mỗi, sau đó kiểm tra.

các tài nguyên worth của bạn time

My related writing

• Điều gì Là Largest Contentful Paint (LCP) & Cách Improve Điều này — my hầu hết detailed treatment of tài nguyên hints trong thực tế: sớm hints, preload, fetchpriority="high", và preconnect/dns-prefetch cho cross-origin các tài nguyên.
• 11 Types of HTTP Các mã trạng thái & Của họ SEO Impact — bao gồm 103 Sớm Hints, đó HTTP-cấp độ way để deliver preload/preconnect.
• Đó Beginner Hướng dẫn để SEO kỹ thuật — nơi trang performance fits trong đó bigger picture.
• Google PageSpeed Insights Cho SEOs & Nhà phát triển — đó tool đó surfaces “Preconnect to required origins” (bản dịch) «Preconnect để bắt buộc origins» và LCP các khuyến nghị.

My speaking

• Điều gì tiếp theo cho trang Experience (SMX tiếp theo 2021) — my deck với preconnect/dns-prefetch và preload-cho-images các ví dụ.

từ khoảng ngành

• web.dev — Assist trình duyệt với tài nguyên hints — Google canonical overview của all four hints.
• web.dev — Establish network connections sớm — preconnect và dns-prefetch trong depth.
• web.dev — Prefetch các tài nguyên để speed lên tương lai navigations — prefetch và Speculation Rules API.
• Chrome / Lighthouse — Preconnect để bắt buộc origins — audit và của nó cautions.
• DebugBear — trình duyệt tài nguyên Hints: preload, prefetch, và preconnect — thorough, kiểm thử-driven walkthrough.
• Cloudflare — Sớm Hints và Cloudflare Tài liệu — Sớm Hints — Cách 103 Sớm Hints delivers được lưu đệm hints từ edge.
• KeyCDN — tài nguyên Hints: Điều gì là Preload, Prefetch, và Preconnect? — concise reference.
• MDN — sử dụng dns-prefetch — spec-cấp độ reference.

Nhật ký thay đổi