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 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 Lighthouse-Scores bei.

Die wichtigsten Resource Hints

1. DNS-Zukünftiges Laden

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. 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 Wichtige Assets mit hoher Priorität vor, die definitiv auf der aktuellen Seite benötigt werden.

<link rel="preload" href="/Styling/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 - Application Programming Interface-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-Load 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

<!-- 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
• FID (First Input Delay): Preload für kritische JavaScript
• Layout-Stabilität (Cumulative Layout Shift): Preload für Schriftarten und kritische CSS

Beobachtung-Tools

• Google PageSpeed 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

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

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/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
• Web-Protokoll/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
• Speculation Rules: Erweiterte Prefetch-Kontrolle

Letzte Aktualisierung: 21. Oktober 2025