Resource Hints: Preload, Prefetch, and Preconnect Explained

Learn how to use resource hints to dramatically improve your website's loading performance.

Resource Hints: Preload, Prefetch, and Preconnect Explained

What Are Resource Hints?

Resource hints are HTML attributes that tell the browser to prepare resources before they're needed. They can significantly improve perceived performance by reducing loading times.

Types of Resource Hints

Preconnect

Establishes early connections to important third-party origins.

``html

`

Use for:

  • Google Fonts
  • CDN origins
  • Analytics services
  • API endpoints

    • Preload

    Forces the browser to download critical resources immediately.

    `html

    `

    Use for:

  • Critical fonts
  • Hero images
  • Important CSS/JS

    • Prefetch

    Suggests resources that might be needed for future navigations.

    `html

    `

    Use for:

  • Likely next pages
  • Future resources
  • Background data

    • DNS Prefetch

    Resolves domain names before they're needed.

    `html

    ``

    Impact on Core Web Vitals

    LCP Improvement

    Preloading hero images and fonts can reduce LCP by 20-40%.

    FID/INP Improvement

    Preconnecting to critical origins reduces blocking time.

    Common Mistakes

  • Over-preloading: Don't preload everything
  • Missing crossorigin: Required for fonts and CORS resources
  • Wrong 'as' attribute: Must match resource type
  • Preloading unused resources: Wastes bandwidth

    • Audit your resource hints with our free performance analysis tool.