Resource Hints

Was sind Resource Hints?

Resource Hints sind HTML-Attribute, die dem User-Agent Hinweise geben, wie er Ressourcen effizienter laden kann. Sie ermöglichen es, die Ladegeschwindigkeit von Websites zu verbessern, indem der Browser proaktiv Ressourcen vorlädt oder Verbindungen vorbereitet.

Resource Hints sind ein wichtiger Bestandteil der technischen SEO-Optimierung und tragen maßgeblich zur Verbesserung der Core Web Vitals bei.

Die wichtigsten Resource Hints

1. DNS-Prefetch

DNS-Prefetch löst Domain-Namen auf, bevor sie tatsächlich benötigt werden. Dies reduziert die Latenz bei der ersten Anfrage an eine externe Domain.

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

Anwendungsfälle:

• Externe Schriftarten (Font-Service)
• Analytics-Services
• CDN-Ressourcen
• Social Media Widgets

2. Preconnect

Preconnect führt eine vollständige Verbindung zu einer Domain durch, einschließlich DNS-Lookup, TCP-Handshake und TLS-Verhandlung.

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

Vorteile gegenüber DNS-Prefetch:

• Vollständige Verbindungsvorbereitung
• Schnellere Ressourcenladung
• Bessere Effizienz bei kritischen Ressourcen

3. Kritisches Laden

Preload lädt Haupt-Ressourcen mit hoher Priorität vor, die definitiv auf der aktuellen Seite benötigt werden.

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

Unterstützte Ressourcentypen:

• style - CSS-Dateien
• script - Browser-Scripting-Dateien
• image - Bilder
• font - Schriftarten
• fetch - API-Aufrufe

4. Prefetch

Prefetch lädt Ressourcen mit niedriger Priorität vor, die wahrscheinlich auf der nächsten Seite benötigt werden.

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

Einsatzgebiete:

• Navigation zu nächster Seite
• Bilder für Bildergalerien
• JavaScript für interaktive Elemente

Resource Hints für verschiedene Ressourcentypen

CSS-Dateien optimieren

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

<!-- Non-kritische CSS später laden -->
<link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

JavaScript optimieren

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

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

Bilder optimieren

<!-- Hero-Bild mit hoher Priorität -->
<link rel="preload" href="/images/hero.jpg" as="image">

<!-- Bilder für Bedarfs-Laden vorbereiten -->
<link rel="prefetch" href="/images/gallery-1.jpg">
<link rel="prefetch" href="/images/gallery-2.jpg">

Schriftarten optimieren

<!-- Google Fonts optimiert laden -->
<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 für Resource Hints

1. Priorisierung der Hints

2. Reihenfolge der Resource Hints

<!-- 1. DNS-Prefetch für externe Domains -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">

<!-- 2. Preconnect für kritische externe Ressourcen -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://www.google-analytics.com">

<!-- 3. Preload für kritische lokale Ressourcen -->
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/main.js" as="script">

<!-- 4. Prefetch für zukünftige Ressourcen -->
<link rel="prefetch" href="/next-page.html">

3. Fehlerbehandlung

<!-- Fallback für 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-Messung

Core Web Vitals Impact

Resource Hints beeinflussen verschiedene Core Web Vitals:

• Größtes Inhalts-Element (Largest Contentful Paint): Preload für Hero-Bilder und kritische CSS
• FID (First Input Delay): Preload für kritische JavaScript
• Cumulative Layout Shift (Cumulative Layout Shift): Preload für Schriftarten und kritische CSS

Überwachung-Tools

• Google Geschwindigkeits-Analyse: Zeigt Empfehlungen für Resource Hints
• Chrome DevTools: Network-Tab zeigt Preload-Aktivitäten
• WebPageTest: Detaillierte Analyse der Ladezeiten
• SEO-Audit: Automatische Bewertung der Resource Hints

Häufige Fehler vermeiden

1. Übermäßige Verwendung

<!-- Zu viele 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">

<!-- Nur kritische Ressourcen preloaden -->
<link rel="preload" href="/css/critical.css" as="style">

2. Falsche Ressourcentypen

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

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

3. Fehlende crossorigin-Attribute

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

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

Implementierung in verschiedenen Frameworks

Blog-System

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

UI Library/Next.js

// In _document.js oder _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' }
    ]
  }
}

Checkliste für Resource Hints

Vor der Implementierung

• Kritische Ressourcen identifiziert
• Externe Domains analysiert
• Ladezeiten gemessen
• Performance-Baseline erstellt

Während der Implementierung

• DNS-Prefetch für externe Domains
• Preconnect für kritische externe Ressourcen
• Preload für kritische lokale Ressourcen
• Prefetch für zukünftige Seiten
• Korrekte as-Attribute verwendet
• crossorigin für CORS-Ressourcen

Nach der Implementierung

• Performance-Tests durchgeführt
• Core Web Vitals überwacht
• Browser-Kompatibilität getestet
• Monitoring eingerichtet

Zukunft der Resource Hints

Neue Entwicklungen

• Early Hints (103): Server-seitige Hints für noch bessere Performance
• Priority Hints: Feingranulare Kontrolle über Ressourcenprioritäten
• HTTP/3 Integration: Optimierte Hints für HTTP/3-Verbindungen

Emerging Standards

• Ressourcen-Timing: Detaillierte Messung der Hint-Effektivität
• Metriken-Beobachter: Automatische Überwachung der Hint-Performance
• Speculation Rules: Erweiterte Prefetch-Kontrolle

Letzte Aktualisierung: 21. Oktober 2025