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
- Lade den gesamten Ordner
native-lazyload
in das Verzeichnis/wp-content/plugins/
hoch oder lade es über das WordPress-Backend herunter. - 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 Attributloading
verlassen und kein Fallback zur Verfügung stellen möchtest, kannst du es einfach deaktivieren, indem du eine Zeileadd_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
Mitwirkende & Entwickler
„Native Lazyload“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:
Mitwirkende„Native Lazyload“ wurde in 16 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