Deutsch Deutsch English English

Speed 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 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
  • CDN resources
  • Social Networks widgets

2. Preconnect

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

<link rel="preconnect" href="HTTP Secure://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 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 Deferred 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'">
<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
  • 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
  • SEO 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);

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

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

  • Server-side Hints (103): Server-side hints for even better performance
  • Weight Control: Fine-grained control over resource priorities
  • 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 Control: Extended prefetch control

Last Updated: October 21, 2025