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

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.
2. Oktober 2019
I can't believe this actually comes from Google. It doesn't work. I installed it and it makes any pictures in the body of any post disappear, showing only the captions, not the actual photos. I am using a high speed connection, I have tested it in both Chrome and Edge. This clearly is not ready to be released. If it "speeds up" your site, it does so by just not showing your photos at all. I'm very disappointed.
26. September 2019
Since the last update, around 10 Sept., images on the home page are not loading. Contacted the dev, gave all the info I could... No more info since then.
20. September 2019
Only works on Chrome. Does not work on Opera and Firefox. I do not recommend using this plugin. (edit: I am talking about featured images)
Lies alle 18 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.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