Lazy loading in TYPO3 v10: noch einfacher

TYPO3 v10 LTS ist das erste große Content-Management-System, das die native HTML-Implementierung von Lazy Loading von Haus aus unterstützt. Das spart Entwicklungsaufwand und macht deine Website fit für die Zukunft. Durch Lazy Loading wird das Laden einer Website beschleunigt, da keine Bilder heruntergeladen werden, die ein Benutzer nie sieht.

Das Lade-Rätsel

Wenn ein Baum umfällt, aber niemand da ist, um das zu sehen, ist es dann passiert? Ein Stuhl in einem leeren Raum, ist er da? Eine weitere Frage für unsere Leser mit philosophischem Hintergrund lautet: Wenn ein Bild auf einer Webseite niemals in das Browserfenster gelangt, bevor der Benutzer auf eine andere Seite wechselt, war es dann jemals da?

Über die ersten beiden Beispiele kann man nach dem Feierabend noch lange diskutieren, das dritte Beispiel hat eine definitive Antwort: Standardmäßig werden alle Bilder auf einer Seite geladen, auch wenn sie nie in das Ansichtsfenster gelangen. Es kann also sein, dass ein Gerät Megabytes von Daten herunterladen muss, ohne dass der Benutzer sie jemals sieht oder braucht. Diese Bilder können ungesehen, aber keinesfalls unbemerkt bleiben. Sie kosten Zeit, Bandbreite (und möglicherweise Geld) und Akkulaufzeit.

Lazy Loading ist die Lösung. Die Technik ist so beliebt, dass sie ihren Weg in die HTML-Spezifikation gefunden hat. Die meisten aktuellen Browser unterstützen sie nativ für Bilder und Iframes.

Lazy Loading in HTML

Bisher war der beste Weg, das unnötige Laden eines Bildes oder Iframe zu stoppen, den URI in ein Data-Attribut (z.B. data-src="https://example.com/image.png") und den URI für ein Platzhalterbild in das eigentliche src-Attribut selbst zu setzen.

Der nächste Schritt bestand darin, etwas JavaScript-Code zu schreiben (oder eine Bibliothek zu verwenden), um den Viewport zu beobachten und zu reagieren, sobald ein Platzhalterbild auf den sichtbaren Bereich trifft, und dann die URI aus dem data-src-Attribut zu nehmen und in das src-Attribut zu setzen. Jeglicher Inhalt, der asynchron mit Ajax geladen wurde (Layer, Filter, „Weiterlesen“-Buttons usw.), musste auf Bilder mit data-src-Attributen geparst werden.

Um es für alle einfacher zu machen, wurde lazy loading zur HTML-Spezifikation hinzugefügt. Jetzt lässt sich Lazy Loading einfach durch das Hinzufügen von loading="lazy" zum Bild oder Iframe-Element aktivieren — und der Browser erledigt den Rest. Du kannst dieses Attribut problemlos zu allen Image- und Iframe-Tags hinzufügen und den Browser entscheiden lassen, wann das entsprechende Asset geladen werden soll. Es funktioniert in allen Szenarien, einschließlich Slider-Elementen und Bildern, die in einem zusammenklappbaren Bereich der Seite versteckt sind. Ein weiterer Vorteil ist, dass es sogar für Benutzer funktioniert, die JavaScript deaktiviert haben, was vorher nicht der Fall war.

Browser-Unterstützung

Oder zumindest wird es in Zukunft so sein. Obwohl es in Chrome und Firefox funktioniert, wird es zum Zeitpunkt des Schreibens dieses Artikels von Safari noch nicht unterstützt (es sei denn, du aktivierst es als experimentelle Funktion). Wir hoffen, dass es in MacOS 11 verfügbar sein wird. Wenn Lazy Loading für dich unverzichtbar ist, brauchst Du einen Fallback für ältere Browser — aber so oder so, mit TYPO3 v10 bist Du bestens gerüstet, wenn Lazy Loading in allen Browsern verfügbar sein wird.

Diese Änderung ist eine großartige Neuigkeit für Redakteure, die sich auf bessere Seitenladezeiten freuen können, ohne selbst etwas tun zu müssen.

Lazy Loading in TYPO3

Inzwischen fragst du also: Was muss ich tun, um die Vorteile dieser neuen Funktion in TYPO3 zu nutzen? Die gute Nachricht: Beim Einrichten einer neuen TYPO3-Installation mit Fluid Styled Content ist diese Funktion standardmäßig aktiviert. Es gibt eine Einstellung styles.content.image.lazyLoading = lazy, die standardmäßig aktiviert ist und in allen Fluid-Templates verwendet wird, die mit Fluid Styled Content ausgeliefert werden.

Wenn du ein Upgrade durchführst oder mit benutzerdefinierten Fluid-Templates arbeitest, ist das Hinzufügen dieser neuen Einstellung zu deinen vorhandenen Vorlagen eine einfache Aufgabe: füge einfach das Attribut loading zu deinen Fluid-Templates hinzu —

1

<f:image src="{file.uid}" treatIdAsReference="1" loading="{settings.media.lazyLoading}" />

— und das war’s. 

Übrigens: Wir lieben dieses Feature so sehr, weil du es — unabhängig davon, welche TYPO3-Version oder welches andere CMS du verwendest — schon heute problemlos zu allen deinen Bild- und Iframe-Tags hinzugefügt werden kann. Alle Browser, die diese Einstellung noch nicht unterstützen, ignorieren sie einfach.

In älteren TYPO3-Versionen kann dieses Attribut manuell hinzugefügt werden, aber wenn ein Upgrade auf TYPO3 v10 durchgeführt wird, reicht es aus, die Templates auf diese Weise anzupassen.

Ein weiterer guter Grund für ein Upgrade auf TYPO3 v10

Es wurde so viel Arbeit in die Entwicklung von TYPO3 v10 zu dem weltweit einzigartigen CMS investiert, das es heute ist. Mit einem Upgrade können Redakteure und Benutzer von der modernen Benutzerfreundlichkeit und Leistung von TYPO3 profitieren. Es ist auch für Entwickler optimiert, wodurch sowohl du als auch deine Agentur Zeit und Geld sparen können - was du in einen höheren Nutzwert für die Benutzer und einen höheren ROI investieren kannst.

Jetzt ist ein guter Zeitpunkt für ein Upgrade. Ein Upgrade zwischen den Hauptversionen war noch nie so einfach. Sprich mit uns, um herauszufinden, wie kosteneffizient ein Upgrade ist.