Deutsch Deutsch English English

Resource Hints

What are Resource Hints?

Resource Hints are Markup attributes that give the Surfer hints on how to load resources 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. 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
  • Content Network resources
  • Social Channels Gadgets

2. Preconnect

Preconnect establishes a complete connection to a domain, including DNS lookup, TCP handshake, and Encryption 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 Speed 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 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">

<!-- Modular 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

<!-- Contingency for Preload -->
<link rel="preload" href="/css/critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<Basic HTML><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
  • Input Responsiveness (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
  • DevTools: Network tab shows preload activities
  • WebPageTest: Detailed analysis of load times
  • Performance Audit: 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

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

JavaScript Library/Next Framework

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

Frontend Framework

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

  • Early Hints (103): Server-side hints for even better performance
  • Priority Hints: Fine-grained control over resource priorities
  • Hypertext Transfer Protocol/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