Bildpriorität optimieren

Browser verwenden Heuristiken, um Bildern Ladeprioritäten zuzuweisen. Diese Standardeinstellungen stimmen jedoch möglicherweise nicht immer mit dem Largest Contentful Paint (LCP) Ihrer Seite überein.

Wenn Sie fetchpriority für ein <img>-Element verwenden, können Sie dem Browser explizit die Wichtigkeit eines Bildes signalisieren. So werden wichtige Bilder schneller geladen, während unwichtige Bilder nicht um Bandbreite konkurrieren.

Das Attribut loading=lazy verhindert, dass Bilder überhaupt heruntergeladen werden, wenn sie sich weit genug außerhalb des Bildschirms befinden. So können Bilder noch besser priorisiert werden.

Implementierung

1. LCP-Bild identifizieren: Ermitteln Sie, welches Bild am wahrscheinlichsten für den Largest Contentful Paint (LCP) verantwortlich ist (normalerweise das Hero-Image oben auf der Seite).
2. LCP-Priorität erhöhen: Fügen Sie dem <img>-Element für den LCP-Kandidaten fetchpriority="high" hinzu.
3. Nicht kritische Bilder depriorisieren: Füge fetchpriority="low" für Bilder hinzu, die Teil einer sekundären Benutzeroberfläche sind oder erst nach einer Nutzerinteraktion angezeigt werden (z. B. Mega-Menüs, Modals oder Karussellfolien außerhalb des Bildschirms).
4. Lazy Loading optimieren: Verwenden Sie loading="lazy" niemals für das LCP-Bild. Bei Standardbildern, die sich nicht im „above the fold“-Bereich befinden, reicht loading="lazy" aus, um die Anfrage zu verschieben, bis der Nutzer in die Nähe scrollt. Fügen Sie diesen Bildern nicht fetchpriority="low" hinzu, da sie mit normaler Priorität geladen werden sollen, sobald der Nutzer zu ihnen scrollt. Reserviere fetchpriority="low" für Bilder, die sich technisch gesehen „above the fold“ befinden, aber nicht sofort sichtbar sind (z.B. ausgeblendete Karussellfolien oder Megamenüs). Für diese ausgeblendeten Bilder ist es auch akzeptabel, loading="lazy" zu verwenden. Der Browser verarbeitet das Timing der Anfrage und berücksichtigt dabei die niedrige Priorität.
5. Standardprioritäten bevorzugen: Wenn ein Bild eine normale Ladepriorität haben soll, lassen Sie das Attribut fetchpriority ganz weg, anstatt es auf auto festzulegen. Dies ist eine stilistische Konvention, um den HTML-Code sauberer zu halten und gleichzeitig die nativen Heuristiken des Browsers zu nutzen.

Beispielcode

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

Best Practices

• VERPFLICHTEND: Wende fetchpriority="high" immer auf das LCP-Bild an.
• OBLIGATORISCH: Verwenden Sie fetchpriority="high" nur für maximal 1–2 kritische Bilder, um Netzwerküberlastung und eine Verwässerung der Prioritätssteigerung zu vermeiden.
• OBLIGATORISCH: Verwende fetchpriority="low" für Bilder, die sich technisch gesehen „above the fold“ befinden, aber anfangs ausgeblendet sind (z.B. ausgeblendete Karussellfolien, Bilder in Megamenüs).
• VERPFLICHTEND: Verwenden Sie nicht fetchpriority="low" für Standardbilder im nicht sichtbaren Bereich, für die bereits loading="lazy" verwendet wird. Diese Bilder sollten mit normaler Priorität geladen werden, sobald sie im Darstellungsbereich erscheinen.
• EMPFOHLEN: Vermeiden Sie die Verwendung von fetchpriority="auto". Wenn du die Standardpriorität verwenden möchtest, lass das Attribut ganz weg, um den HTML-Code übersichtlich zu halten.
• Kombinieren Sie fetchpriority="high" NICHT mit loading="lazy".
• Verwenden Sie NICHT das verworfene Attribut importance. Es wurde durch fetchpriority ersetzt und wird von keinem Browser unterstützt.
• Verwenden Sie NICHT den verworfenen Wert loading="auto". Sie wurde ursprünglich von Chrome unterstützt, wurde aber entfernt und wird von keinem Browser mehr unterstützt.

Fallback-Strategie

Das Attribut fetchpriority ist eine progressive Verbesserung für das Element <img>. Wenn ein Browser das Attribut nicht unterstützt, wird es ignoriert und der Browser verwendet seine Standardprioritätsheuristik.