Resource Hints

Was sind Resource Hints?

Resource Hints sind HTML-Attribute, die dem Browser Hinweise geben, wie er Elemente effizienter laden kann. Sie ermöglichen es, die Response-Zeit 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 (Google Fonts)
• Analytics-Services
• CDN-Ressourcen
• Social Media Widgets

2. Vorverbindung

Preconnect führt eine vollständige Verbindung zu einer Domain durch, einschließlich DNS-Lookup, Transmission Control Protocol-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 Performance bei kritischen Ressourcen

3. Preload

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

<link rel="preload" href="/Cascading Style Sheets/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 - JavaScript-Dateien
• image - Bilder
• font - Schriftarten
• fetch - Schnittstelle-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 Verzögertes 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" Ursprungs-übergreifend>
<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

<!-- Ausweich-Lösung 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
• Erste-Eingabe-Verzögerung (First Input Delay): Preload für kritische JavaScript
• CLS (Cumulative Layout Shift): Preload für Schriftarten und kritische CSS

Monitoring-Tools

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

Häufige Fehler vermeiden

1. Übermäßige Verwendung

❌ Falsch:

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

✅ Richtig:

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

2. Falsche Ressourcentypen

❌ Falsch:

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

✅ Richtig:

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

3. Fehlende crossorigin-Attribute

❌ Falsch:

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

✅ Richtig:

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

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

JavaScript 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' }
    ]
  }
}

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

• Frühe Hinweise (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

• Resource Timing API: Detaillierte Messung der Hint-Effektivität
• Performance Observer: Automatische Überwachung der Hint-Performance
• Antizipations-Regeln: Erweiterte Prefetch-Kontrolle

Verwandte Themen

• Page Speed & Performance
• Core Web Vitals
• Critical CSS
• Caching-Strategien
• HTTP/2 und HTTP/3