WordPress schneller machen: Lazy Loading integrieren

„Lazy Loading“ bezeichnet den Vorgang, Bilder und andere Inhalte erst kurz bevor sie angezeigt werden zu laden. Der Seitenaufbau bleibt damit zunächst schneller, zusätzliche Inhalte werden erst bei Bedarf nachgeladen, oder auch gar nicht, wenn der Benutzer sich entschließt, die Seite nicht zu scrollen. Eine gute Möglichkeit, die Seitenladezeit zu optimieren, indem unnötige Datenübertragungen vermieden werden.

Lazy Loading macht vor allem dort Sinn, wo eine große Anzahl an Dateien geladen werden muss. Dies ist bei langen Artikeln mit vielen Bildern der Fall, aber auch in Artikelarchiven oder anderen längeren Auflistungen. Würden diese Dateien direkt beim Seitenaufbau geladen, blockieren sie unnötigerweise das Seitenrendering, weil der Browser auf die Daten wartet, bevor er die Seite weiter anzeigt.

Interessant ist der Einsatz von Lazy Loading auch dort, wo Inhalte von externen Seiten eingebunden oder sogar dynamisch aggregiert werden. Das geht meist mit vielen verschiedenen Domainauflösungen und entsprechenden Wartezeiten bei der Übertragung einher. Werden die externen Inhalte durch Lazy Loading erst später angefragt, entfallen auch hier wieder wertvolle (Milli)Sekunden an Wartezeit.

Die Integration von Lazy Loading kann natürlich auf verschiedene Arten erfolgen. Im WordPress Plugin-Verzeichnis finden sich viele Plugins zum Thema Lazy Load(ing). Hier ist mit der Plugin-Installation und zwei bis fünf Klicks für die Konfiguration meist schon alles getan.

Aber auch die händische Einbindung eines Lazy Loading Scripts wie zum Beispiel unveil.js ist kein allzu großes Unterfangen. Hierbei muss allerdings bedacht werden, dass die Themes in aller Regel nicht automatisch entsprechendes Markup für die Bilder generieren, so dass man hier nochmal Hand anlegen muss. Dafür wird man mit deutlich kleinerem JavaScript, und in aller Regel besseren Konfigurationsmöglichkeiten, belohnt.

So oder so lohnt die Integration von Lazy Loading, wenn eine Seite entsprechend viele Bilder oder sonstige Inhalte darstellen muss und dadurch der Aufbau verzögert würde.

Nachtrag: Wer Lazy Loading in Aktion sehen will, kann einen Blick auf den Kulturkalender der Europaregion euregio werfen. Dort ist das Ganze mittels unveil.js integriert und wird sichtbar, wenn man sehr schnell scrollt oder eine langsame Internetverbindung hat.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.