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

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.
6. Dezember 2019
Initially some minor issues with IE11 but it is now fixed. Also google's lazy load attribute has some more smarts built into it then the typical lazy load scripts you are use to using, so you may be a little confused when it looks like nothing is happening and images are not being lazy loaded, but they are! just in a more advanced and discreet way, use dev tools to see for yourself. Bonus: Once IE11 is finally decommissioned, you'll be able to disable this plugin, by then all browsers and WordPress should have native support for the new lazy-load attribute.
2. Oktober 2019
Images do not load properly if you're using a browser other than Chrome. Reported the issue to support and have yet to receive any resolution or hint that they're working on it.
Lies alle 23 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