Deutsch Deutsch English English

Resource Hints

What are Resource Hints?

Resource Hints are HTML attributes that give the browser hints on how to load resources more efficiently. They enable improving website loading times by allowing the browser to proactively preload resources or prepare connections.

Resource Hints are an important part of technical SEO optimization and contribute significantly to improving Core Web Vitals.

The most important Resource Hints

1. DNS-Prefetch

DNS-Prefetch resolves domain names before they are actually needed. This reduces latency on the first request to an external domain.

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">

Use cases:

  • External fonts (Google Fonts)
  • Analytics services
  • CDN resources
  • Social Media widgets

2. Preconnect

Preconnect establishes a complete connection to a domain, including DNS lookup, TCP handshake and TLS negotiation.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://www.google-analytics.com">

Advantages over DNS-Prefetch:

  • Complete connection preparation
  • Faster resource loading
  • Better performance for critical resources

3. Preload

Preload loads critical resources with high priority that are definitely needed on the current page.

<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/main.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">

Supported resource types:

  • style - CSS files
  • script - JavaScript files
  • image - Images
  • font - Fonts
  • fetch - API calls

4. Prefetch

Prefetch loads resources with low priority that are likely to be needed on the next page.

<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/images/next-image.jpg">

Use cases:

  • Navigation to next page
  • Images for image galleries
  • JavaScript for interactive elements

Resource Hints for different resource types

Optimize CSS files

<!-- Load critical CSS immediately -->
<link rel="preload" href="/css/critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- Load non-critical CSS later -->
<link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Optimize JavaScript

<!-- Critical JavaScript files -->
<link rel="preload" href="/js/main.js" as="script">

<!-- Module-based JavaScript files -->
<link rel="modulepreload" href="/js/app.js">

Optimize images

<!-- Hero image with high priority -->
<link rel="preload" href="/images/hero.jpg" as="image">

<!-- Prepare images for lazy loading -->
<link rel="prefetch" href="/images/gallery-1.jpg">
<link rel="prefetch" href="/images/gallery-2.jpg">

Optimize fonts

<!-- Load Google Fonts optimized -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">

Best Practices for Resource Hints

1. Prioritizing Hints

Hint Type
Priority
Use Case
Performance Impact
Preload
High
Critical resources
Very high
Preconnect
High
External domains
High
DNS-Prefetch
Medium
External domains (cheap)
Medium
Prefetch
Low
Future pages
Low

2. Order of Resource Hints

<!-- 1. DNS-Prefetch for external domains -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">

<!-- 2. Preconnect for critical external resources -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://www.google-analytics.com">

<!-- 3. Preload for critical local resources -->
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/main.js" as="script">

<!-- 4. Prefetch for future resources -->
<link rel="prefetch" href="/next-page.html">

3. Error handling

<!-- Fallback for Preload -->
<link rel="preload" href="/css/critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/critical.css"></noscript>

Performance Measurement

Core Web Vitals Impact

Resource Hints influence various Core Web Vitals:

  • LCP (Largest Contentful Paint): Preload for hero images and critical CSS
  • FID (First Input Delay): Preload for critical JavaScript
  • CLS (Cumulative Layout Shift): Preload for fonts and critical CSS

Monitoring Tools

  • Google PageSpeed Insights: Shows recommendations for Resource Hints
  • Chrome DevTools: Network tab shows preload activities
  • WebPageTest: Detailed analysis of loading times
  • Lighthouse: Automatic evaluation of Resource Hints

Avoiding common mistakes

1. Excessive usage

❌ Wrong:

<!-- Too many Preload hints -->
<link rel="preload" href="/css/style1.css" as="style">
<link rel="preload" href="/css/style2.css" as="style">
<link rel="preload" href="/css/style3.css" as="style">

✅ Correct:

<!-- Only preload critical resources -->
<link rel="preload" href="/css/critical.css" as="style">

2. Wrong resource types

❌ Wrong:

<link rel="preload" href="/images/logo.png" as="script">

✅ Correct:

<link rel="preload" href="/images/logo.png" as="image">

3. Missing crossorigin attributes

❌ Wrong:

<link rel="preload" href="https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2" as="font">

✅ Correct:

<link rel="preload" href="https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2" as="font" crossorigin>

Implementation in different frameworks

WordPress

// In functions.php
function add_resource_hints() {
    echo '<link rel="dns-prefetch" href="//fonts.googleapis.com">';
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">';
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/css/critical.css" as="style">';
}
add_action('wp_head', 'add_resource_hints', 1);

React/Next.js

// In _document.js or _app.js
<Head>
  <link rel="dns-prefetch" href="//fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preload" href="/css/critical.css" as="style" />
</Head>

Vue.js

// In nuxt.config.js
export default {
  head: {
    link: [
      { rel: 'dns-prefetch', href: '//fonts.googleapis.com' },
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      { rel: 'preload', href: '/css/critical.css', as: 'style' }
    ]
  }
}

Resource Hints Checklist

Before implementation

  • [ ] Critical resources identified
  • [ ] External domains analyzed
  • [ ] Loading times measured
  • [ ] Performance baseline created

During implementation

  • [ ] DNS-Prefetch for external domains
  • [ ] Preconnect for critical external resources
  • [ ] Preload for critical local resources
  • [ ] Prefetch for future pages
  • [ ] Correct as attributes used
  • [ ] crossorigin for CORS resources

After implementation

  • [ ] Performance tests conducted
  • [ ] Core Web Vitals monitored
  • [ ] Browser compatibility tested
  • [ ] Monitoring set up

Future of Resource Hints

New developments

  • Early Hints (103): Server-side hints for even better performance
  • Priority Hints: Fine-grained control over resource priorities
  • HTTP/3 Integration: Optimized hints for HTTP/3 connections

Emerging standards

  • Resource Timing API: Detailed measurement of hint effectiveness
  • Performance Observer: Automatic monitoring of hint performance
  • Speculation Rules: Extended prefetch control

Related topics

Last Update: