Lazy Load – Bilder verzögert nachladen

0

Die übliche Erscheinungsform eines Internetblogs mit chronologisch geordneten Artikel und meist sehr großen Einzelseiten mit vielen Artikeln und Kommentaren bringt einen praktischen Nachteil mit sich. Denn bei jedem Laden einer neuen Seite muss sehr viel Inhalt heruntergeladen werden, sodass die Seite unter Umständen gerade bei langsamer Internetverbindung sehr lange benötigt, um vollständig geladen zu werden. Dabei stellen vor allem viele und große Bilder ein Problem dar, da sie den Großteil des Datenvolumens einer Seite ausmachen.

Nutzen sie WordPress, können Sie auf verschiedene Plugins zurückgreifen, die Abhilfe für dieses Problem schaffen. Empfehlenswert ist hier beispielsweise das Plugin Lazy Load. Es kommt ohne Konfiguration aus und funktioniert zumindest in meinem Fall zuverlässig.

Die Funktionsweise dieses Plugins ist recht schnell erklärt. Anstatt beim Laden der Seite direkt den gesamten Inhalt inklusive aller Bilder herunterzuladen, verzögert das Plugin das Laden der Bilder bis der User an die entsprechende Position der Seite herunterscrollt. Damit das Layout des Textes durch das Fehlen der Bilder nicht zerstört wird, lädt das Plugin anstatt des Originalbilds zunächst ein 1 x 1 Pixel großes transparentes Platzhalterbild, das mithilfe der CSS Hintergrund-Eigenschaft auf die Größe des Originalbildes gestreckt wird. Scrollt der User nun herunter, wird das Platzhalterbild per Javascript durch das originale Bild ersetzt.

Insgesamt wird also immer nur eine begrenzte Anzahl an Bildern geladen, was die anfängliche Ladezeit natürlich erheblich verkürzt. Allerdings wird es der ein oder andere User eventuell als störend empfinden, dass die Bilder erst beim Scrollen eingeblendet werden. Denn gerade, wenn auf der Seite schnell nach unten scrollt, kommt der Browser mit dem Nachladen nicht mehr hinterher.

Wer möchte, kann den Code des Plugins aber auch direkt in sein WordPress-Theme einbauen. Der Vorteil besteht darin, dass man einige Einstellungen vornehmen kann. So zum Beispiel kann festgelegt werden, ob das Bild langsam eingeblendet wird oder einfach ohne Effekt angezeigt werden soll. Zudem kann man einstellen, ob auch Bilder außerhalb des Viewports, also der aktuellen Ansicht der Seite, geladen werden sollen. Dadurch kann man in gewisser Weise verhindern, dass der User das Nachladen der Bilder mitbekommt. Wie Sie die Funktion direkt in Ihr Theme einbauen können, erfahren Sie auf der Website des Projekts.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.