Digital First: Loading

Schnellere
Ladezeiten
beim
Aufrufen
von
Seiten

Dragan Lazysizes

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.

GitHub 
Beispiele 

Diskutieren Sie mit uns auf Facebook und Twitter . Natürlich freuen wir uns auch über ein E-Mail von Ihnen.

Mehr Blogartikel zum Thema:

loading
Nach oben
 

Hallo!
Sie möchten mit uns zusammenarbeiten? 

Welche Themen sind für Sie interessant?

ICH

Erzählen Sie uns doch bitte ganz kurz worum es geht.

ICH

Gerne würden wir mehr darüber erfahren! Wie dürfen wir Sie denn kontaktieren?

Wie dürfen wir Sie denn kontaktieren?


ICH

An welche Addresse sollen wir die Mail schicken?

Unter welcher Nummer sind Sie am besten erreichbar?

Leider sind zur Zeit alle MASSIVE DOVES auf Urlaub ;) Wollen Sie uns alternativ vielleicht eine Telefonnummer oder E-Mail Adresse hinterlassen, unter der Sie erreichbar sind?

ICH

Bitte geben Sie eine gültige E-mail Adresse ein.


Verraten Sie uns noch Ihren Namen?

ICH

Zum Schluss noch etwas Bürokratie #DSGVO:

Vielen Dank für Ihre Anfrage! Wir werden uns so rasch wie möglich bei Ihnen melden.

Es ist etwas schiefgelaufen.
Bitte lade die Seite neu und versuch es noch einmal.