Erkenntnisse zur Anwendung des standardisierten Ladeattributs
Mit diesem Beitrag möchte ich CMS-Plattformentwickler und Beitragende (also Personen, die CMS-Kerne entwickeln) davon überzeugen, dass jetzt der richtige Zeitpunkt ist, die Unterstützung für das Lazy Loading von Bildern auf Browserebene zu implementieren. Außerdem gebe ich Ihnen Empfehlungen dazu, wie Sie bei der Implementierung von Lazy Loading für eine optimale Nutzererfahrung sorgen und Anpassungen durch andere Entwickler ermöglichen können. Diese Richtlinien beruhen auf unserer Erfahrung beim Hinzufügen von Support zu WordPress sowie bei der Implementierung der Funktion durch Joomla, Drupal und TYPO3.
Unabhängig davon, ob Sie ein CMS-Plattformentwickler oder ein CMS-Nutzer (d.h. eine Person, die Websites mit einem CMS erstellt) sind, können Sie diesen Beitrag verwenden, um mehr über die Vorteile des Lazy Loadings auf Browserebene in Ihrem CMS zu erfahren. Im Abschnitt Nächste Schritte findest du Vorschläge, wie du deine CMS-Plattform von der Implementierung von Lazy Loading überzeugen kannst.
Hintergrund
Im letzten Jahr ist Lazy Loading für Bilder und iFrames, die das Attribut loading verwenden, Teil des HTML-Standards WHATWG und wird von verschiedenen Browsern zunehmend genutzt.
Diese Meilensteine sind jedoch nur die Grundlage für ein schnelleres und ressourcensparenderes Web.
Das Attribut loading kann jetzt in der verteilten Webumgebung verwendet werden.
Content-Management-Systeme nutzen etwa 60% aller Websites. Diese Plattformen spielen also eine entscheidende Rolle bei der Verbreitung moderner Browserfunktionen im Web. Einige beliebte Open-Source-CMS, wie WordPress, Joomla und TYPO3 haben bereits Unterstützung für das Attribut loading auf Bildern implementiert. Sehen wir uns nun ihre Ansätze und die Erkenntnisse an, die für die Implementierung der Funktion in anderen CMS-Plattformen relevant sind. Lazy Loading ist eine wichtige Funktion zur Leistung im Web, von der Websites im großen Maßstab profitieren sollten. Daher empfehlen wir, das Lazy Loading auf der Kernebene des CMS zu verwenden.
Was spricht für die Implementierung von Lazy Loading?
Standardisierung
Die Einführung nicht standardisierter Browserfunktionen in CMS ermöglicht umfassende Tests und kann Verbesserungsmöglichkeiten aufzeigen. Der allgemeine Konsens zwischen CMS ist jedoch, dass eine Browserfunktion, die nicht standardisiert ist, vorzugsweise in Form einer Erweiterung oder eines Plug-ins für die jeweilige Plattform implementiert werden sollte. Erst wenn sie standardisiert sind, kann eine Funktion für die Einführung im Plattformkern in Betracht gezogen werden.
Unterstützte Browser
Die Browserunterstützung für die Funktion ist ein ähnliches Problem: Die Mehrheit der CMS-Nutzer sollte davon profitieren können. Wenn ein erheblicher Prozentsatz der Browser die Funktion noch nicht unterstützt, muss die Funktion dafür sorgen, dass sie für diese Browser zumindest keine negativen Auswirkungen hat.
Grenzwerte für die Entfernung vom Darstellungsbereich
Ein häufiges Problem bei Lazy-Loading-Implementierungen besteht darin, dass sie prinzipiell die Wahrscheinlichkeit erhöhen, dass ein Bild nicht geladen wird, wenn es im Darstellungsbereich des Nutzers sichtbar wird, da der Ladezyklus später beginnt. Im Gegensatz zu früheren JavaScript-basierten Lösungen gehen Browser hier konservativ vor und können außerdem ihren Ansatz auf der Grundlage realer Daten zur Nutzererfahrung optimieren, um die Auswirkungen zu minimieren. Daher sollte Lazy Loading auf Browserebene von CMS-Plattformen problemlos übernommen werden können.
Empfehlungen für die Nutzererfahrung
Dimensionsattribute für Elemente erforderlich
Um Layoutverschiebungen zu vermeiden, empfehlen wir seit Langem, dass eingebettete Inhalte wie Bilder oder iFrames immer die Dimensionsattribute width und height enthalten, damit der Browser das Seitenverhältnis dieser Elemente ableiten kann, bevor sie tatsächlich geladen werden. Diese Empfehlung ist unabhängig davon relevant, ob für ein Element Lazy Loading verwendet wird oder nicht. Da jedoch die Wahrscheinlichkeit, dass ein Bild einmal im Darstellungsbereich nicht vollständig geladen wird, um 0,1% höher ist, eignet sich diese Lösung auch etwas besser, wenn Lazy Loading eingesetzt wird.
CMS sollten vorzugsweise Dimensionsattribute für alle Bilder und iFrames bereitstellen. Wenn dies nicht für jedes dieser Elemente möglich ist, wird empfohlen, Lazy Loading für Bilder zu überspringen, wenn diese nicht beide Attribute haben.
Vermeiden Sie Lazy Loading für „above the fold“-Elemente, die ohne Scrollen sichtbar sind.
Derzeit wird empfohlen, mit CMS nur loading="lazy"-Attribute zu Bildern und iFrames hinzuzufügen, die sich „below the fold“ befinden. So vermeiden Sie Verzögerungen beim Messwert Largest Contentful Paint, der in einigen Fällen erheblich sein kann, wie im Juli 2021 festgestellt wurde. Es ist jedoch komplex, die Position eines Elements im Verhältnis zum Darstellungsbereich vor dem Renderingprozess zu beurteilen. Dies gilt insbesondere, wenn das CMS einen automatisierten Ansatz zum Hinzufügen von loading-Attributen verwendet, aber auch bei manueller Eingriffe mehrere Faktoren berücksichtigt werden müssen, z. B. die unterschiedlichen Größen und Seitenverhältnisse des Darstellungsbereichs. Es wird jedoch dringend empfohlen, Hero-Images und andere Bilder oder iFrames, die wahrscheinlich „above the fold“ erscheinen, nicht für das Lazy Loading zu verwenden.
JavaScript-Fallback vermeiden
JavaScript kann zwar verwendet werden, um Lazy Loading für Browser bereitzustellen, die das loading-Attribut (noch) nicht unterstützen. Bei solchen Verfahren muss jedoch anfangs immer das src-Attribut eines Bildes oder iFrames entfernt werden. Dies führt bei Browsern, die das Attribut unterstützen, zu einer Verzögerung. Darüber hinaus vergrößert sich durch die Einführung einer solchen JavaScript-basierten Lösung in den Front-Ends eines umfangreichen CMS die Fläche für potenzielle Probleme. Dies ist einer der Gründe dafür, dass kein großes CMS vor der standardisierten Browserfunktion im Kern Lazy Loading implementiert hatte.
Technische Empfehlungen
Lazy Loading standardmäßig aktivieren
Für CMS, die Lazy Loading auf Browserebene implementieren, empfehlen wir grundsätzlich, es standardmäßig zu aktivieren. Das heißt, loading="lazy" sollte Bildern und iFrames hinzugefügt werden, vorzugsweise nur für Elemente, die Dimensionsattribute enthalten.
Die standardmäßige Aktivierung dieser Funktion führt zu größeren Einsparungen bei den Netzwerkressourcen, als wenn sie manuell aktiviert werden müsste, beispielsweise pro Image.
loading="lazy" sollte nach Möglichkeit nur zu Elementen hinzugefügt werden, die wahrscheinlich „below the fold“ (mit Scrollen sichtbar) erscheinen.
Diese Anforderung kann für ein CMS aufgrund mangelnder clientseitiger Bekanntheit und unterschiedlicher Darstellungsgrößen komplex sein. Wir empfehlen jedoch, zumindest ungefähre Heuristiken zu verwenden, um Elemente wie Hero-Images, die wahrscheinlich „above the fold“ erscheinen, von Lazy Loading wegzulassen.
Änderungen an Elementen zulassen
Obwohl loading="lazy" standardmäßig zu Bildern und iFrames hinzugefügt werden sollte, ist es wichtig, dass das Attribut bei bestimmten Bildern weggelassen werden kann, z. B. um für LCP zu optimieren. Wenn die Zielgruppe des CMS im Durchschnitt als technisch versierter angesehen wird, könnte dies ein UI-Steuerelement sein, das für jedes Bild und iFrame sichtbar ist, mit dem Lazy Loading für dieses Element deaktiviert werden kann.
Alternativ oder zusätzlich kann eine API für externe Entwickler freigegeben werden, damit diese ähnliche Änderungen über Code vornehmen können.
Bei WordPress kannst du beispielsweise das Attribut loading entweder für ein gesamtes HTML-Tag oder einen gesamten Kontext oder für ein bestimmtes HTML-Element im Inhalt überspringen.
Vorhandene Inhalte nachrüsten
Grundsätzlich gibt es zwei Ansätze, um das Attribut loading HTML-Elementen in einem CMS hinzuzufügen:
- Fügen Sie das Attribut entweder über den Inhaltseditor im Back-End hinzu und speichern Sie es dauerhaft in der Datenbank.
- Fügen Sie das Attribut im laufenden Betrieb hinzu, wenn Sie Inhalte aus der Datenbank im Front-End rendern.
Es wird empfohlen, dass das CMS beim Rendern das Attribut spontan hinzufügt, damit auch vorhandene Inhalte vom Lazy Loading profitieren. Wenn das Attribut ausschließlich über den Editor hinzugefügt werden könnte, profitieren nur neue oder kürzlich geänderte Inhalte davon. Die Auswirkungen des CMS auf die Einsparung von Netzwerkressourcen werden dadurch deutlich reduziert. Wenn das Attribut spontan hinzugefügt wird, sind künftige Änderungen leicht möglich, falls die Funktionen des Lazy Loadings auf Browserebene weiter erweitert werden sollten.
Wenn das Attribut spontan hinzugefügt wird, sollte ein möglicherweise vorhandenes loading-Attribut für ein Element berücksichtigt werden, damit ein solches Attribut Vorrang hat. Auf diese Weise könnte auch das CMS oder eine Erweiterung den Editor-gesteuerten Ansatz implementieren, ohne einen Konflikt mit doppelten Attributen zu verursachen.
Serverseitige Leistung optimieren
Wenn Sie das Attribut loading beispielsweise mit einer serverseitigen Middleware spontan in Inhalte einfügen, spielt Geschwindigkeit eine Rolle. Je nach CMS kann das Attribut entweder über eine DOM-Durchsuchung oder über reguläre Ausdrücke hinzugefügt werden, wobei Letztere aus Leistungsgründen empfohlen werden.
Reguläre Ausdrücke sollten auf ein Minimum beschränkt werden. Beispielsweise sollte ein einzelner regulärer Ausdruck alle img- und iframe-Tags im Inhalt einschließlich ihrer Attribute erfassen und dann jedem Tag-String das Attribut loading hinzufügen. Bei WordPress gibt es beispielsweise einen einzigen allgemeinen regulären Ausdruck, mit dem verschiedene spontane Vorgänge für bestimmte Elemente ausgeführt werden können. Dabei wird nur loading="lazy" hinzugefügt, wobei ein einziger regulärer Ausdruck zur Vereinfachung mehrerer Funktionen verwendet wird. Diese Form der Optimierung ist ein weiterer Grund, warum Lazy Loading im Kern eines CMS gegenüber einer Erweiterung empfohlen wird, da es eine bessere serverseitige Leistungsoptimierung ermöglicht.
Nächste Schritte
Prüfen Sie, ob es bereits ein Ticket für eine Funktionsanfrage gibt, um Unterstützung für die Funktion in Ihrem CMS hinzuzufügen, oder öffnen Sie ein neues Ticket, wenn es noch keines gibt. Verwenden Sie bei Bedarf Verweise auf diesen Beitrag, um Ihren Vorschlag zu unterstützen.
Senden Sie mir einen Tweet (felixarntz@) oder lassen Sie Ihr CMS auf dieser Seite auflisten, wenn Lazy Loading auf Browserebene unterstützt wird. Falls Sie auf andere Herausforderungen stoßen, bin ich auch neugierig, mehr darüber zu erfahren.
Wenn Sie ein CMS-Plattformentwickler sind, sehen Sie sich an, wie andere CMS Lazy Loading implementiert haben:
Sie können die Erkenntnisse aus Ihrer Forschung und die technischen Empfehlungen aus diesem Beitrag nutzen, um Code zu Ihrem CMS beizusteuern, z. B. in Form einer Patch- oder Pull-Anfrage.
Hero-Foto von Colin Watts auf Unsplash