Native Lazyload

Beschreibung

Verzögertes Laden von Medien mit der nativen Browserfunktion. Erfahre mehr über das neue Attribut loading(engl.) oder schau dir das WordPress Core-Ticket an, in dem die Einbeziehung einer ähnlichen Implementierung in den WordPress-Core diskutiert wird.

Wird das Attribut loading vom Browser nicht unterstützt, fällt das Plugin auf eine JavaScript-Lösung zurück, die auf IntersectionObserver beruht. Für den Fall, dass JavaScript deaktiviert ist, das Attribut loading aber vom Browser unterstützt wird, wird eine noscript-Variante des jeweiligen Elements hinzugefügt, die ebenfalls das Attribut loading ohne weitere Änderungen enthält.

„Native“ bedeutet „Schnell“

Wenn du einen Weg hierhin gefunden hast, ist dir wahrscheinlich bewusst, wie entscheidend die Performance für die Benutzerfreundlichkeit und den Erfolg einer Website ist. Du weisst vielleicht auch, dass Verzögertes Laden ein wesentliches Merkmal zur Verbesserung der Performance ist. Die bisherigen Lösungen für Verzögertes Laden haben jedoch selbst zusätzlichen Ballast mitgebracht, da sie auf das Laden, Parsen und Ausführen einer eigenen JavaScript-Logik angewiesen waren, die sich mehr oder weniger stark auf die Performance ausgewirkt hat.

Dieses Plugin macht dieses Muster weitgehend überflüssig. Es basiert auf dem neuen Attribut loading, das das Verzögerte Laden zu einer nativen Browserfunktionalität macht. Das Attribut wird bereits von Chrome unterstützt und wird mit der Zeit auf andere Browser ausgeweitet. Die Lösung „nativ“ bedeutet, dass sie nicht auf benutzerdefinierte JavaScript-Logik angewiesen und dadurch schlanker ist. Und „schlanker“ bedeutet „schneller“.

Nicht zuletzt ist zu beachten, dass sich dieses Plugin im Laufe der Zeit wesentlich verbessern wird, da immer mehr Browser die Unterstützung für das Attribut loading ausrollen.

Verwendung

Aktiviere einfach das Plugin, und alle deine Bilder und Iframes in den Beiträgen werden verzögert geladen.

Danksagung

Dieses Plugin basiert teilweise auf der Logik von WP Rig sowie Empfehlungen von web.dev und developers.google.com.

Installation

  1. Lade den gesamten Ordner native-lazyload in das Verzeichnis /wp-content/plugins/ hoch oder lade es über das WordPress-Backend herunter.
  2. Aktiviere das Plugin im Plugin-Menü in WordPress.

FAQ

Wo sind die Plugin-Einstellungen?

Das Plugin hat kein Einstellungsmenü. Mit der Aktivierung läuft das Plugin bereits.

Wie kann ich vermeiden, dass ein Bild oder iFrame verzögert geladen wird?

Du kannst eine Klasse skip-lazy einfügen, um dem Plugin anzuzeigen, dass du dieses Bild oder diesen iFrame vom Verzögerten Laden ausschließen möchtest.

Dieses Plugin lädt immer noch eine zusätzliche JavaScript-Datei! Ich möchte das nicht.

Das ist völlig in Ordnung. Beachte, dass das Plugin die JavaScript-Datei nur als Fallback lädt, wenn der Browser des Benutzers das native Attribut loading noch nicht unterstützt. Die Datei enthält eine Logik, um das Bild weiterhin auf nicht-native Weise automatisch zu laden. Wenn du dich lieber ausschließlich auf das Attribut loading verlassen und kein Fallback zur Verfügung stellen möchtest, kannst du es einfach deaktivieren, indem du eine Zeile add_filter( 'native_lazyload_fallback_script_enabled', '__return_false' ) irgendwo im Code deiner Website hinzufügst.

Funktioniert das mit AMP?

Wenn du AMP verwendest, brauchst du das eigentlich nicht, da AMP Medien bereits von Hause aus verzögert lädt. Um sicher zu gehen, ist das Plugin allerdings so gemacht, dass es die Kompatibilität mit AMP nicht stört.

Wo sollte ich Support-Anfragen stellen?

Für normale Supportanfragen nutze bitte das Supportforum auf WordPress.org. Wenn du ein technisches Problem mit dem Plugin hast und bereits eine Idee hast, wie der Fehler behoben werden könnte, kannst du auch einen Issue auf Github melden.

Wie kann ich mit an der Entwicklung des Plugins beteiligen?

Wenn du Ideen hast, wie das Plugin verbessert oder ein Fehler behoben werden könnte, freuen wir uns über einen Issue oder Pull Request im Github-Repository des Plugins. Bitte halte dich an den Leitfaden zur Teilnahme.

Du kannst auch am Plugin mitarbeiten, indem du es übersetzt. Besuche dazu einfach translate.wordpress.org, um loszulegen.

Rezensionen

27. Februar 2020
First, did not break my site and it did lazyload most of the page images. It does not lazyload images if they are served from a different host. Example, unbounce, etc. I will add another caveat, all of my images and their versions are always carefully resized and highly compressed. Checked with lighthouse and my score took a hit downwards. 13 points down on performance score. I tested on my Staging area, uncached. FCP went from 2.1s to 4.2s, all of the other metrics, including time to interactive, CPU idle, speed index and First Meaningful Paint took a dive. I will chuck this to I was already hyperoptimized and lazy loading is not truly needed on my site/s. But I would advise others to try it out (not on their live site) and test speed with Google Lighthouse before and after.
17. Februar 2020
Seems to work well. On browsers that don't support lazy loading, it doesn't seem to load the images as soon as I would like. As in there can be a bit of a delay between scrolling and the image appearing on screen. Not to bad though. Not going to worry about it as native image loading is the way of the future and will be implemented into more browsers.
15. Februar 2020
I did a test with only wp supercache and this plugin, i have a lot images on my website, test on a page: was at 15s, moved to 7s (page with 9 big images) test on Gtmetrix I like the idea of plug and play and it works Thank you to the authors for this plugin
30. Januar 2020
So far i never have single issue with this plugin. I highly recommend it to newbies because this plugin works without breaking AMP.
26. Dezember 2019
Was using regular lazy load plugins, but this thing takes it up a notch. Not just because of the native lazy load, which in itself is absolutely brilliant an an idea whose time had come, but I just like it that it doens't clutter the backend with unnecessary pages. Does what it says. Activate and forget.
Lies alle 28 Rezensionen

Mitwirkende & Entwickler

„Native Lazyload“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

„Native Lazyload“ wurde in 15 Sprachen übersetzt. Danke an die Übersetzerinnen und Übersetzer für ihre Mitwirkung.

Übersetze „Native Lazyload“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

1.0.2

  • Fix broken images which are using data URI scheme (e.g. base64-encoded images). Props ieim.
  • Fix images in IE 11 not being loaded until the user starts scrolling. Props Soean.
  • Fix image loading script not working in IE10 and other browsers that do not support dataset.

1.0.1

  • Improve compatibility with other plugins by using more specific class and only adding it for JS fallback.
  • Run lazy-load script on DOMContentLoaded when necessary to improve compatibility with plugins like Autoptimize.
  • Do not transform elements inside an AJAX response due to lack of predictability of the context and script execution.

1.0.0

  • Erstveröffentlichung