プリロードとリソースヒント

The browser discovers resources as it parses HTML, but key assets like fonts or hero images may be found late. Resource hints let you tell the browser what to fetch early, shrinking the critical path.

preconnect opens the DNS + TCP + TLS connection to an origin ahead of time, so the actual request starts faster. Ideal for font and CDN origins.

dns-prefetch is a lighter hint that resolves only DNS. Use it as a fallback for browsers without preconnect or for many third-party origins.

preload fetches a specific resource the current page needs soon, at high priority. Always set the correct as attribute so the browser assigns the right priority and reuses the fetch.

The hero image driving Largest Contentful Paint is often discovered late. Preloading it can cut LCP significantly.

prefetch fetches resources for a future navigation at low priority during idle time. Great for the next page a user is likely to visit.

The fetchpriority attribute nudges relative priority. Mark the hero image high and below-the-fold or non-critical assets low.

For ES modules, modulepreload preloads a module and its dependency graph, avoiding the waterfall of discovering imports one by one.

Hints compete for bandwidth. Preloading too much delays truly critical resources and can hurt performance. Preload only assets that are critical and discovered late.

Check the DevTools Network panel: preloaded resources show high priority and early start times. Lighthouse flags both missing preloads for the LCP element and unused preloads.

• preconnect warm up an origin.
• preload critical asset for this page.
• prefetch asset for the next page.
• fetchpriority fine-tune relative order.

You learned to steer the critical path with resource hints: preconnect/dns-prefetch for connections, preload/modulepreload for current-page assets, prefetch for future pages, and fetchpriority to fine-tune. Use them sparingly and verify in DevTools.