1. Sie sind hier:
  2. Home
    3. |
  3. Know How
    4. |
  4. TYPO3-Websites mit lazy loading beschleunigen

TYPO3 mit lazy loading beschleunigen

Was ist lazy loading?

Von lazy loading spricht man, wenn der Browser nicht mehr die komplette Seite vom Server läd, sondern immer nur den Teil, der gerade angezeigt wird. Diese Technik ist vor allem für Webseiten mit vielen und/oder großen Bildern interessant und verbessert die User Experience nicht nur auf Mobilgeräten.

Für den Einsatz wird in unserem Beispiel die JavaScript-Lösung unveil.js von Luis Almeida. Sie hat den Vorteil, dass sie extrem klein(weniger als 1 KB) ist und damit die Ladezeiten nicht beeinträchtigt.

 

Lösungskonzept

Das Prinzip dahinter ist relativ einfach erklärt

Ein Bild wird normalerweise für folgende HTML-Anweisung in eine Seite eingebunden:

 

<img src="bild.png" class="..." alt=“...“ title=“...“ />

 

Sobald der Browser beim Parsen an diese Stelle kommt, läd er das Bild sofort vom Server.

Dieses Verhalten wird nun unterbunden, in dem der Bildname nicht mehr im src-Attribut des Image-Tags steht, sondern in einem benutzerdefinierten Attribut(hier. "data-src"):

 

<img src="" data-src="bild.png" class=“lazy“ alt=“...“ title=“...“ />

 

Der Browser macht an dieser Stelle erstmal gar nichts. Mit der Anweisung class="lazy" teilt man dem JavaScript-Programm mit, dass diese Ressource nachgeladen werden muss.

Über die Methode $.unveil(200) definiert man nun, dass die Ressourcen 200 Pixel, bevor sie in den sichbaren Bereich(=Viewport) rutschen, nachgeladen werden sollen. Die Zahl 200 kann beliebig verändert werden.

Das Nachladen funktioniert dann, in dem der Wert in data-src (also der Name der Bilddatei, hier bild.png) in das Attribut src geschrieben wird.

Was ist in TYPO3 zu tun?

Zunächst ist via TYPOSCRIPT die JavaScript-Bilbliothek unveil.js einzubinden:

 

page.includeJSFooter.unveil = fileadmin/template/js/jquery.unveil.min.js
page.includeJSFooter.unveilstarter = fileadmin/template/js/starter.js

 

Um das img-Tag von TYPO3 anzupassen, müssen die jeweiligen Layouttemplates-Dateien(je nach Verwendung entweder Fluid Styled Content oder CSS Styled Content)  angepasst werden.

Wir verwenden Fluid Styled Content und kopieren daher den zu überschreibenden Code aus der Systemumgebung:

fluid_styled_content/Resources/Private/Partials/Media/Rendering/Image.html

in ein lokales fileadmin-Unterverzeichnis und ändern die Stellen, an denen das img-Attribut erstellt wird wie folgt(alter Code mit <!-- --> auskommentiert:

 

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
  <f:if condition="{dimensions.width} && {dimensions.height}">
    <f:then>
      <f:comment><!--
              <f:media  additionalAttributes="{itemprop:'image'}" class="image-embed-item" file="{file}" width="{data.imagewidth}c" height="{data.imageheight}c" alt="{file.alternative}" title="{file.title}" />      
--></f:comment> 
  <f:if condition="{data.imagewidth} && {data.imageheight}">
    <f:then>
      <img src="" data-src="{f:uri.image(image:file,width:data.imagewidth, height:data.imageheight)}"  width="{data.imagewidth}" height="{data.imageheight}" class="image-embed-item" alt="{file.alternative}" title="{file.title}" />      
      </f:then>
    <f:else>
      <img src="" data-src="{f:uri.image(image:file,width:data.imagewidth, height:data.imageheight)}" class="image-embed-item" alt="{file.alternative}" title="{file.title}" />      
      </f:else>
</f:if>
    </f:then>
    <f:else>
      <f:comment><!--
          <f:media additionalAttributes="{itemprop:'image'}" class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />           
        --></f:comment>
      <img src="" data-src="{f:uri.image(image:file,width:dimensions.width, height:dimensions.height)}" class="image-embed-item" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
    </f:else>
    </f:if>
</html>

 

Anmerkung:

Falls noch nicht geschehen, muss dem TYPO3 mitgeteilt werden, dass die fluid_styled_content-Templates teilweise überschrieben wurden. Dies geht in TYPOSCRIPT z.B. durch folgende Deklarationen:

 

lib.fluidContent {
   templateRootPaths {
      200 = fileadmin/template/fluid_styled_content/Resources/Private/Templates/
   }
   partialRootPaths {
      200 = fileadmin/template/fluid_styled_content/Resources/Private/Partials/
   }
   layoutRootPaths {
      200 = fileadmin/template/fluid_styled_content/Resources/Private/Layouts/
   }
}

 

 

Ein Beispiel

Ein besonders gutes Beispiel für die Effizienz von lazy loading ist unsere Referenzen-Seite, die aus ca. 90 Grafiken(Kunden-Logos) besteht. Wenn man z.B. mit den Entwickler-Tools des chrome-Browsers auf "Netzwerk" geht und dann die Seite https://www.wacon.de/referenzen/kundenliste.html aufruft. Bekommt man folgendes Ergebnis:

Lazy Loading am Beispiel der WACON Kundenliste

Wie man im rot umrandeten Bereich der Grafik erkennt, werden nur die sichtbaren Logos geladen(von "ags" bis "cmm"). Erst wenn man mit dem Scrollbalken runterfährt, werden die dann anzuzeigenden Logos nachgeladen.

Die Statistik rechts unten spricht für sich:

Für die Anzeige der Seite mussten 48 requests mit einem Gesamtvolumen von 551 KB gemacht werden. Nach nur 1,4 Sekunden war alles Nötige geladen.

Ohne Lazy Loading müßte dagegen die ganze Seite mit 112 requests und insgesamt 1,4 MB geladen werden, bevor der Besucher überhaupt interagieren kann.

Lazy Loading für Ihre TYPO3-Website?

Möchten Sie ebenfalls Lazy Loading auf Ihrer Website einsetzen und benötigen dafür Support? Wir sind eine Internetagentur, die sich auf TYPO3-Lösungen spezialisiert hat. Gerne unterstützen wir Sie und bieten Ihnen ein kostenloses Beratungsgespräch. Füllen Sie einfach unser Schnellkontaktformular am Ende dieser Seite aus und wir werden uns schnellstmöglich mit Ihnen in Verbindung setzen.