Optimieren Sie die LCP Resource Load Duration

Optimieren Sie die LCP Resource Load Duration

Largest Contentful Paint (LCP) ist eine der 3 Core Web Vitals Leistungsmetriken, die Ihre Online-Benutzererfahrung messen. Der LCP erfasst die Zeit, die das größte Content-Element (ein Bild, Video oder Textblock) benötigt, um im Viewport sichtbar zu werden. Die Resource Load Duration ist ein Teilbereich des LCP, der angibt, wie viel Zeit beim Abrufen der Netzwerkressource für das LCP-Element verloren geht.  Lassen Sie uns tief in den Aspekt der Resource Load Duration des LCP eintauchen und seine Auswirkungen sowie Optimierungsstrategien untersuchen.

Was ist Resource Load Duration im LCP?

Resource Load Duration, oft Load Duration genannt, bezieht sich auf die Zeit, die der Browser benötigt, um die Netzwerkressource (z. B. ein Bild) herunterzuladen, die schließlich das LCP-Element wird. Für Bilder und Videos umfasst diese Dauer die Zeit von dem Moment an, in dem das Bild beginnt herunterzuladen, bis der Browser den Download abschließt. Für textbasierte LCP-Elemente ist die Ladedauer typischerweise null.

Resource Load Duration wird von dem Moment an gemessen, in dem der Browser beginnt, die LCP-Ressource herunterzuladen, bis er den Download beendet hat. Diese Messung ist entscheidend, da sie direkt beeinflusst, wie schnell Benutzer den Hauptinhalt einer Webseite sehen und mit ihm interagieren können. Die Resource Load Duration kann durch mehrere Faktoren beeinflusst werden, darunter:

• Dateigröße: Größere Dateien erfordern längere Downloadzeiten.
• Netzwerkgeschwindigkeit: Langsamere Verbindungen verlängern natürlich die Ladedauer.
• Server-Reaktionsfähigkeit: Verzögerungen in der Serverantwort verlangsamen das Abrufen von Ressourcen.
• Gleichzeitige Downloads: Ressourcen, die gleichzeitig heruntergeladen werden, konkurrieren um Bandbreite, was die Ladezeiten erhöhen kann.

Wie man Resource Load Duration erkennt

Es gibt zwei effektive Wege, um Resource Load Duration zu identifizieren und zu messen:

Network Inspection in Chrome DevTools: Verwenden Sie die Tastenkombination Strg + Umschalt + I, um die Developer Tools von Chrome zu öffnen, wählen Sie dann den Tab "Network" und laden Sie die Seite neu. Suchen Sie das LCP-Element in den Netzwerkanfragen (wenn Sie das LCP-Element wissen möchten, versuchen Sie den Core Web Visualizer). Der Netzwerk-Inspektor zeigt Ihnen, wie lange das Herunterladen der Ressource gedauert hat.

Profi-Tipp: Aktivieren Sie große Anfragezeilen, um zusätzliche Details wie LCP-Latenz, übertragene Größe und tatsächliche Größe zu sehen.

Nutzen Sie Real User Monitoring (RUM) Daten: 

RUM-Tools protokollieren oft LCP-Attributionsdaten. Attributionsdaten für den Largest Contentful Paint enthalten Informationen über die Resource Load Delay. Diese Daten ermöglichen Visualisierungen von Ladezeittrends im Zeitverlauf oder pro Seite und bieten einen klaren Blick auf Ladezeiten über die gesamte Website. Durch die Analyse dieser Muster ist es möglich, Elemente zu identifizieren, die Ladezeiten verlangsamen könnten, und gezielte Möglichkeiten für schnellere, reibungslosere Leistung aufzudecken.

Wie man die LCP Load Duration verbessert

Resource Load-Verzögerungen treten auf, wenn Ressourcen in einer suboptimalen Reihenfolge oder Größe heruntergeladen werden. Zwei Hauptansätze, um dies anzugehen: Datenmenge reduzieren oder Datenbereitstellung optimieren. Hier sind effektive Techniken und Muster, um die LCP Resource Load Duration zu verbessern:

1. Dateigröße optimieren:

Dateigröße optimieren reduziert die Menge an Bytes, die über das Netzwerk gesendet werden müssen. Weniger Daten bedeuten normalerweise weniger Downloadzeit.

Verwenden Sie moderne Bildformate: AVIF und WebP sind führend in der Komprimierung. AVIF bietet insbesondere umfangreiche Komprimierungsmöglichkeiten, oft mit bis zu 50% kleineren Dateigrößen im Vergleich zu WebP, was es ideal für komplexe Fotos ohne Qualitätsverlust macht. WebP behält jedoch eine starke Kompatibilität mit einer breiteren Palette von Browsern bei und ist besonders effektiv für einfachere Bilder.

Responsive Bilder: Das <picture>-Element und das srcset-Attribut ermöglichen maßgeschneiderte Bilder basierend auf der Bildschirmgröße, was kleinere Bildversionen für Mobilgeräte und hochauflösende Versionen für größere Bildschirme ermöglicht. Hier ist ein Beispiel-Setup:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy" alt="Beschreibung">
</picture>

Korrekte Bildabmessungen: Responsive Bilder sind nur ein Teil der Lösung, denn responsiv bedeutet nicht, dass sie die richtige Größe haben. Bildabmessungen an ihre Anzeigegröße anzupassen, ist einer der häufigsten Fehler, die ich sehe. Das Bereitstellen eines 2000px breiten Bildes für einen 500px Anzeigebereich verschwendet Bandbreite und kann Ladezeiten spürbar verlangsamen.

2. Netzwerkleistung verbessern: 

Sobald die Netzwerkgrößen der Ressourcen optimiert sind, ist der nächste Schritt die Maximierung der Netzwerkgeschwindigkeit – oder sogar das vollständige Umgehen des Netzwerks. Dies kann erreicht werden durch:

Netzwerkbedarf umgehen: Es gibt keine schnellere Netzwerkverbindung als eine übersprungene Netzwerkverbindung. Browser haben die Möglichkeit, statische (unveränderliche) Inhalte wie Bilder, Skripte und Stylesheets direkt aus dem lokalen Browser-Cache bereitzustellen. Konfigurieren Sie den Server so, dass er korrekte Caching-Anweisungen an den Browser sendet. Zum Beispiel mit dem Expires-Header.

Das effektivste Setup, um einen Cache-Control-Header zu senden, ist wie folgt:

Cache-Control: public, max-age=31536000, immutable

• public: Erlaubt das Cachen der Ressource sowohl durch Browser als auch durch zwischengeschaltete Caches.
• max-age=31536000: Setzt die maximale Zeit, die die Ressource als frisch angesehen wird, auf ein Jahr (31.536.000 Sekunden).
• immutable: Gibt an, dass sich die Ressource im Laufe der Zeit nicht ändern wird, was unnötige Revalidierungsanfragen verhindert.

HTTP/3: Das neueste HTTP/3-Protokoll kann die Netzwerkleistung verbessern, indem es Latenz reduziert und Paketverluste effizienter behandelt als herkömmliches TCP. (HTTP/3 hat noch mehr Vorteile, insbesondere wenn es um die Time to First Byte geht) 

Um zu überprüfen, ob HTTP/3 aktiviert ist, inspizieren Sie einfach Ihr Netzwerk mit der Tastenkombination Strg-Umschalt-I. Wählen Sie den Netzwerk-Tab, klicken Sie mit der rechten Maustaste auf die Netzwerkspaltenüberschriften und stellen Sie sicher, dass 'Protocol' aktiviert ist. Laden Sie die Seite neu und überprüfen Sie das Protokoll. Für HTTP/3 sollte das Protokoll 'h3' anzeigen.

Self-Hosting von Ressourcen: Wichtige und/oder frühe Netzwerkressourcen sollten standardmäßig immer auf dem Ursprungsserver gehostet werden.  Self-Hosting umgeht die Notwendigkeit, sich mit Servern von Drittanbietern zu verbinden, was erhebliche Verzögerungen durch zusätzliche DNS-Lookups, SSL-Verhandlungen und Verbindungsaufbau verursachen kann. Self-Hosting sorgt für die Wiederverwendung einer einzelnen, bereits offenen Verbindung und reduziert den Aufwand für den Aufbau separater Verbindungen. Self-hosted Ressourcen ermöglichen auch die volle Kontrolle über Komprimierung und Cache-Richtlinien.

Nutzen Sie ein CDN: Ein Content Delivery Network (CDN) ist ein Netzwerk von verteilten Servern, die statische Ressourcen wie Bilder, CSS und JavaScript von Standorten cachen und bereitstellen, die näher am Benutzer liegen. Dies reduziert die Datenreisezeit (die Round-Trip-Time), was sich direkt auf die Resource Load Duration auswirkt. Abgesehen davon bieten viele CDNs auch weitere Vorteile wie Bildkomprimierung, überlegene Netzwerkkonfigurationen (wie HTTP/3 & 0-RTT) und vieles mehr. Spezialisierte Image CDNs können dies weiterführen, indem sie automatische Echtzeit-Optimierungen wie Formatkonvertierung, Größenänderung und Komprimierung anbieten.

3. Ressourcenpriorisierung optimieren

Nach dem Trimmen der Ressourcengröße und der Optimierung des Netzwerks gibt es auch das Problem der Netzwerkkonkurrenz. Wenn mehrere Ressourcen gleichzeitig unter schlechten Netzwerkbedingungen angefordert werden, kann dies die Downloadzeit von Ressourcen erheblich verlangsamen. Deshalb ist es sinnvoll, Netzwerkkonkurrenz zu minimieren, indem der Download von Ressourcen geplant wird.

Kritische Ressourcen priorisieren: Markieren Sie essentielle Ressourcen, wie Hero-Images oder Above-the-Fold CSS, mit fetchpriority="high". Dies signalisiert dem Browser, diese Assets zuerst herunterzuladen, damit sie nicht durch Skripte, Widgets oder Elemente von Drittanbietern aufgehalten werden, die nicht sofort geladen werden müssen. Das Priorisieren dieser kritischen Ressourcen reduziert die Ladezeit für den Inhalt, der Ihren Benutzern am wichtigsten ist. Die Kombination von Preload (um späte Entdeckung zu lösen) und fetchpriority="high" (um Netzwerkkonflikte zu lösen) ist die mächtigste Technik, um sicherzustellen, dass die LCP-Ressource so früh und so schnell wie möglich abgerufen wird.

<!-- Für LCP-Bilder, die im initialen HTML sichtbar sind -->
<img src="hero-image.webp" fetchpriority="high" alt="...">

<!-- Um Entdeckung zu verbessern  -->
<link rel="preload" href="hero-image.webp" as="image" fetchpriority="high">

Netzwerkkonflikte reduzieren: Optimieren Sie initiale Downloads, indem Sie nicht-essentielle Assets aufschieben oder "lazy" laden (Lazy-Loading). Verschieben Sie das Laden von Bildern oder Videos, die nicht sofort sichtbar sind, sowie von Hintergrund- oder sekundären Elementen. Die Verwendung von loading="lazy" für Offscreen-Medien ist ein guter Anfang, während das weitere Aufschieben anderer nicht-essentieller Skripte und Assets Bandbreite freimacht und jegliche Konkurrenz mit Ihren kritischen Ressourcen reduziert, wodurch der Hauptinhalt Ihrer Seite schnell lädt und angezeigt wird. Wenden Sie niemals loading="lazy" auf Ihr LCP-Bild an; dies ist ein kritisches Anti-Pattern, das Ihren Score verschlechtern wird.

4. Speculation Rules einrichten

Speculation Rules ermöglicht es Browsern, Webseiten basierend auf der vorhergesagten Benutzernavigation vorab abzurufen (Prefetch) oder vorab zu rendern (Prerender). Prefetching eliminiert effektiv den Time to First Byte-Teilbereich des LCP und hat keinen Einfluss auf die Resource Load Duration. Prerendering rendert die nächste Seite in einem versteckten Tab und lädt alle Seitenressourcen herunter.  Dies eliminierte den Großteil der Ladezeit für das LCP-Element, wie in diesem Beispiel einer LCP-Aufschlüsselung einer vorab gerenderten Seite gezeigt wird.