Schnellere Ladezeiten beim Aufrufen von Seiten
Performance – Ein wichtiger Punkt in der Laufbahn eines jeden Web Developers. In erster Linie ist es natürlich wichtig, eine Seite nach den Vorgaben des Designers schön und funktionell umzusetzen, wobei die Performance eben nicht vergessen werden darf.
Wie kann dieses Ziel erreicht werden?
Um eine Seite performanter zu gestalten und dabei schnellere Ladezeiten zu erzielen gibt es mehrere Möglichkeiten und Wege. Ich möchte mich hier jedoch nur auf Bilder konzentrieren und die dafür wohl beste Option. Je nach Größe und Qualität kann ein Bild recht schnell zum Problem beim Aufrufen einer Seite werden. Bilder können sehr große Datenmengen besitzen, für die der Browser einfach Zeit braucht, um sie zu verarbeiten und darstellen zu können. Schnellere Ladezeiten können mit „lazysizes“ erreicht werden.
Was ist "lazysizes"?
Lazysizes ist ein Open-Source GitHub Projekt von "aFarkas", das eingesetzt werden kann um Bilder erst dann zu laden, wenn diese benötigt werden. Dadurch werden beim Aufrufen der Seite nicht direkt alle Bilder heruntergeladen, sondern erst, wenn der User in die Nähe des Bildes scrollt.
Wie wird es verwendet?
Lazysizes kann ganz einfach als npm – package (npm install lazysizes --save) installiert werden oder mit bower (bower install lazysizes --save). Man kann auch die entsprechende Javascript Datei herunterladen und in seine Seite einbinden. Es braucht keine weitere Javascript Konfiguration. Bei allen Bildern, die mit der lazyload-Technik geladen werden sollen, muss einfach nur die Klasse "lazyload" hinzugefügt und anstatt dem üblichen "src" - Attribute "data-src" verwendet werden. Ein Beispiel:
<img class=“lazyload“ data-src=“image.png“ alt=“Image name“ />Testing
Ob es funktioniert oder nicht kann beispielsweise ganz leicht im Chrome in den Entwicklertools unter dem „Network“ - Reiter nachgeschaut werden. Lädt man die Seite neu sieht man zunächst die ganzen Dateien und Schriften, welche der Browser lädt. Scrollt man nun zu den Bildern, sieht man wie diese erst später nachgeladen werden.
Fazit
Lazysizes kann in jedem Projekt verwendet werden, ist leicht zu installieren und es können damit nicht nur Bilder sondern etwa auch iFrames nachgeladen werden. Wer sich näher damit auseinandersetzen will, für den habe ich hier noch den Link zum GitHub Projekt und zu ein paar Beispielen.
