Inhalt
- Was ist Native Lazy-Loading?
- Update März 2020 (zuerst lesen!)
- Native Lazyload Plugin
- 1. Fügen Sie den ausgewählten Bildern und Anhängen das Attribut "Lazy Loading" hinzu
- 2. Fügen Sie neuen Bildern in Posts ein Lazy Loading-Attribut hinzu
- 3. Lazy Loading für vorhandene Bilder in Posts
- Einfachere Alternative für alle Bilder in Posts
- 4. Lazy Loading für Commenter-Avatare
- 5. Lazy Laden von Youtube-Videos
- Überprüfung der Verbesserung
Was ist Native Lazy-Loading?
Wenn ein Browser eine Webseite öffnet, lädt er normalerweise jedes Bild darauf - auch solche, die weit unter dem sichtbaren Bereich oder dem Ansichtsfenster liegen. Einige Besucher scrollen möglicherweise nie weiter nach unten, was bedeutet, dass die Bandbreite, die für das Laden dieser unsichtbaren Bilder aufgewendet wird, verschwendet wird.
Auf der Suche nach einem schnelleren Internet haben Entwickler clevere Methoden entwickelt, um das Laden von Bildern außerhalb des Ansichtsfensters zu verschieben, bis der Benutzer in der Nähe von ihnen scrollt. Alle diese Lösungen erforderten jedoch JavaScript, das einen eigenen Overhead hinzufügt und Bilder für diejenigen, die mit deaktiviertem JavaScript surfen, insgesamt aufteilt.
Die Situation änderte sich mit der Einführung von Chrome 76. Ab dieser Version unterstützen von Chrome und Chromium abgeleitete Browser das native Lazy-Loading. Sie müssen Ihren Bild-Tags lediglich ein einzelnes Attribut hinzufügen:
img src = "cutecat.webp" load = "faul" />
So einfach ist das. Und wenn ein anderer Browser das neue Attribut noch nicht unterstützt, werden die Bilder normal geladen, ohne dass Schaden entsteht.
Jetzt erkläre ich Ihnen, wie Sie diese Attribute Ihren Bildern in Wordpress automatisch hinzufügen (größtenteils).
Update März 2020 (zuerst lesen!)
Seit dieser Artikel geschrieben wurde, gab es aufregende Entwicklungen. Das verzögerte Laden nativer Bilder ist Teil der offiziellen HTML-Spezifikation geworden. Die Browserunterstützung wurde verbessert. Und vielleicht am wichtigsten ist, dass das native Lazy-Loading ab Version 5.5 in den WordPress-Kern integriert werden soll.
In der Praxis bedeutet dies, dass Nach dem Eintreffen von WP Version 5.5 ist kein zusätzlicher Aufwand für Ihr Teil erforderlich Bis dahin können Sie das native Lazy-Loading mithilfe der unten beschriebenen Änderungen testen. Denken Sie daran, dass hey in einigen Monaten irrelevant wird (und Hurra dafür).
Native Lazyload Plugin
Zunächst einmal kann Googles eigenes Native Lazyload-Plugin die ganze Arbeit für Sie erledigen. Zum Zeitpunkt des Schreibens gibt es viele Ein-Stern-Bewertungen, die behaupten, es habe ihre Website beschädigt, aber ich bin sicher, dass es irgendwann behoben wird. Selbst dann werde ich es nicht verwenden, weil ich ein Curmudgeon bin und die Installation von Plugins so weit wie möglich vermeide. Wenn Sie jedoch nach der schnellsten und einfachsten Lösung suchen, ist dies die richtige.
1. Fügen Sie den ausgewählten Bildern und Anhängen das Attribut "Lazy Loading" hinzu
Hinzufügen der Laden = "faul" Die Zuordnung zu vorgestellten Bildern (früher als Post-Thumbnails bezeichnet), Galerien und Bildern auf Anhangsseiten ist mithilfe von einfach wp_get_attachment_image_attributes Haken. Kopieren Sie einfach den folgenden Code und fügen Sie ihn in den Ihres Themas ein functions.php Datei:
add_filter ('wp_get_attachment_image_attributes', 'add_lazy_load', 10, 3); Funktion add_lazy_load ($ attr, $ Anhang, $ Größe) {if (! array_key_exists ('Laden', $ attr)) {$ attr ['Laden'] = 'faul'; } return $ attr; }}
Ein großes Lob an akkis in der Wordpress-Code-Referenz für dieses Snippet.
Sie können überprüfen, ob dies funktioniert, indem Sie den Quellcode eines vorgestellten Bildes oder einer Anhangsseite auf Ihrer Website überprüfen:
2. Fügen Sie neuen Bildern in Posts ein Lazy Loading-Attribut hinzu
Der obige Code wirkt sich nicht auf einzelne Bilder aus, die über den Post-Editor hinzugefügt wurden. Dafür habe ich das benutzt image_send_to_editor Haken wie unten gezeigt. Fügen Sie es hinzu functions.php wie früher.
add_filter ('image_send_to_editor', 'lazyloading', 10, 8); Funktion lazyloading ($ html) {$ html = str_replace ('/>', 'load = "faul" />', $ html); return $ html; }}
Was dies tut, ist einfach die Laden = "faul" Attribut beim Einfügen eines Bildes in einen Beitrag über "Medien hinzufügen". Wenn Sie im klassischen Editor zu "Text" wechseln oder auf die drei Punkte und dann in Gutenberg auf "Als HTML bearbeiten" klicken, sehen Sie etwas in dieser Richtung:
Wie Sie vielleicht vermutet haben, betrifft dies nur neu eingefügte Bilder. Abgesehen von Galerien und Post-Thumbnails werden vorhandene Bilder in älteren Posts nicht verzögert geladen. Dafür gibt es einen guten Grund: In Beiträge eingefügte Bilder sind im Wesentlichen Teil des Beitragstextes und können nicht direkt gefiltert werden.
Sie können natürlich eine Funktion verwenden, die den Inhalt eines gesamten Beitrags durchsucht und das Attribut "Lazy Loading" für jeden Beitrag angreift img> Tag findet es, aber das scheint mir ineffizient. Der Vorgang muss jedes Mal wiederholt werden, wenn ein Besucher einen Beitrag anzeigt, Ihren Server übermäßig belastet und Ihre Website verlangsamt. Dies ist das Gegenteil von dem, was wir versuchen. Dieser Ansatz ist Es ist jedoch viel einfacher, daher habe ich eine solche Funktion weiter unten hinzugefügt, falls Sie sie verwenden möchten.
3. Lazy Loading für vorhandene Bilder in Posts
Um mit vorhandenen Bildern in älteren Wordpress-Posts umzugehen, kann ich mir nichts Klügeres vorstellen, als einfach zu suchen und zu ersetzen. (Wenn Sie eine bessere Idee haben, teilen Sie sie bitte in den Kommentaren mit!) Dies scheint möglicherweise nicht sehr elegant zu sein, und es codiert die Laden = "faul" Attribut in Beiträge, aber es muss nur einmal gemacht werden.
Zu diesem Zweck habe ich ein Plugin namens Better Search Replace auf meinem verwendet wp_posts Tabelle wie folgt:
Wenn Sie dies überhaupt tun, tun Sie dies am besten, bevor Sie den Editor wie in Schritt 2 beschrieben ändern. Andernfalls erhalten Sie Bild-Tags mit doppelten Attributen. Wiederholen Sie dies nur einmal.
Und wenn dieses Attribut nie die allgemeine Unterstützung erhält, können Sie es jederzeit aus Ihren Posts entfernen, indem Sie das Suchen und Ersetzen in umgekehrter Reihenfolge durchführen.
Einfachere Alternative für alle Bilder in Posts
Angenommen, Sie verwenden ein gutes Caching-Plugin, sodass die Kosten für das Durchsuchen des Beitragstextes bei jedem Laden der Seite nicht anfallen. In diesem Fall können Sie verwenden der Inhalt Filter, um jeden Beitrag nach Bild-Tags zu durchsuchen und das Attribut "Lazy Loading" im laufenden Betrieb zu aktivieren. Fügen Sie einfach die folgende Funktion zu Ihrem hinzu functions.php Datei:
add_filter ('the_content', 'lazy_load_images'); Funktion lazy_load_images ($ content) {if (is_single () && in_the_loop () && is_main_query ()) {$ content = str_replace ('/>', 'load = "faul" />', $ content); } return $ content; }}
Wenn Sie diesen Ansatz verwenden, können Sie die Schritte 2 und 3 überspringen, da diese Funktion das automatisch hinzufügt Laden = "faul" Attribut zu jedem Bild in jedem Beitrag.
4. Lazy Loading für Commenter-Avatare
Kommentare befinden sich normalerweise am Ende der Seite, sodass Benutzeravatare ein gutes Ziel für das verzögerte Laden sind. Sie können diesen Filter in Ihrem verwenden functions.php:
add_filter ('get_avatar', 'lazyavatar', 1, 1); Funktion lazyavatar ($ avatar) {$ avatar = str_replace ('img', 'img load = "faul"', $ avatar); $ avatar zurückgeben; }}
Wenn Ihr Thema einen benutzerdefinierten Kommentar-Rückruf verwendet, finden Sie möglicherweise den get_avatar () funktionieren und hinzufügen Laden = "faul" dazu durch die extra_attr Parameter.
Wenn Sie ein moderneres Kommentarsystem wie Disqus verwenden, ist dies nicht erforderlich.
5. Lazy Laden von Youtube-Videos
Eine Sache, die ich bisher nicht erwähnt habe, ist, dass das verzögerte Laden auch auf Iframes angewendet werden kann. Wenn Sie einen Link zu einem Video auf Youtube (oder einer anderen unterstützten Website) einfügen, verwandelt Wordpress ihn automatisch in einen Iframe, um ihn in Ihren Beitrag einzubetten. Um es träge laden zu lassen, können wir das verwenden embedded_oembed_html Filter wie folgt:
Funktion lazyoutube ($ html) {$ html = str_replace ('iframe', 'iframe load = "faul"', $ html); $ html = 'div class = "video-container">'. $ html. '/ div>'; return $ html; } add_filter ('embedded_oembed_html', 'lazyoutube', 10, 1);
Überprüfung der Verbesserung
Es gibt verschiedene Möglichkeiten, um zu testen, ob das verzögerte Laden funktioniert. Am einfachsten ist es, Ihre Website in der neuesten Version von Chrome zu öffnen, die Entwicklertools (Strg + Umschalt + I) zu starten und zur Registerkarte "Netzwerk" zu wechseln. Navigieren Sie zu einer langen Seite mit vielen Bildern und scrollen Sie nach unten. Sie sollten sehen, dass die Bilder ganz unten erst geladen werden, wenn Sie nach unten scrollen.
Seien Sie nicht beunruhigt, wenn die Bilder sofort geladen werden! Der Schwellenwert, ab dem Chrome ein Bild lädt, hängt von mehreren Faktoren ab, einschließlich der Verbindungsgeschwindigkeit. Anekdotisch scheint der Abstand auch deutlich größer zu sein als bei JavaScript-basierten Lösungen Ja wirklich lange Seite zum Testen.
Eine alternative Möglichkeit besteht darin, ein Audit über dieselben Entwicklertools zu starten oder den webbasierten PageSpeed Insights-Test zu verwenden. Suchen Sie nach der Meldung "Offscreen-Bilder verschieben", die im Abschnitt "Opportunities" angezeigt wird, wenn sie noch nicht implementiert ist, und im Abschnitt "Bestehende Audits", wenn das verzögerte Laden funktioniert.
Jetzt haben Sie die Ladezeit Ihrer Wordpress-Site um einige Millisekunden verkürzt. Gut gemacht!
