In WordPress Lazy Loading einsetzen – so geht’s!

Um die Per­for­mance Ihrer WordPress-Website zu ver­bes­sern, sollten Sie auf Lazy Loading setzen. Die Funktion ist zwar in­zwi­schen Teil des WordPress-Cores, kann aber durch Plugins noch erweitert werden.

Lazy Loading ist eine Technik für die Per­for­mance-Ver­bes­se­rung bei einem Website-Aufruf. Statt alle Inhalte gleich­zei­tig zu laden, werden zunächst nur solche Bilder und Videos be­reit­ge­stellt, die von den Nut­ze­rin­nen und Nutzern auch sofort gesehen werden. Alles, was noch nicht im sicht­ba­ren Bereich liegt, wird nach­träg­lich geladen.

Dank Lazy Loading können Be­su­che­rin­nen und Besucher also viel schneller mit der Webseite arbeiten. Wenn sie den sicht­ba­ren Bereich fer­tig­ge­le­sen (oder an­ge­schaut) haben, ist schließ­lich auch der Bereich „below the fold“ geladen – also das, was erst nach dem Scrollen erscheint.

Mit Lazy Loading können Sie Ihr WordPress schneller machen. Dabei wird zwar das ei­gent­li­che Laden nicht be­schleu­nigt, aber die User Ex­pe­ri­ence wird ver­bes­sert. Die Nut­ze­rin­nen und Nutzer einer Website bekommen die Inhalte, die zunächst am wich­tigs­ten sind, schnell geliefert. Alles andere kann dann unbemerkt im Hin­ter­grund geladen werden.

Das mag auch Google: Die Core Web Vitals sind Ranking-Faktoren, die auf die zügige Be­reit­stel­lung von Website-Elementen zielen. Je schneller sich mit einer Website in­ter­agie­ren lässt, desto positiver wird das Ranking in den Such­ergeb­nis­sen be­ein­flusst. Damit gehört Lazy Loading auch zur Such­ma­schi­nen­op­ti­mie­rung (SEO). In Kom­bi­na­ti­on mit anderen WordPress-SEO-Optionen bringt dies Ihre Website nach vorne.

Sie können die Per­for­mance Ihrer Seite auch ver­bes­sern, indem Sie Bilder kom­pri­mie­ren. Dann werden die gra­fi­schen Inhalte ent­spre­chend wirklich schneller geladen. Außerdem ist es sinnvoll, wenn Sie die WordPress-Bil­der­grö­ßen kennen, um die perfekten Bild­aus­schnit­te zu wählen.

Seit der Version 5.5 ist Lazy Loading in WordPress stan­dard­mä­ßig für Grafiken aktiviert. Immer, wenn Sie ein Bild in Ihren Seiten und Beiträgen un­ter­brin­gen, fügt WordPress den Dateien au­to­ma­tisch ein Attribut hinzu. Dieses lässt sich im Quellcode so erkennen:

Das Attribut wird in­zwi­schen zum Beispiel von Chrome, Firefox und Safari un­ter­stützt. Das bedeutet aber auch, dass andere Browser eben nicht auf das Attribut reagieren. Zu­sätz­lich gibt es noch andere Inhalte, etwa Videos, die von Lazy Loading pro­fi­tie­ren können. Das Attribut wird aber nur an Bilder angehängt. Möchte man die Technik auf seiner Website also um­fas­sen­der einsetzen, muss man auf andere Optionen setzen: Mithilfe von Plugins können Sie das Lazy Loading ausweiten, wenn Sie zum Beispiel in WordPress Videos einbinden möchten.

Um Lazy Loading in WordPress besser steuern zu können, empfiehlt es sich, Plugins ein­zu­set­zen. Hier eine Übersicht von guten Er­wei­te­run­gen:

Das Plugin LazyLoad von WP Rocket er­mög­licht Lazy Loading für Bilder, Videos und iFrames und geht damit über die Mög­lich­kei­ten der Stan­dard­ein­stel­lung hinaus – und bleibt gleich­zei­tig mit 10 KB sehr schlank. Sogar Avatare und Smileys werden von dem Plugin erfasst. In­ter­es­sant ist auch, dass man ein­ge­bet­te­te YouTube-Videos zunächst mit Vor­schau­bil­dern ersetzen kann, bevor diese richtig geladen werden. Das ver­rin­gert die Ladezeit beim Sei­ten­auf­bau.

Das Plugin ist direkt ein­satz­be­reit und muss nicht kon­fi­gu­riert werden. Das ist aber auch einer der Nachteile: LazyLoad bietet kaum Ein­stel­lungs­mög­lich­kei­ten. Immerhin kann man Lazy Loading für un­ter­schied­li­che Me­di­en­ty­pen un­ab­hän­gig von­ein­an­der ak­ti­vie­ren bzw. de­ak­ti­vie­ren.

Wer mehr Features möchte, kann zum kos­ten­pflich­ti­gen WordPress-Caching-Plugin WP Rocket upgraden. In diesem ist Lazy Loading enthalten, aber eben auch andere Op­ti­mie­rungs­funk­tio­nen.

Sehr viel mehr Optionen erhalten Sie bei a3 Lazy Load. Das Plugin bietet Ihnen etwa die Mög­lich­keit, Lazy Loading un­ab­hän­gig von­ein­an­der für Bilder oder Videos und iFrames zu ak­ti­vie­ren. Doch dabei endet die Auswahl nicht. Sie können sogar bestimmen, welche Art von Bildern vom Lazy Loading erfasst werden soll. Bei­spiels­wei­se schließen Sie Gravatare oder Th­umb­nails aus. Auch auf ver­schie­de­nen Sei­ten­ty­pen (etwa der Start­sei­te) kann die Funktion de­ak­ti­viert werden. Noch de­tail­lier­ter gehen Sie vor, wenn Sie mithilfe der URI einzelne Objekte vom Lazy Loading aus­schlie­ßen.

Darüber hinaus bietet a3 Lazy Load die Mög­lich­keit, das Aussehen des Nach­la­dens zu bestimmen: Sollen die Bilder langsam ein­ge­blen­det werden oder soll das Plugin ein La­de­sym­bol anzeigen? Technisch wichtiger ist al­ler­dings, dass Sie den Viewport erweitern können. So stellen Sie ein, dass Teile des ei­gent­lich noch nicht sicht­ba­ren Bereichs direkt geladen werden.

Eine weitere Be­son­der­heit des Plugins: Sie können über a3 Lazy Load das stan­dard­mä­ßi­ge Lazy Loading, das bereits im Core von WordPress enthalten ist, aus­schal­ten. So gehen Sie sicher, dass sich die Funk­tio­nen des Plugins und des CMS nicht in die Quere kommen.

Das Plugin Optimole geht über Lazy Loading hinaus und versucht generell, das Be­reit­stel­len von Bildern auf Ihrer WordPress-Website zu ver­bes­sern. Zu­sätz­lich zum smarten Laden werden Ihre Bilder mithilfe des Plugins kom­pri­miert. Außerdem wird die Bil­der­grö­ße an das Endgerät des je­wei­li­gen Nutzers oder der je­wei­li­gen Nutzerin angepasst. Hinzu kommt ein eigenes Content Delivery Network (CDN), über das die Bilder aus­ge­spielt werden. Das kann die Ladezeit nochmals verkürzen.

Für Lazy Loading gibt es al­ler­dings kaum Optionen. Neben der Ent­schei­dung, ob Sie die Funktion nutzen wollen, können Sie nur noch Hin­ter­grund­gra­fi­ken vom Lazy Loading aus­schlie­ßen. Hinzu kommt, dass Sie sich bei Optimole erst re­gis­trie­ren müssen, bevor Sie die Funk­tio­nen einsetzen können.

Auch Smush ist eine um­fas­sen­de Suite, um Ihre WordPress-Seite schneller zu machen. Dafür kann dieses Plugin die Bilder au­to­ma­tisch kom­pri­mie­ren und löscht dabei auch EXIF-Daten, um die Da­tei­grö­ße zu­sätz­lich zu re­du­zie­ren. Genau wie Optimole bietet Smush zu­sätz­lich ein CDN, um das Be­reit­stel­len von Bildern noch mehr zu be­schleu­ni­gen.

Anders als Optimole hat Smush aber ein paar Optionen für Lazy Loading mehr mit an Bord: Sie stellen bei­spiels­wei­se ein, für welche Gra­fik­for­ma­te die Funktion aktiv sein soll und können dabei auch iFrames hin­zu­zie­hen bzw. abwählen. Außerdem bestimmen Sie die Orte oder Ein­satz­zwe­cke: Sollen etwa Th­umb­nails oder Bilder in Widgets auch vom Lazy Loading erfasst werden? Einzelne Sei­ten­ty­pen lassen sich ebenfalls aus­schlie­ßen. Noch genauer können Sie Lazy Loading de­fi­nie­ren, indem Sie spe­zi­fi­sche URLs oder URIs aus­schlie­ßen.

Wie bei a3 Lazy Load kann man bei Smush auch das Lade-Design anpassen. Ein Fade-in ist genauso möglich wie ein sich drehendes La­de­sym­bol oder eine Platz­hal­ter­gra­fik.

Der Lazy Loader von Florian Brinkmann arbeitet nicht mit dem loading-Attribut, sondern verwendet ein Skript. Darüber lässt sich das Nachladen von Bildern, iFrames, Videos und Au­dio­da­tei­en ein­stel­len. Zum Ver­fei­nern können Sie CSS-Klassen angeben, die vom Lazy Loading aus­ge­schlos­sen werden sollen. Durch Ak­ti­vie­rung einer Option bestimmen Sie bei jeder Seite und jedem Beitrag, ob diese von Lazy Loading erfasst werden sollen.

Um das Laden grafisch etwas auf­zu­be­rei­ten, kann man einen ani­mier­ten Kreis ak­ti­vie­ren und dessen Farbe ein­stel­len.

Wenn Sie sich nicht auf die Stan­dard­funk­ti­on von WordPress verlassen wollen, sollten Sie sich für ein Plugin ent­schei­den. Da a3 Lazy Load mit vielen Funk­tio­nen kommt, wählen wir für die Anleitung diese Er­wei­te­rung.

Immer bevor Sie größere Än­de­run­gen an Ihrer Seite vornehmen, sollten Sie in WordPress ein Backup erstellen. So gehen Sie sicher, dass Sie bei Kom­pli­ka­tio­nen schnell zu einer funk­tio­nie­ren­den Version zu­rück­keh­ren können. Außerdem sollten Sie über ein WordPress-Child-Theme nach­den­ken. Dieses Duplikat des ei­gent­li­chen Themes sorgt dafür, dass nach einem Update durch den Theme-Anbieter alle Ihre Ein­stel­lun­gen noch funk­tio­nie­ren.

Rufen Sie den Plugin-Bereich im WordPress-Backend auf und wechseln Sie dort zum Punkt „In­stal­lie­ren“. Wenn Sie nun im Suchfeld „a3 Lazy Load“ eintragen, wird Ihnen das ent­spre­chen­de Plugin angezeigt. Mit einem Klick können Sie dieses nun in­stal­lie­ren und an­schlie­ßend mit einem weiteren Klick auch ak­ti­vie­ren.

Die Optionen des Plugins finden Sie im Menüpunkt „Ein­stel­lun­gen“ des WordPress-Da­sh­boards. Dort hat a3 Lazy Load nun einen eigenen Eintrag. Al­ter­na­tiv gelangen Sie über die Plugin-Übersicht in die Ein­stel­lun­gen der Er­wei­te­rung. Direkt im zweiten Menüpunkt („Lazy Load Ac­ti­va­ti­on“) können Sie die Funktion auch wieder aus­stel­len, ohne das Plugin zu de­ak­ti­vie­ren. Außerdem legen Sie dort fest, ob Sie die Lazy-Loading-Stan­dard­funk­ti­on von WordPress aus­stel­len möchten – was sich durchaus anbietet, um Kom­pli­ka­tio­nen zu vermeiden.

Nun legen Sie fest, welche Objekte von Lazy Load betroffen sein sollen. Hierfür stehen Ihnen un­ter­schied­li­che Optionen zu Verfügung:

• Lazy Load Images: Hier legen Sie fest, an welchen Stellen Bilder von Lazy Loading erfasst werden sollen. So stellen Sie bei­spiels­wei­se ein, dass nur Bilder im Content-Bereich und nicht etwa innerhalb von Widgets da­zu­ge­hö­ren.
   
• Lazy Load Videos and iFrames: Bestimmen Sie, ob Videos und iFrames im Content und/oder in Widgets vom Lazy Loading pro­fi­tie­ren sollen.
   
• Exclude by URI’s and Page Type: Per Schie­be­reg­ler stellen Sie ein, welche Sei­ten­ty­pen Sie ins Lazy Loading aufnehmen. Dort können Sie bei­spiels­wei­se die Start­sei­te oder eine Ka­te­go­rie­sei­te aus­schlie­ßen. Außerdem haben Sie die Mög­lich­keit, per URI bestimmte Objekte aus­zu­sor­tie­ren.

Das Plugin gibt Ihnen noch die Mög­lich­keit, das Laden der Bilder und Videos optisch auf­zu­wer­ten. Unter dem Punkt „Effect & Style“ nehmen Sie die ent­spre­chen­den Ein­stel­lun­gen vor. Sie haben die Wahl zwischen einem Fade-in oder einem sich drehenden Kreis. Zu­sätz­lich legen Sie die Hin­ter­grund­far­be fest, die Sie bei­spiels­wei­se an den Hin­ter­grund Ihrer Website anpassen können.

Die Lazy-Loading-Stan­dard­funk­ti­on ist Teil des WordPress-Cores. Es ist ei­gent­lich nicht vor­ge­se­hen, dass man dieses Feature ab­schal­tet. Deshalb hat WordPress in seinen eigenen Ein­stel­lun­gen auch keine ent­spre­chen­de Funktion dafür. Dennoch kann es sinnvoll sein, die Funktion ab­zu­schal­ten, etwa wenn Sie ein Plugin mit Lazy-Loading-Option verwenden. So ver­hin­dern Sie Konflikte zwischen den beiden Funk­tio­nen.

Für die De­ak­ti­vie­rung kann man z. B. ein Plugin wie das vor­ge­stell­te a3 Lazy Load einsetzen. Mit Disable Lazy Load findet man sogar ein eigens dafür pro­gram­mier­tes Plugin. Dieses muss man nur ak­ti­vie­ren, und schon geht die Lazy-Load-Funktion des Cores nicht mehr.

Sie benötigen aber nicht zwingend ein Plugin. Die De­ak­ti­vie­rung der Funktion lässt sich auch über einen Eintrag im Quellcode erreichen. Vorher sollten Sie ein Child-Theme erstellen, um si­cher­zu­ge­hen, dass nach einem Theme-Update Ihre Än­de­run­gen nicht einfach verloren gehen. Dann gehen Sie über den Menüpunkt „Design“ zum „Theme-Datei-Editor“ und rufen die Datei functions.php auf. Dort fügen Sie eine neue Zeile ein:

Wenn Sie nun auf „Datei ak­tua­li­sie­ren“ klicken, werden die Än­de­run­gen über­nom­men, und Lazy Loading ist de­ak­ti­viert.