Deutsch Deutsch English English

Resource Hints

What are Resource Hints?

Resource Hints are HTML attributes that give the browser hints on how to load Content more efficiently. They enable improving website load times by proactively preloading resources or preparing connections.

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

The Most Important Resource Hints

1. Domain Pre-resolution

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
  • Content Network resources
  • Social media Gadgets

2. Preconnect

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

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

Advantages over DNS-Prefetch:

  • Complete connection preparation
  • Faster resource loading
  • Better Effectiveness for Priority Content

3. Priority Loading

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 - Application Programming Interface calls

4. Prefetch

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

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

Application Areas:

  • 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 (cost-effective)
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'">
<Without JavaScript><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
  • Performance Analysis: Detailed analysis of load times
  • Google Lighthouse: Automatic evaluation of Resource Hints

Avoid 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

CMS

// 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);

JavaScript Library/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
  • Load 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

  • Pre-hints (103): Server-side hints for even better performance
  • Priority Management: 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

Last Updated: October 21, 2025