Resource Hints

Was sind Resource Hints?

Resource Hints sind HTML-Attribute, die dem Surfer Hinweise geben, wie er Ressourcen effizienter laden kann. Sie ermöglichen es, die Ladezeiten 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 Google-Metriken 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 (Externe Schriftarten)
• Analytics-Services
• CDN-Ressourcen
• Social Media Plugins

2. Preconnect

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 Effizienz 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="/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 - JS-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 Lazy Loading 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:

• LCP (Largest Contentful Paint): Preload für Hero-Bilder und kritische CSS
• Interaktivitäts-Verzögerung (First Input Delay): Preload für kritische JavaScript
• CLS (Cumulative Layout Shift): Preload für Schriftarten und kritische CSS

Monitoring-Tools

• Google Performance-Insights: 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

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

// 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 Cross-Origin Resource Sharing-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
• Übertragungsprotokoll/3 Integration: Optimierte Hints für HTTP/3-Verbindungen

Emerging Standards

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

Verwandte Themen

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