Resource Hints

Name: Resource Hints
Author: thedaviddias

thedaviddias/frontendchecklist

1 installs
73.4k repo stars
Updated June 18, 2026
thedaviddias/frontendchecklist

Adds preload, preconnect, prefetch, and dns-prefetch hints so the browser fetches critical and next-navigation assets earlier.

About

Applies the right resource hints to start fetching critical assets sooner, improving LCP by 100-300ms on average. A developer uses it when auditing slow loads and heavy assets.

Preload above-the-fold fonts and hero images
Preconnect third parties, prefetch likely next-nav resources

Resource Hints by the numbers

1 all-time installs (skills.sh)
Ranked #1,914 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/thedaviddias/frontendchecklist --skill resource-hints

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/thedaviddias/frontendchecklist/resource-hints.svg)](https://skillselion.com/skills/thedaviddias/frontendchecklist/resource-hints)

Installs	1
repo stars	★ 73.4k
Last updated	June 18, 2026
Repository	thedaviddias/frontendchecklist ↗

What it does

Adds preload, preconnect, prefetch, and dns-prefetch hints so the browser fetches critical and next-navigation assets earlier.

Files

SKILL.mdMarkdownGitHub ↗

Use resource hints for faster loading

Resource hints let the browser start fetching critical assets earlier—improving LCP by 100-300ms on average.

Quick Reference

Use preload for critical above-the-fold resources (fonts, hero images)
Use preconnect for third-party origins (CDNs, APIs, analytics)
Use prefetch for resources likely needed on next navigation
Use dns-prefetch as a lightweight alternative to preconnect

Check

Analyze resource hints on this page and verify critical resources use preload/preconnect for optimal loading.

Fix

Add appropriate resource hints (preload, prefetch, preconnect) for critical assets to improve loading performance.

Explain

Explain the differences between preload, prefetch, preconnect, and dns-prefetch and when to use each.

Code Review

Review the routes, assets, and loading behavior that affect Use resource hints for faster loading. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/performance/resource-hints

Use resource hints for faster loading

Implement preload, prefetch, and preconnect hints to optimize resource loading priority.

Priority: high · Difficulty: intermediate · Time: 20 min

--- Resource hints are useful when the browser would otherwise discover something too late. web.dev's performance guidance and Patterns.dev preload/prefetch guidance both make the same point: they help only when they accelerate the right asset at the right time.

Code Examples

Preload Assets Needed for the Current Route

<head>
  <!-- Good: hero image is the likely LCP candidate -->
  <link
    rel="preload"
    href="/images/hero.webp"
    as="image"
    type="image/webp"
    fetchpriority="high"
  >

  <!-- Good: route-critical font discovered late through CSS -->
  <link
    rel="preload"
    href="/fonts/inter-latin.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  >
</head>

Prefetch the Next Likely Step, Not the Current One

<head>
  <!-- Good: likely next navigation -->
  <link rel="prefetch" href="/checkout">
  <link rel="prefetch" href="/static/checkout.js" as="script">

  <!-- Bad: current-route critical CSS should be loaded normally or preloaded -->
  <link rel="prefetch" href="/styles/home.css" as="style">
</head>

Preconnect Only to Origins You Will Use Immediately

<head>
  <!-- Good: fonts are used in the first viewport -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Good: image CDN serves the hero media -->
  <link rel="preconnect" href="https://images.example-cdn.com" crossorigin>

  <!-- Better than preconnect for speculative vendors -->
  <link rel="dns-prefetch" href="https://analytics.example.com">
</head>

Anti-Pattern: Too Much Too Soon

<head>
  <!-- Bad: too many preloads compete with each other -->
  <link rel="preload" href="/fonts/a.woff2" as="font" crossorigin>
  <link rel="preload" href="/fonts/b.woff2" as="font" crossorigin>
  <link rel="preload" href="/fonts/c.woff2" as="font" crossorigin>
  <link rel="preload" href="/carousel.js" as="script">
  <link rel="preload" href="/reviews.js" as="script">
  <link rel="preload" href="/chat-widget.js" as="script">

  <!-- Bad: speculative origins do not deserve early socket setup -->
  <link rel="preconnect" href="https://chat.example.com">
  <link rel="preconnect" href="https://ads.example.com">
  <link rel="preconnect" href="https://social.example.com">
</head>

Why It Matters

Earlier discovery of truly critical assets: Preload can pull hero images, fonts, or route-critical CSS onto the network sooner.
Fewer wasted round-trips: Preconnect can remove DNS, TCP, and TLS setup from the critical path for a small number of known external origins.
Smoother follow-up actions: Prefetch can make the next likely route or interaction feel immediate.
Misuse is expensive: Every unnecessary preload, prefetch, or preconnect competes with more important work for bandwidth, sockets, and parser attention, which is why PageSpeed Insights is worth checking after any hint changes.

Resource Hint Decision Rules

The decision rules matter because Patterns.dev's prefetch guidance and real-world waterfall data both show that hinting the wrong asset early can be worse than adding no hint at all.

Hint	Use it for	Avoid it for	Practical limit
`preload`	Current-route assets needed for first paint or LCP but discovered too late	Assets for future routes, low-priority widgets, or resources already found early enough	Usually `<= 3-5` preloads per route
`prefetch`	Next-route or next-interaction assets that are likely but not required yet	Current-route critical assets or bandwidth-sensitive users when the next step is uncertain	Keep it to the next most likely navigation targets
`preconnect`	Origins definitely needed soon, especially fonts, media CDNs, or APIs on the initial route	Speculative third parties or origins used much later	Usually `<= 2-4` origins
`dns-prefetch`	Low-confidence external origins where full connection setup is premature	Origins that are already on the critical path and deserve full `preconnect`	Use as a lightweight fallback, not as a blanket default

Framework Examples

  
  
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
</head>

  
  
      <link rel="prefetch" href="/signup" />
      <link rel="prefetch" href="/static/signup.js" as="script" />
    
  )
}

Common Mistakes

Preloading assets that are not needed for the current route: this steals bandwidth from CSS, fonts, and LCP resources.
Prefetching the page you are already on: that does not improve discovery order and usually just adds noise.
Preconnecting too many origins: opening sockets for every vendor wastes connection budget and battery.
Forgetting `as` or `crossorigin`: incorrect attributes can reduce prioritization accuracy or trigger duplicate requests.
Skipping measurement: resource hints are only useful if the waterfall actually changes in the expected way.

Verification

Automated Checks

Measure the affected page or flow in Lighthouse, PageSpeed Insights, or DevTools and confirm the targeted metric improves.
Inspect the network waterfall or performance timeline to confirm the intended resource or execution change actually took effect.

Manual Checks

Verify the change on a throttled mobile profile, not just local desktop.
If this rule maps to a budget or Web Vital, confirm the page now stays within that threshold.