--- title: HTML-natives lazy loading für Iframes und Bilder in TYPO3 v10 url: "https://b13.com/de/wissen/lazy-loading-in-typo3-v10-noch-einfacher" description: "Lazy loading ist in #TYPO3v10 einfacher denn je. Eines der 13 Dinge, die wir an der neuesten und besten Version am meisten lieben!" image: "https://b13.com/fileadmin/_processed_/d/4/csm_Lazy_Images_191-1_e6d47a4c8c.png" date: 2020-07-28 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # HTML-natives lazy loading für Iframes und Bilder in TYPO3 v10 [ TYPO3v10 ](https://b13.com/de/wissen/typo3v10) [ Performance ](https://b13.com/de/wissen/performance) Lazy loading in TYPO3 v10: noch einfacher =========================================== ![](https://b13.com/fileadmin/_processed_/d/3/csm_daniel_sattler_36c9da5a11.jpg)Daniel Sattler 28. Juli 2020 [ RSS Feed ](https://b13.com/de/rss.xml) ![Ein stilisierter Flamingo schwebt in einem Pool mit einem Getränk im Flügel, umgeben von abstrakten Formen und tropischen Blättern. Die Farbpalette umfasst tiefe Violetttöne und sanfte Pastellfarben.](https://b13.com/fileadmin/_processed_/9/e/csm_Lazy_Images_397931df4a.webp) 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. Denkst du über ein Upgrade auf TYPO3 v10 nach? ------------------------------------------------ Hol dir eine zweite Meinung oder ein Angebot ein! [ Let’s connect ](https://b13.com/de/kontakt) 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](https://caniuse.com/#search=loading) (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. Informiere dich über unseren 2nd Opinion- und Upgrade-Service --------------------------------------------------------------- [ Unsere Upgrade-Lösung ](https://b13.com/de/loesungen/typo3-upgrades) ### Geschrieben von: ![Mann mit einem Schnurrbart, der eine Brille und eine Mütze trägt, lächelt in die Kamera. Er ist in ein helles Hemd gekleidet, mit einem verschwommenen Hintergrund.](https://b13.com/fileadmin/_processed_/d/3/csm_daniel_sattler_626e05b0b4.webp) Wir freuen uns über Daniels Anwesenheit, seine Kreativität und seinen Schnurrbart im Büro, und die Kunden erhalten dank Daniel besser präsentierte, performantere Website-Frontends. Sein wesentliches Werkzeug: GitKraken Daniel Sattler Development [ mehr von Daniel Sattler ](https://b13.com/de/team/daniel-sattler) Ähnliche Artikel ------------------ - ![Eine menschliche Hand schüttelt eine Roboterhand vor einem lila Hintergrund mit Herzmustern, was die Zusammenarbeit zwischen Menschen und Technologie symbolisiert.](https://b13.com/fileadmin/_processed_/6/2/csm_AIbotsLoveMarkdown_Headerbild_72fe5820d6.webp) ### Das Internet ist nicht mehr nur für Menschen — KI-Bots lieben Markdown 28. Januar 2026 | Benni Mack Discover why most web traffic is now automated and how TYPO3’s structured content model prepares websites for humans, editors, and AI systems. [ weiterlesen: Das Internet ist nicht mehr nur für Menschen — KI-Bots lieben Markdown ](https://b13.com/de/wissen/das-internet-ist-nicht-mehr-nur-fuer-menschen-ki-bots-lieben-markdown) - ![Ein Laptop ist mit mehreren Ordnern und Browserfenstern verbunden, was Konzepte der Datenverwaltung und -organisation veranschaulicht.](https://b13.com/fileadmin/_processed_/8/9/csm_SubdirectoriesSubdomains_Sharing_be4a05761c.webp) ### Unterverzeichnisse oder Subdomains: Was ist besser für SEO? 23. Oktober 2025 | David Steeb Unterverzeichnisse, Subdomains und bessere SEO-Rankings. Die Antwort auf die Frage „Was soll ich verwenden?“ ist immer: „Es kommt drauf an.“ Subdomains und Unterverzeichnisse… [ weiterlesen: Unterverzeichnisse oder Subdomains: Was ist besser für SEO? ](https://b13.com/de/wissen/unterverzeichnisse-oder-subdomains-was-ist-besser) - ![Illustration einer Rakete, die von einem Laptopbildschirm startet – Symbol für schnelle Ladezeiten von Websites.](https://b13.com/fileadmin/_processed_/9/f/csm_QuickLoad_Headerbild_914e5cfa94.webp) ### Welche Faktoren sorgen dafür, dass eine Website so schnell wie möglich geladen wird? 30. April 2025 | David Steeb Entdecke praktische Lösungen zur Verbesserung der Ladezeiten und der Leistung von Websites durch Server-, Netzwerk- und Front-End-Optimierungen, einschließlich TYPO3-spezifischer… [ weiterlesen: Welche Faktoren sorgen dafür, dass eine Website so schnell wie möglich geladen wird? ](https://b13.com/de/wissen/schnelles-laden-der-webseite) - ![Ein Weg führt durch stilisierte Wolken, flankiert von einer Lupe und Zahnrädern, mit Symbolen, die Texte und Dokumente im Hintergrund darstellen und Themen von Erkundung und Technologie andeuten.](https://b13.com/fileadmin/_processed_/8/0/csm_accessibility-guide_0acd1932f3.webp) ### Ein Leitfaden für die Berücksichtigung von Barrierefreiheit im UX-Design 12. April 2024 | Franzi Töpler Menschen mit Beeinträchtigungen stellen eine der größten Gruppen von Online-Nutzern dar, aber sie werden in der digitalen Welt oft übersehen. Die Verbesserung der Barrierefreiheit… [ weiterlesen: Ein Leitfaden für die Berücksichtigung von Barrierefreiheit im UX-Design ](https://b13.com/de/wissen/ein-leitfaden-fuer-die-beruecksichtigung-von-barrierefreiheit-im-ux-design) - ![Ein türkisfarbener Laptop zeigt eine gelbe Herzschlaglinie über den Bildschirm, mit abstrakten Grafiken im Hintergrund, die auf Datenanalyse oder Überwachung hindeuten.](https://b13.com/fileadmin/_processed_/0/8/csm_CoreWebVitals_Headerbild_b4abe20660.webp) ### Eine Core Web Vital-Anleitung für TYPO3-Benutzer 16. Februar 2024 | Franzi Töpler Die Core Web Vitals sind die wichtigsten Metriken, um festzustellen, ob eine Webseite schnell und ohne Unterbrechungen auf Benutzerinteraktionen reagiert. TYPO3-Administratoren und… [ weiterlesen: Eine Core Web Vital-Anleitung für TYPO3-Benutzer ](https://b13.com/de/wissen/eine-core-web-vital-anleitung-fuer-typo3-benutzer) - ![Ein stilisierter Schatzkarte mit Landschaftsformen, einem gewundenen Pfad, Bäumen und Bergen, auf der ein "X" einen bestimmten Ort markiert. Der Hintergrund ist ein Farbverlauf in Lila mit abstrakten Formen.](https://b13.com/fileadmin/_processed_/4/1/csm_ux-trouble-shooting-user-journey_211db787f7.webp) ### Optimierung des User Journey: Wie du deinen Nutzern hilfst, das zu finden, wonach sie suchen 14. März 2023 | Laura Heine Die User Journey ist ein wesentlicher Teil der User Experience (UX). Wenn Nutzer:innen eine Aufgabe in deiner App oder auf deiner Website nicht erledigen können, sinkt ihr… [ weiterlesen: Optimierung des User Journey: Wie du deinen Nutzern hilfst, das zu finden, wonach sie suchen ](https://b13.com/de/wissen/optimierung-des-user-journey-wie-du-deinen-nutzern-hilfst-das-zu-finden-wonach-sie-suchen) - ![Eine Lupe überlagert verschiedene abstrakte Formen, darunter Zahnräder und Rechtecke, vor einem dunklen lila Hintergrund. Das Design deutet auf Themen wie Suche, Analyse und Technologie hin.](https://b13.com/fileadmin/_processed_/b/a/csm_ux-trouble-shooting-search_baed040eb3.webp) ### Die Website-Suche ist mehr als ein kleiner Kasten in der Ecke 10. März 2023 | Laura Heine Nutzer wollen Informationen schnell finden. Wenn die Seitennavigation unzureichend ist, greifen sie schnell auf die Suchfunktion zurück. Heutzutage erwarten die Nutzer:innen, dass… [ weiterlesen: Die Website-Suche ist mehr als ein kleiner Kasten in der Ecke ](https://b13.com/de/wissen/die-website-suche-ist-mehr-als-ein-kleiner-kasten-in-der-ecke) - ![Ein stilisiertes Grafikdesign, das ein Haus zeigt, mit drei horizontalen Balken, die Datenspeicherung repräsentieren, einem Vorhängeschloss, das Sicherheit symbolisiert, und einem Schlüssel. Die Hintergrundelemente umfassen Blätter und abstrakte Formen, die ein digitales oder cloudbasiertes Thema andeuten.](https://b13.com/fileadmin/_processed_/2/5/csm_on-prem_e9249f94ba.webp) ### Warum du On-Prem statt SaaS für dein CMS wählen solltest? 14. Februar 2023 | David Steeb Unternehmen haben heute viele Optionen für die Softwarebereitstellung zur Auswahl. Da Software-as-a-Service (SaaS) und Cloud-basierte Implementierungsmodelle auf dem Vormarsch… [ weiterlesen: Warum du On-Prem statt SaaS für dein CMS wählen solltest? ](https://b13.com/de/wissen/why-choose-on-prem-over-saas-for-your-cms-in-2022) - ![Ein Computer-Monitor zeigt ein Sternenexplosion-Design, umgeben von stilisierten Pflanzen und einer Schreibtischlampe, alles vor einem warmen, verlaufenden Hintergrund mit abstrakten Formen.](https://b13.com/fileadmin/_processed_/d/e/csm_workspaces_4bcc71e65c.webp) ### Verbesserte Workspaces 01. Juli 2022 | Benni Mack Eine der leistungsstarken Funktionen von TYPO3 für die Veröffentlichung von Inhalten sind die Workspaces — das Erstellen und Testen in einer Entwurfsumgebung vor der… [ weiterlesen: Verbesserte Workspaces ](https://b13.com/de/wissen/verbesserte-workspaces) - ![Ein gelbes Benutzeroberflächenpanel mit mehreren Abschnitten und Reitern, vor einem dunkelgrünen Hintergrund mit abstrakten Formen und Zahnrädern. Das Panel enthält Platzhalter für Text und Kontrollkästchen.](https://b13.com/fileadmin/_processed_/9/e/csm_Dashboard_63f98a27c9.webp) ### Optimiere deinen täglichen Workflow mit dem TYPO3 Dashboard 30. März 2021 | Oliver Bartsch Das TYPO3 Dashboard ist auf maximale Erweiterbarkeit ausgerichtet. Entdecke die Vorteile, wirf einen Blick unter die Haube und finde heraus, wie du deine eigenen Widgets erstellen… [ weiterlesen: Optimiere deinen täglichen Workflow mit dem TYPO3 Dashboard ](https://b13.com/de/wissen/optimiere-deinen-taeglichen-workflow-mit-dem-typo3-dashboard)