暫定日本語訳：Resource Hints

暫定日本語案: TL;DR — Resource hints tell ブラウザー へ start some network 機能 early 暫定日本語案: — 前に it する normally figure out it needs へ. There are four: 暫定日本語案: dns-prefetch (look up domain’s address early), preconnect (open 暫定日本語案: connection early), preload (fetch something 現在の ページ needs 現在, 暫定日本語案: like あなた big hero 画像), と prefetch (quietly grab something next 暫定日本語案: ページ する probably need). 使用 sparingly それら speed up あなた ページ. 使用 暫定日本語案: everywhere それら slow it down.

何 resource hints are

暫定日本語案: いつ ブラウザー loads あなた ページ, it discovers 何 it needs as it goes. It reads 暫定日本語案: HTML, finds CSS file, downloads it, parses it, と だけ then realizes 暫定日本語案: there’s font または background 画像 it has へ fetch. その “only then” is wasted 暫定日本語案: time.

暫定日本語案: Resource hints let あなた skip waiting. それら’re little instructions あなた put in 暫定日本語案: ページ (または in サーバー’s レスポンス) その say: start この 現在, don’t wait へ 暫定日本語案: discover it. Four of them do 大半の of 機能:

• 暫定日本語案: dns-prefetch — “look up this domain’s address ahead of time.” Cheapest, 暫定日本語案: smallest head start.
• 暫定日本語案: preconnect — “actually open the connection to this domain ahead of time” 暫定日本語案: (address lookup plus secure handshake). Bigger head start, more 機能 向けに 暫定日本語案: ブラウザー, so 使用 it だけ 向けに connections その really matter.
• 暫定日本語案: preload — “fetch this specific file now because the current page definitely needs it.” Best 向けに things like あなた main 画像 または font.
• 暫定日本語案: prefetch — “quietly grab this in the background because the user will probably go to that page next.”

golden rule: don’t overdo it

暫定日本語案: 大半の 一般的な mistake is treating hints like magic “make it faster” button 暫定日本語案: と adding bunch of them. It backfires. If あなた tell ブラウザー everything is 暫定日本語案: urgent, then nothing is — それら all fight 向けに 同じ bandwidth と あなた ページ 暫定日本語案: できる end up slower than 前に. short, targeted list of hints beats long one 暫定日本語案: すべての time.

Do これらの 役立つ my Google rankings

暫定日本語案: ない directly, と it’s worth being clear について この. Google’s crawler doesn’t 暫定日本語案: benefit から あなた resource hints — it fetches ページ differently than real 暫定日本語案: ブラウザー does. 何 resource hints do is 作る ページ faster 向けに actual 訪問者, 暫定日本語案: と その フィード へ Core Web Vitals, which Google’s ランキング systems 使用 as 暫定日本語案: one signal among several — Google is explicit その there’s no single 暫定日本語案: ページ-experience signal, と good Core Web Vitals scores don’t guarantee top 暫定日本語案: ランキング. So chain is: hints → faster experience → better Core Web Vitals → 暫定日本語案: one input among many へ ランキング. ない “Google reads this tag and ranks you higher.”

暫定日本語案: Want syntax, as と crossorigin gotchas, comparison table, と 暫定日本語案: full Core Web Vitals mapping? Switch へ Advanced tab.

暫定日本語案: TL;DR — main resource hints form spectrum of ブラウザー cost: 暫定日本語案: dns-prefetch (DNS lookup だけ) → preconnect (DNS + TCP + TLS) → 暫定日本語案: preload ( mandatory fetch of specific, late-discovered resource) → 暫定日本語案: prefetch (lowest-priority speculative fetch 向けに future navigation). 暫定日本語案: modulepreload is preload’s sibling 向けに JS modules. preload is だけ one 暫定日本語案: ブラウザー is obligated へ fetch — その’s 異なる から saying it’s 暫定日本語案: 自動 high priority; デフォルト priority still depends on 暫定日本語案: resource type, と fetchpriority is separate hint 向けに raising it. as 暫定日本語案: attribute is 必要 on preload; crossorigin is 必要 向けに fonts と 暫定日本語案: other anonymous-mode fetches, または ブラウザー downloads resource twice. 暫定日本語案: Overuse is dominant failure mode. と per Gary Illyes (Feb 2026), none of 暫定日本語案: この 役立つ Googlebot — SEO value is entirely indirect, 通じて Core Web 暫定日本語案: Vitals, which is one of several ランキング signals, ない deterministic one.

spectrum of ブラウザー “cost”

暫定日本語案: cleanest mental model 向けに resource hints is へ line them up by どのように much 機能 暫定日本語案: あなた’re asking ブラウザー へ do up front:

1. 暫定日本語案: dns-prefetch — resolve hostname へ IP. Cheapest.
2. 暫定日本語案: preconnect — DNS lookup plus TCP handshake plus TLS 暫定日本語案: negotiation 向けに HTTPS. full open connection, ready へ 使用.
3. 暫定日本語案: preload — go actually fetch specific resource, 現在. ブラウザー 必要がある 暫定日本語案: プロセス fetch, ただし その doesn’t 自動 作る it high priority — 暫定日本語案: more on その below.
4. 暫定日本語案: modulepreload — preload’s sibling 向けに JavaScript modules; fetches 暫定日本語案: module へ ブラウザー’s module map using module-script rules rather than 暫定日本語案: generic fetch.
5. 暫定日本語案: prefetch — go fetch specific resource, ただし at lowest priority, 暫定日本語案: 向けに ページ ユーザー hasn’t navigated へ yet.

暫定日本語案: それら go in one of two places: <link> element in <head>, または HTTP 暫定日本語案: Link レスポンス header (more on header path, と 103 Early Hints, below). 暫定日本語案: None of この is document-level Speculation Rules API — その’s separate 暫定日本語案: mechanism 向けに prerendering/prefetching whole navigations, covered in 暫定日本語案: prefetch section below.

dns-prefetch

暫定日本語案: dns-prefetch performs just DNS lookup 向けに cross-origin サーバー ahead of 暫定日本語案: time — it doesn’t open connection. その 作る it cheapest hint と 暫定日本語案: sensible デフォルト 向けに many lower-priority third-party domains ページ touches 暫定日本語案: (analytics, tag managers, minor widgets). In my own 暫定日本語案: Largest Contentful Paint guide 暫定日本語案: I 作る practical point その “DNS-prefetch has better support than preconnect” — so it’s また reasonable fallback 向けに ブラウザー どこ preconnect 暫定日本語案: isn’t honored.

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

preconnect

暫定日本語案: preconnect goes further: it opens whole connection — DNS, TCP, と (向けに 暫定日本語案: HTTPS) TLS handshake — so その by time ブラウザー needs resource, 暫定日本語案: pipe is already warm. その’s bigger win than dns-prefetch, ただし it’s また 暫定日本語案: more expensive へ ブラウザー, which is なぜ it comes とともに two 重要 caveats:

• 暫定日本語案: Reserve it 向けに あなた 大半の critical cross-origin connections. handful (あなた 暫定日本語案: font host, あなた 画像 CDN, critical script origin) — ない everything. Google’s 暫定日本語案: Lighthouse “Preconnect to required origins” audit と web.dev both warn その 暫定日本語案: unnecessary preconnects delay other 重要 機能.
• 暫定日本語案: ** unused connection is wasted 機能.** ブラウザー close connection その isn’t 暫定日本語案: 使用 以内に について 10 seconds, so preconnect へ something あなた don’t actually 暫定日本語案: fetch soon just burns handshake capacity 向けに nothing.

暫定日本語案: 向けに fonts, preconnect needs crossorigin attribute — fonts are 常に 暫定日本語案: fetched in anonymous (CORS) mode, と なしで it ブラウザー opens second 暫定日本語案: connection anyway, defeating point.

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

preload

暫定日本語案: preload is one ブラウザー is obligated へ execute — if it processes 暫定日本語案: tag, it 必要がある start fetch 向けに resource 現在の ページ definitely 暫定日本語案: needs ただし する otherwise discover late. その’s statement について いつ 暫定日本語案: fetch starts, ない 自動 について priority: デフォルト priority 暫定日本語案: preloaded resource gets still depends on resource type と ブラウザー 暫定日本語案: (web.dev is explicit その 画像, 向けに 例, stay low priority by デフォルト 暫定日本語案: even いつ preloaded). If あなた want へ actually raise resource’s priority, 暫定日本語案: その’s separate, explicit hint — fetchpriority — ない something preload 暫定日本語案: does on its own. classic candidates 向けに preload:

• 暫定日本語案: Fonts referenced inside CSS file — ブラウザー doesn’t know font 暫定日本語案: exists until it downloads と parses CSS, so preload surfaces it earlier.
• 暫定日本語案: ** LCP (hero) 画像**, especially one 設定 via CSS または srcset その isn’t 暫定日本語案: plain early <img> in HTML.
• 暫定日本語案: Critical, late-discovered JavaScript または CSS.

暫定日本語案: Two attributes 作る または break it:

• 暫定日本語案: as is 必要. It tells ブラウザー 何 type of resource この is so it 暫定日本語案: できる assign right priority と match cache entry. Omit it と 暫定日本語案: ブラウザー treats リクエスト like generic XHR — 誤った priority, と 多くの場合 暫定日本語案: duplicate download.
• 暫定日本語案: crossorigin 向けに fonts — 同じ rule as preconnect; miss it と font 暫定日本語案: downloads twice.

暫定日本語案: More generally, preload だけ gets reused if eventual リクエスト matches it: 暫定日本語案: 同じ URL, 同じ as/destination, 同じ type または media condition, matching 暫定日本語案: crossorigin/credentials mode, と — どこ それら apply — matching integrity 暫定日本語案: と referrerpolicy. 向けに responsive 画像 preload, その また means using 暫定日本語案: imagesrcset/imagesizes その mirror srcset/sizes ブラウザー する 暫定日本語案: actually pick, ない single unconditional fallback URL. Get any of これらの out of 暫定日本語案: sync と ブラウザー either できる’t reuse preload (duplicate fetch) または 暫定日本語案: fetches 誤った candidate.

暫定日本語案: 向けに LCP 画像 specifically, Google’s 現在の recommendation is へ pair 暫定日本語案: preload とともに fetchpriority="high" so fetch starts alongside 暫定日本語案: stylesheet. この is combo I describe in my 暫定日本語案: LCP guide too — 暫定日本語案: fetchpriority="high" gets 画像 earliest, と preloading is 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.”

<!-- 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: if everything is preloaded at high 暫定日本語案: priority, effectively nothing is. web.dev is explicit その excessive preloads 暫定日本語案: cause bandwidth contention, と it hits hardest on slow networks. Preload two 暫定日本語案: または three genuinely late-discovered, genuinely critical resources — no more.

modulepreload

暫定日本語案: modulepreload is preload’s counterpart 向けに JavaScript modules. Instead of 暫定日本語案: generic resource fetch, it 使用 module-script fetch rules と puts result 暫定日本語案: straight へ ブラウザー’s module map — so いつ module is later インポート, 暫定日本語案: ブラウザー already has it. Depending on ブラウザー, it 可能性がある また go ahead と 暫定日本語案: fetch module’s static インポート. Support と どのように deep その dependency-fetching 暫定日本語案: goes both vary by ブラウザー, so テスト actual behavior rather than assuming it 暫定日本語案: matches preload.

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

prefetch

暫定日本語案: prefetch is odd one out: it’s ない について 現在の ページ at all. It’s 暫定日本語案: low-priority, speculative fetch 向けに resource future navigation する 暫定日本語案: likely need — next 手順 in checkout, 記事 ユーザー is について へ クリック. 暫定日本語案: Because it runs at lowest priority, it doesn’t steal bandwidth から 暫定日本語案: 現在の ページ’s critical resources, と prefetched files land in HTTP cache 暫定日本語案: (if それら’re cacheable) ready 向けに next navigation.

暫定日本語案: trade-off: if ユーザー 決して goes there, あなた’ve spent bytes 向けに nothing — so 暫定日本語案: apply it thoughtfully と 避ける it on slow または metered connections.

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

暫定日本語案: Looking forward, Speculation Rules API is modern successor へ 暫定日本語案: prefetch 向けに predicting 同じ-サイト navigations; web.dev notes it handles ケース 暫定日本語案: plain prefetch できる’t (like non-cacheable navigations) と behaves more 暫定日本語案: consistently 全体で origins. prefetch remains useful と more broadly 暫定日本語案: supported in meantime.

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

Resource hints と Core Web Vitals

暫定日本語案: Here’s part SEOs actually care について — which hint moves which 指標:

• 暫定日本語案: dns-prefetch / preconnect shave connection latency, which 表示 up as 暫定日本語案: faster start へ loading あなた critical resources — feeding LCP と, 前に 暫定日本語案: it, FCP.
• 暫定日本語案: preload acts on LCP と FCP 大半の directly by starting fetch of 暫定日本語案: LCP 画像 または render-critical font/stylesheet earlier.
• 暫定日本語案: prefetch doesn’t touch 現在の ページ’s Core Web Vitals at all — it 暫定日本語案: improves next ページ’s LCP/FCP by having its resources already cached.

暫定日本語案: None of これらの directly affect INP または CLS, though getting fonts in earlier (via 暫定日本語案: preload) できる indirectly reduce layout shift から font swaps — その’s really 暫定日本語案: font loading topic, と 暫定日本語案: render-blocking resources 暫定日本語案: is sibling 記事 on fetch-order side of 同じ 問題.

Do resource hints 役立つ Google クロール または インデックス登録 my サイト

暫定日本語案: No — と この is single 大半の 重要 nuance へ get right, because 大半の 暫定日本語案: コンテンツ on この topic is vague について it.

暫定日本語案: In February 2026 検索 Off Record episode, Google’s Gary Illyes 暫定日本語案: explained なぜ Googlebot largely ignores これらの hints: それら solve ブラウザー と 暫定日本語案: network latency 問題 その Google’s own クロール infrastructure doesn’t have. 暫定日本語案: As 暫定日本語案: reported by 検索エンジン 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 へ quote 暫定日本語案: He made 同じ point について preload — 暫定日本語案: “Same with preload. If we are not synchronous then we don’t particularly need to look at preload.” 暫定日本語案: Jump へ quote

暫定日本語案: So 正しい causal chain is: resource hints → faster real-ユーザー experience → 暫定日本語案: better Core Web Vitals → one of several signals Google’s ランキング systems 使用. 暫定日本語案: Google’s own ページ experience ドキュメント 暫定日本語案: is explicit その there’s no single ページ-experience signal, その Core Web Vitals 暫定日本語案: are 使用 by ランキング systems alongside others, と その good CWV scores don’t 暫定日本語案: guarantee top ランキング — relevance still wins 超えて ページ experience. So it’s ない 暫定日本語案: nothing — ただし resource hints are UX/パフォーマンス tactic 最初, と their SEO 暫定日本語案: value is entirely downstream と non-deterministic. Don’t sell them internally as “this helps Google read the page.”

暫定日本語案: Bing, 向けに 何 it’s worth, has published no hint-specific guidance at all — its 暫定日本語案: webmaster guidance references サイト speed generically. ブラウザー-level benefits 暫定日本語案: (faster loads, better vitals) apply 同じ regardless of 検索エンジン, so 暫定日本語案: there’s no separate “Bing angle” へ optimize 向けに here.

Delivering hints 超えて HTTP: Link header と 103 Early Hints

暫定日本語案: Resource hints don’t have へ live in あなた HTML. あなた できる 送信 them as HTTP 暫定日本語案: Link レスポンス header — Link: </hero.webp>; rel=preload; as=image — which is 暫定日本語案: どのように サーバー- と CDN-level implementations 機能. 大半の interesting version of 暫定日本語案: この is 103 Early Hints: preliminary HTTP status その lets edge (like 暫定日本語案: Cloudflare) 送信 cached preload/preconnect Link headers 前に origin 暫定日本語案: サーバー has even finished generating full レスポンス — giving ブラウザー head 暫定日本語案: start on connections と fetches while it waits. I cover 103 status itself in 暫定日本語案: my 暫定日本語案: HTTP status codes guide, どこ I 暫定日本語案: describe it as letting あなた preload resources へ 役立つ LCP 向けに Core Web Vitals.

よくある間違い

• 暫定日本語案: Preloading too many resources — cardinal sin; it creates bandwidth 暫定日本語案: contention と できる 作る ページ slower overall.
• 暫定日本語案: Preloading things ブラウザー already finds early — early <img> in 暫定日本語案: HTML doesn’t need preloading; あなた’re just spending リクエスト slot.
• 暫定日本語案: 不足している as on preload — 誤った priority と 多くの場合 double download.
• 暫定日本語案: 不足している crossorigin on font preload/preconnect — mismatched cache entry 暫定日本語案: means font downloads twice.
• 暫定日本語案: Stale, unused preconnect tags — left behind 後に あなた 削除 暫定日本語案: third-party script それら were 向けに, holding connections open 向けに 10 seconds 暫定日本語案: 前に ブラウザー gives up.
• 暫定日本語案: Ignoring cost beyond あなた own ページ — unused hints don’t just waste あなた 暫定日本語案: own bandwidth; それら consume sockets と サーバー/third-party capacity, と 暫定日本語案: dns-prefetch/preconnect できる reveal likely destinations へ network 暫定日本語案: observers. ブラウザー 可能性がある また ignore, cancel, または limit hints 下で Save-データ, 暫定日本語案: low-power, または support constraints — prefetch in particular is treated as 暫定日本語案: optional と skipped 向けに reduced-データ ユーザー, so don’t assume hint あなた shipped 暫定日本語案: is actually running 向けに すべての 訪問者.

どのように へ テスト と audit

• 暫定日本語案: Lighthouse / PageSpeed Insights — “Preconnect to required origins” 暫定日本語案: audit flags 不足している preconnects on key リクエスト; treat it as prompt へ 追加 暫定日本語案: targeted one, ない へ carpet-bomb.
• 暫定日本語案: Chrome DevTools → Network panel — Priority column 表示 何 暫定日本語案: ブラウザー actually prioritized, と あなた できる spot preloaded resources fetching 暫定日本語案: twice ( as/crossorigin bugs).
• 暫定日本語案: 確認 向けに unused preconnects — if preconnected origin 決して 表示される as 暫定日本語案: actual リクエスト, 削除 hint.

暫定日本語案: 向けに 指標 これらの all フィード, see 暫定日本語案: Core Web Vitals と 暫定日本語案: Largest Contentful Paint; 暫定日本語案: web パフォーマンス ツール 暫定日本語案: 記事 covers 測定 stack in depth.

AI要約

暫定日本語案: condensed take on Advanced version:

• 暫定日本語案: Main hints, increasing ブラウザー cost: dns-prefetch (DNS だけ) → 暫定日本語案: preconnect (DNS + TCP + TLS) → preload (mandatory fetch of 暫定日本語案: late-discovered 現在の-ページ resource) → prefetch (lowest-priority 暫定日本語案: speculative fetch 向けに future navigation). modulepreload is preload’s 暫定日本語案: sibling 向けに JS modules.
• 暫定日本語案: preload is だけ mandatory one — ブラウザー 必要がある fetch it if it 暫定日本語案: processes tag — ただし その’s ない 同じ as “automatically high priority.” 暫定日本語案: デフォルト priority still depends on resource type と ブラウザー; fetchpriority 暫定日本語案: is separate hint 向けに actually raising it.
• 暫定日本語案: Attribute matching matters: as is 必要 on preload (または あなた get 誤った 暫定日本語案: priority + double download); crossorigin is 必要 向けに fonts; 暫定日本語案: eventual リクエスト また has へ match on URL, type/media, credentials, 暫定日本語案: integrity, referrerpolicy, と (向けに responsive 画像) imagesrcset/ 暫定日本語案: imagesizes — mismatches cause duplicate または 誤った-candidate fetches.
• 暫定日本語案: Overuse is dominant failure mode — “if everything is high priority, nothing is.” Unused hints また cost sockets/サーバー capacity, できる reveal likely 暫定日本語案: destinations, と 可能性がある be ignored 下で Save-データ constraints.
• 暫定日本語案: LCP 画像 combo: preload + fetchpriority="high" is Google’s 現在の 暫定日本語案: recommendation.
• 暫定日本語案: Core Web Vitals mapping: dns-prefetch/preconnect cut connection latency 暫定日本語案: (LCP/FCP); preload acts on LCP/FCP directly; prefetch だけ 役立つ next 暫定日本語案: ページ.
• 暫定日本語案: SEO reality (Gary Illyes, Feb 2026): resource hints don’t 役立つ Googlebot 暫定日本語案: クロール または インデックス登録 — Google’s infrastructure lacks ブラウザー latency これらの solve. 暫定日本語案: Value is indirect: hints → faster UX → Core Web Vitals → one of several 暫定日本語案: ランキング signals, ない guarantee. Bing has no hint-specific guidance.
• 暫定日本語案: Delivery: HTML <link> または HTTP Link header; 103 Early Hints lets 暫定日本語案: CDN push cached hints 前に origin responds.

公式ドキュメント

暫定日本語案: 主要-ソース guidance から Google (Bing has no resource-hint-specific docs).

暫定日本語案: Google — web.dev

• 暫定日本語案: Assist ブラウザー とともに resource hints — Learn パフォーマンス module covering all four hints と いつ へ 使用 各.
• 暫定日本語案: Establish network connections early — preconnect と dns-prefetch, 10-second unused-connection rule, と crossorigin requirement 向けに fonts.
• 暫定日本語案: Preload critical assets へ improve loading speed — as attribute, late-discovered fonts/画像, と “if everything is prioritized, nothing is” warning.
• 暫定日本語案: Optimize LCP — recommends pairing preload とともに fetchpriority="high" 向けに LCP 画像.
• 暫定日本語案: Prefetch resources へ speed up future navigations — prefetch priority, HTTP caching behavior, と Speculation Rules API as its successor.

暫定日本語案: Google — Chrome / Lighthouse & 検索

• 暫定日本語案: Preconnect へ 必要 origins (Lighthouse audit) — 何 audit flags と なぜ unused preconnects waste CPU.
• 暫定日本語案: Understanding Core Web Vitals と Google 検索結果 — confirms CWV is part of ページ experience ランキング signal ( indirect 理由 hints matter 向けに SEO).
• 暫定日本語案: Understanding ページ experience in Google 検索結果 — confirms there’s no single ページ-experience signal と good Core Web Vitals scores don’t guarantee top rankings.

暫定日本語案: Bing / Microsoft

• 暫定日本語案: Bing Webmaster Guidelines — references サイト パフォーマンス generically; no hint-specific guidance published.

暫定日本語案: Reference

• 暫定日本語案: MDN — Using dns-prefetch.

出典からの引用

暫定日本語案: On—record statements. 各 link is deep link へ quoted passage.

暫定日本語案: Gary Illyes, Google — なぜ crawler ignores resource hints (検索 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 へ quote
• 暫定日本語案: “Same with preload. If we are not synchronous then we don’t particularly need to look at preload.” 暫定日本語案: — Gary Illyes. 暫定日本語案: Jump へ quote

暫定日本語案: Note: これらの Illyes quotes are から February 2026 検索 Off Record 暫定日本語案: episode “How Browsers Really Parse HTML (and What That Means for SEO).” 暫定日本語案: episode’s own transcript is downloadable PDF その isn’t directly deep-linkable, 暫定日本語案: so deep links above point へ 検索エンジン Journal’s write-up, どこ exact 暫定日本語案: substrings are confirmed present. Confirm against 主要 transcript 前に 暫定日本語案: treating as final.

暫定日本語案: Patrick Stox — resource hints 向けに LCP (Ahrefs)

• 暫定日本語案: “DNS-prefetch has better support than preconnect.” 暫定日本語案: — から my 暫定日本語案: Largest Contentful Paint guide.
• 暫定日本語案: “Early Hints don’t work on all browsers, so you may also want to preload the image.” 暫定日本語案: — から 同じ 暫定日本語案: LCP guide.

Resource hints — cheat sheet

暫定日本語案: Which hint, いつ

暫定日本語案: Syntax snippets

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

暫定日本語案: HTTP header equivalent (向けに CDN / 103 Early Hints)

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

暫定日本語案: Attribute rules

• 暫定日本語案: as — 必要 on preload (type + priority signal + cache matching).
• 暫定日本語案: crossorigin — 必要 向けに fonts on both preload と preconnect.
• 暫定日本語案: type — 役立つ ブラウザー skip formats it できる’t 使用 (e.g. type="image/webp").
• 暫定日本語案: Match consumer, ない just tag — URL, as/destination, type/media, 暫定日本語案: credentials, integrity, referrerpolicy, と (向けに responsive 画像) 暫定日本語案: imagesrcset/imagesizes all have へ line up または あなた get duplicate/誤った 暫定日本語案: fetch instead of saved one.
• 暫定日本語案: preload’s デフォルト priority is resource/ブラウザー-dependent, ない 自動 暫定日本語案: “high” — 使用 fetchpriority へ actually raise it.

暫定日本語案: Core Web Vitals mapping

• 暫定日本語案: dns-prefetch / preconnect → connection latency → LCP / FCP
• 暫定日本語案: preload → LCP / FCP directly
• 暫定日本語案: prefetch → next ページ’s LCP/FCP だけ (ない 現在の-ページ CWV)

Resource hint myths と mistakes

暫定日本語案: 各 one: なぜ it’s 誤った, と 何 へ do instead.

暫定日本語案: Myth: “Resource hints help Google crawl or index my page faster.” 暫定日本語案: 誤った — per Gary Illyes (Feb 2026), Google’s クロール infrastructure doesn’t have 暫定日本語案: ブラウザー-side latency これらの hints solve; it resolves DNS internally と fetches 暫定日本語案: resources 通じて its own pipeline. Do instead: treat hints as real-ユーザー 暫定日本語案: パフォーマンス tactic. だけ SEO payoff is indirect, via Core Web Vitals.

暫定日本語案: Myth: “More preloads = more speed.” 暫定日本語案: 誤った — preloading long list creates bandwidth contention, と ページ できる end 暫定日本語案: up slower. “If everything is high priority, nothing is.” Do instead: preload 暫定日本語案: だけ あなた two または three genuinely late-discovered, genuinely critical resources.

暫定日本語案: Myth: “Preload and prefetch are basically the same thing.” 暫定日本語案: 誤った — preload is mandatory と high-priority 向けに 現在の ページ; 暫定日本語案: prefetch is speculative と lowest-priority 向けに future ページ. Mixing them up 暫定日本語案: (using preload どこ あなた meant prefetch) 作る 現在の ページ slower by 暫定日本語案: competing とともに critical CSS/JS. Do instead: preload 向けに 現在, prefetch 向けに 暫定日本語案: next.

暫定日本語案: Myth: “You don’t need the as attribute; the browser figures it out.” 暫定日本語案: 誤った — なしで as, ブラウザー treats リクエスト like generic XHR, できる’t 暫定日本語案: 設定 right priority, と 多くの場合 downloads resource twice. Do instead: 暫定日本語案: 常に 設定 as (e.g. as="image", as="font", as="style").

暫定日本語案: Myth: “Preconnect is always better than dns-prefetch.” 暫定日本語案: ない quite — preconnect does full handshake, which costs ブラウザー more と 暫定日本語案: has historically had narrower support. Do instead: preconnect だけ あなた few 暫定日本語案: 大半の critical origins; 使用 dns-prefetch 向けに rest.

暫定日本語案: Myth: “Adding preconnect automatically means fonts will use that connection.” 暫定日本語案: 誤った なしで crossorigin — omit it と ブラウザー opens second connection 暫定日本語案: 向けに font anyway. Do instead: 追加 crossorigin へ any preconnect/preload 暫定日本語案: あなた’ll 使用 向けに fonts または other CORS fetches.

前に / 後に

暫定日本語案: Concrete fixes その follow から guidance above.

暫定日本語案: 1. LCP 画像 discovered too late

• 暫定日本語案: 前に: hero 画像 is 設定 via CSS background-image, so ブラウザー 暫定日本語案: doesn’t find it until it has downloaded と parsed stylesheet. LCP is slow.
• 暫定日本語案: 後に: <link rel="preload" fetchpriority="high" as="image" href="/hero.webp" type="image/webp"> in the <head> starts fetch 暫定日本語案: alongside stylesheet — Google’s recommended LCP combo.

暫定日本語案: 2. Font downloading twice

• 暫定日本語案: 前に: <link rel="preload" as="font" href="/inter.woff2"> — no 暫定日本語案: crossorigin. preload cache entry doesn’t match CORS fetch CSS 暫定日本語案: triggers, so font downloads twice.
• 暫定日本語案: 後に: 追加 type="font/woff2" と crossorigin; one download, surfaced 暫定日本語案: early.

暫定日本語案: 3. 超えて-preloaded ページ

• 暫定日本語案: 前に: dozen preload tags 向けに scripts, styles, と 画像 “to be safe.” それら contend 向けに bandwidth と ページ is slower than とともに none.
• 暫定日本語案: 後に: 保つ preload 向けに LCP 画像 と one render-critical font; drop 暫定日本語案: rest. Faster overall, because 現在 重要 things actually get priority.

暫定日本語案: 4. Stale preconnect 後に cleanup

• 暫定日本語案: 前に: third-party chat widget was 削除, ただし its 暫定日本語案: <link rel="preconnect" href="https://chat.vendor.com"> was left behind. 暫定日本語案: ブラウザー opens connection, holds it ~10 seconds, と closes it unused — 暫定日本語案: wasted handshake capacity.
• 暫定日本語案: 後に: delete orphaned preconnect. Fewer competing connections at 暫定日本語案: critical moment.

Audit 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 から 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.

削除 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 確認

• 暫定日本語案: [ ] candidate solves 測定 discovery または connection delay in cold-load 暫定日本語案: waterfall.
• 暫定日本語案: [ ] preload targets resource 必要 by 現在の ページ; prefetch targets 暫定日本語案: likely future navigation.
• 暫定日本語案: [ ] すべての preload has 正しい as value と appropriate type どこ useful.
• 暫定日本語案: [ ] Font preloads と preconnects 含む matching crossorigin mode.
• 暫定日本語案: [ ] LCP 画像 is ない both preloaded incorrectly と discovered 通じて 暫定日本語案: competing ソース その causes duplicate リクエスト.
• 暫定日本語案: [ ] Preconnect is limited へ few origins 使用 early in load.
• 暫定日本語案: [ ] No hint remains 向けに 削除 vendor, widget, font, または asset path.
• 暫定日本語案: [ ] Slow-network テスト 表示 critical resources move earlier なしで delaying 暫定日本語案: higher-value 機能.
• 暫定日本語案: [ ] cold-load Network trace 表示 no duplicate fetches.
• 暫定日本語案: [ ] change is described as ユーザー-パフォーマンス optimization, ない Googlebot 暫定日本語案: クロール または インデックス登録 tactic.

Inventory hints と their attributes

暫定日本語案: Paste この へ DevTools Console on deployed ページ:

[...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 不足している as values on preloads と 不足している CORS mode on font リクエスト; other 暫定日本語案: blank fields 可能性がある be 有効 向けに その hint type.

Find preloads その fetched more than 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;
  }, {});

暫定日本語案: Any count above one deserves inspection 向けに as, crossorigin, URL, または cache-key 暫定日本語案: mismatch. count of one does ない by itself prove その hint improved timing.

ツール 向けに choosing と verifying hints

• 暫定日本語案: Chrome DevTools Network panel: enable Priority と Initiator, disable cache, 暫定日本語案: と inspect whether target begins earlier または downloads twice.
• 暫定日本語案: Chrome DevTools パフォーマンス panel: connect リクエスト-timing change へ FCP または 暫定日本語案: LCP rather than declaring success から markup alone.
• 暫定日本語案: Lighthouse / PageSpeed Insights: 使用 preconnect と LCP discovery diagnostics as 暫定日本語案: candidate generators, then confirm 各 suggestion in waterfall.
• 暫定日本語案: レスポンス headers view: verify HTTP Link headers と 103 Early Hints いつ 暫定日本語案: hint comes から サーバー または CDN rather than HTML.
• 暫定日本語案: ** slow-network テスト profile:** resource contention と 超えて-preloading are easier 暫定日本語案: へ see 下で constrained bandwidth than on warm, fast ローカル connection.

Critical-resource timing

暫定日本語案: テスト へ run: Capture matched cold-load waterfalls 前に と 後に adding one 暫定日本語案: preload または preconnect 向けに 測定 critical resource.

暫定日本語案: Expected result: intended connection または リクエスト begins earlier, resource 暫定日本語案: is consumed once, と associated FCP/LCP timing does ない regress.

暫定日本語案: Failure interpretation: ブラウザー already discovered it early, attributes 暫定日本語案: do ない match consuming リクエスト, または hint competes とともに more 重要 機能.

暫定日本語案: 監視 window: Compare repeated mobile と desktop lab runs immediately, then 暫定日本語案: watch relevant field vital 通じて its レポート window.

暫定日本語案: Rollback trigger: 削除 hint if it causes duplicate fetches, remains unused, 暫定日本語案: または produces repeatable regression in critical 指標.

Hint hygiene 後に deployment

暫定日本語案: テスト へ run: Inventory all deployed resource hints と match 各 one へ actual 暫定日本語案: リクエスト in cold load.

暫定日本語案: Expected result: すべての preconnect serves origin 使用 early; すべての preload is 暫定日本語案: consumed とともに matching リクエスト attributes; speculative prefetches map へ deliberate 暫定日本語案: next-navigation rule.

暫定日本語案: Failure interpretation: stale template または vendor removal left unused 機能, または 暫定日本語案: URL/CORS/type mismatch 防ぐ reuse.

暫定日本語案: 監視 window: Recheck 後に vendor, font, CDN, LCP-element, と template 暫定日本語案: changes.

暫定日本語案: Rollback trigger: 削除 any orphaned hint または revert template change その 送信 暫定日本語案: 無効 Link headers または breaks ページ’s resource fetches.

テスト yourself: Resource Hints

暫定日本語案: Five quick questions on preload, preconnect, dns-prefetch, と prefetch. Pick answer 向けに 各, then 確認.

時間を使う価値のあるリソース

暫定日本語案: My related writing

• 暫定日本語案: 何 Is Largest Contentful Paint (LCP) & どのように へ Improve It — my 大半の detailed treatment of resource hints in practice: early hints, preload, fetchpriority="high", と preconnect/dns-prefetch 向けに cross-origin resources.
• 暫定日本語案: 11 Types of HTTP Status Codes & Their SEO Impact — 含む 103 Early Hints, HTTP-level way へ deliver preload/preconnect.
• 暫定日本語案: Beginner’s Guide へ Technical SEO — どこ ページ パフォーマンス fits in bigger picture.
• 暫定日本語案: Google PageSpeed Insights 向けに SEOs & Developers — ツール その surfaces “Preconnect to required origins” と LCP recommendations.

暫定日本語案: My speaking

• 暫定日本語案: 何’s Next 向けに ページ Experience (SMX Next 2021) — my deck とともに preconnect/dns-prefetch と preload-向けに-画像 例.

暫定日本語案: から around industry

• 暫定日本語案: web.dev — Assist ブラウザー とともに resource hints — Google’s canonical overview of all four hints.
• 暫定日本語案: web.dev — Establish network connections early — preconnect と dns-prefetch in depth.
• 暫定日本語案: web.dev — Prefetch resources へ speed up future navigations — prefetch と Speculation Rules API.
• 暫定日本語案: Chrome / Lighthouse — Preconnect へ 必要 origins — audit と its cautions.
• 暫定日本語案: DebugBear — ブラウザー Resource Hints: preload, prefetch, と preconnect — thorough, テスト-driven walkthrough.
• 暫定日本語案: Cloudflare — Early Hints と Cloudflare Docs — Early Hints — どのように 103 Early Hints delivers cached hints から edge.
• 暫定日本語案: KeyCDN — Resource Hints: 何 is Preload, Prefetch, と Preconnect? — concise reference.
• 暫定日本語案: MDN — Using dns-prefetch — spec-level reference.

変更履歴