Die Messung der Leistung Ihrer Website war oft eine schwierige Angelegenheit. Dies liegt daran, dass uns die verfügbaren Tools keinen angemessenen Einblick in die Erfahrung des Benutzers im Verhältnis zur Leistung dieser Website gaben. Google Lighthouse behebt jedoch viele dieser Nachteile und sorgt dafür, dass Sie es in Ihren Entwicklungsworkflow integrieren können. Eine der „Möglichkeiten“ innerhalb von Lighthouse besteht darin, Offscreen-Bilder in WordPress zu verschieben. Die gute Nachricht ist, dass dies einfach zu erreichen ist.
In diesem Beitrag schauen wir uns an, wie man Offscreen-Bilder in WordPress mit beiden Methoden verschiebt Code Und Plugins. Zuerst müssen wir jedoch ein paar Begriffe zu Google Lighthouse klären und dann darüber sprechen, wo das ist Verschieben Sie Offscreen-Bilder Die Metrik sollte auf Ihrer Prioritätenliste stehen.
Der Unterschied zwischen einer Prüfungsempfehlung und einer Chance
Bevor wir uns damit befassen, wie Sie Offscreen-Bilder in WordPress verschieben, ist es wichtig zu verstehen, wie diese Anleitung zusammenpasst Google Leuchtturm. Es handelt sich eher um eine Leistungschance als um eine Prüfungsempfehlung. Hier ist der Unterschied:
- Audit-Empfehlung. Dies wird einen entscheidenden Einfluss auf Ihre Ergebnisse innerhalb von Google Lighthouse haben, und Sie sollten diesen Metriken Ihre Aufmerksamkeit vorrangig widmen.
- Gelegenheiten. Auch wenn diese immer noch von Bedeutung sind, haben sie keinen Einfluss auf Ihre Prüfungsergebnisse. Daher können Sie sie als zweitrangiges Problem betrachten.
Der Verschieben Sie Offscreen-Bilder Metrik ist eine Chance. Das bedeutet, dass es immer noch Auswirkungen haben kann, aber Sie können es sich ansehen, sobald sich Ihr Ergebnis nicht mehr verbessert.
Offscreen-Bilder aufschieben – eine Definition
Ihre Website wird wahrscheinlich in allen Abschnitten Ihrer Seiten Bilder verwenden. Einige davon werden „über dem Falz“ angezeigt, also auf dem Bildschirm, ohne dass ein Scrollen erforderlich ist. Daher repräsentieren die Offscreen-Bilder alles andere.
Der Verschieben Sie Offscreen-Bilder Metrik bezieht sich auf visuelle Elemente, die eines der folgenden vier Kriterien erfüllen:
- Ein Bild muss unterhalb des sichtbaren Seitenbereichs beginnen und in der dreifachen Höhe dieses Bereichs enden.
- Superkleine Bilder (mit einer Größe von weniger als 0,02 MB) werden nicht berücksichtigt Verschieben Sie Offscreen-Bilder metrisch.
- Seiten, deren Ladezeit mehr als 50 ms beträgt, lösen die Gelegenheit aus.
Wenn Ihre Seite ein Ladeattribut definiert, wird es nicht angezeigt Verschieben Sie Offscreen-Bilder überhaupt. Spoiler-Alarm: Machen Sie sich damit vertraut loading="lazy" Jetzt!
Darüber hinaus kann es sein, dass eine Website mit vielen Offscreen-Bildern schlecht angezeigt wird Größter Contentful Paint (LCP) Partituren. Dies bringt eine verwirrende Änderung an Google Lighthouse 10 mit sich, die wir als Nächstes behandeln werden.
„Improving Time To Interactive“ (TTI) ist eine abgewertete Kennzahl
In älteren Versionen von Google Lighthouse Verschieben Sie Offscreen-Bilder betroffener TTI. Google betrachtet dies jedoch mittlerweile als veraltete Kennzahl. Durch die Gewichtung von 10 % wurde die Gesamtbewertung der Leistungsprüfung an Cumulative Layout Shift (CLS) übertragen und bietet nun eine Gewichtung von 25 % (1)(2).
Dies führt zu einem Problem: Unabhängig davon, ob Sie Bilder außerhalb des Bildschirms verschieben oder nicht, führt dies nicht zu einer Layoutverschiebung. Das ist also der Grund Verschieben Sie Offscreen-Bilder ist jetzt nur noch eine Chance und keine vollständige Prüfungsempfehlung.
Warum Google Lighthouse Sie auffordert, Offscreen-Bilder zurückzustellen
Trotz des Abstiegs von Verschieben Sie Offscreen-Bilder, es hat immer noch eine gewisse Bedeutung für die Ladegeschwindigkeit und Leistung. Sie können die Wirkung vollständig geladener Offscreen-Bilder in Sekundenschnelle mit dem von Ihnen gewählten Tool sehen:
Während diese Kennzahl keinen Einfluss auf CLS oder TTI hat, kann sie einen Einfluss auf den LCP haben – wenn auch in vielen Fällen geringfügig. Es ist auch eine gute Erinnerung daran, dass Sie Bilder nur dann laden sollten, wenn es nötig ist. Als nächstes besprechen wir, warum.
Warum Sie nicht alle Ihre Bilder auf einmal laden sollten
Im Gespräch arbeiten wir alle daran „Genossenschaftsprinzip“. Da es sich hierbei nicht um eine sozialwissenschaftliche Unterrichtsstunde handelt, gehen wir hier nicht allzu sehr ins Detail. Es gibt jedoch einen wichtigen Aspekt dieses Konzepts, der für die Organisation von Bedeutung ist Verschieben Sie Offscreen-Bilder metrisch. „Grices Quantitätsmaxime“ besagt, dass Sie nur so viele Informationen preisgeben sollten, wie Sie zur Herstellung des Kontexts benötigen.
Warum ist das wichtig? Denn wenn Sie zu viele Informationen preisgeben, kann dies (unter anderem) zu einer Überlastung des Zuhörers führen.
Daher sollten Sie auch nicht alle Bilder Ihrer Website auf einmal laden! Dafür gibt es einige gute Gründe:
- Ein Benutzer sieht die Offscreen-Bilder nicht und beansprucht andernfalls Ressourcen, die Sie für Elemente auf dem Bildschirm benötigen.
- Das Laden von Bildern außerhalb des Bildschirms kann zu einer schlechten Benutzererfahrung (UX) führen, da eine Seite geladen wird, ohne dass im Ansichtsfenster etwas Bemerkenswertes passiert.
- Für den Nutzer kann dies auch finanzielle Kosten verursachen. Stellen Sie sich beispielsweise vor, dass jemand eine Website aufruft, die keine Off-Screen-Bilder zurückstellt, während er mobile Daten statt WLAN nutzt.
Da der Fokus von Google Lighthouse auf UX liegt und wie sich die wahrgenommene Leistung darauf auswirkt, ist es wichtig, alle oben genannten Punkte zu verstehen. Die gute Nachricht ist, dass es eine einfache Möglichkeit gibt, Offscreen-Bilder zu verschieben.
So verschieben Sie Offscreen-Bilder auf Ihrer Website
Die Antwort lautet: Lazy Loading. Dies ist die einfachste und effektivste Möglichkeit, die Auswirkungen von Offscreen-Bildern auf die wahrgenommene Leistung Ihrer Website zu reduzieren. Noch besser, Die meisten Browser unterstützen Lazy Loading:
Allerdings unterstützt Firefox nur Lazy Loading für Bilder, was wichtig ist, wenn Sie sich dafür entscheiden, dies zu implementieren Inline-Frames. Dennoch haben Sie mehrere Möglichkeiten, dies umzusetzen. Der Hauptansatz verwendet HTML loading Attribut innerhalb eines <img> oder <iframe> Element. Sie haben die Möglichkeit, drei verschiedene Werte zu verwenden:
eager. Dadurch wird der Browser angewiesen, diese Bilder zuerst zu laden. Dies ist die Standardoption, die so gut wie gar nicht enthalten ist, da Bilder immer gerendert werden, unabhängig davon, wo sie sich auf der Seite befinden.lazy. Dadurch wird das Laden eines Bildes oder Iframes verzögert, bis es einen hartcodierten Zustand erreicht Abstand vom Ansichtsfenster. Der genaue Abstand kann je nach Browser unterschiedlich sein, und Sie sollten auch immer die Bildabmessungen angeben.auto. Der Browser wählt die beste Option für den Job aus.
Dies ist so einfach zu implementieren, wie Sie es erwarten würden:
<img src=" loading="lazy" alt="" width="200" height="200">Im Frontend ist hier natürlich nichts zu sehen, da das Bild sowieso außerhalb des Bildschirms und unsichtbar ist.
Wenn Sie sich für die Verwendung von Accelerated Mobile Pages (AMP) entscheiden, können Sie Lazy Loading auf automatischer Basis implementieren amp-img Element. Wenn es um andere Plattformen geht, sind Module oder Plugins die beste Möglichkeit, Lazy Loading zu implementieren.
Wenn Sie Offscreen-Bilder in WordPress verschieben möchten, sollten Sie dafür ein spezielles Plugin verwenden. Standardmäßig, WordPress implementiert Lazy Loading für alle Bilder, aber dieser breite Pinsel entspricht möglicherweise nicht genau Ihren Anforderungen.
Verwenden Sie WordPress-Plugins, um Ihrer Website Lazy Loading hinzuzufügen
Wann immer Sie WordPress zusätzliche Funktionen hinzufügen möchten, ist ein Plugin immer die beste Wahl. Beim Lazy Loading kann das auch der Fall sein.
WordPress verfügt über eine Reihe von Plugins, die Ihnen beim Hinzufügen von Lazy Loading helfen können, aber nicht alle sind gleich. Einige haben beispielsweise schlechte Bewertungen und Rezensionen, andere erhalten nicht viele Updates und einige können nicht einmal das richtige Maß an Funktionalität bieten. Jedoch, Optimol kann sowohl in puncto Bildkomprimierung als auch Lazy Loading überzeugen.
Dies wird kein Überblick darüber sein, was Optimole im Allgemeinen leisten kann – unser Schwesterseite Themeisle kann dir das zeigen. Stattdessen heben wir die schnellen und problemlosen Optionen hervor, die Ihnen zum verzögerten Laden von Bildern zur Verfügung stehen. Um die richtigen Optionen zu finden, gehen Sie zu Medien > Optimole > Einstellungen Bildschirm, dann suchen Sie nach Skalieren Sie Bilder und laden Sie sie verzögert Kippschalter. Stellen Sie sicher, dass Folgendes aktiviert ist:
Sobald Sie dies tun, steht Ihnen eine ganze Reihe von Optionen zur Verfügung Erweitert > Lazyload Abschnitt:
Dies bietet Ihnen eine Reihe wertvoller Optionen, mit denen Sie arbeiten können. Sie können beispielsweise einen Platzhalter für Ihre Bilder aktivieren, zwischen browsernativem und klassischem Lazy Loading wechseln, die Bildskalierung aktivieren und vieles mehr.
Es gibt jedoch zwei Einstellungen, die Sie genauer untersuchen sollten. Mit der ersten Option können Sie eine bestimmte Anzahl von Bildern vom Laden ausschließen. Der Standardwert ist drei, aber Sie können dies auf die Anzahl der Bilder festlegen, die Sie über dem Falz haben. Das bedeutet, dass Sie Lazy Loading für alle Bilder auf der Website implementieren:
Die andere coole Funktion ist die Möglichkeit, CSS-Selektoren anzugeben, um das Lay Loading von Hintergrundbildern zu erleichtern:
Dies gibt Ihnen die Möglichkeit, das gesamte Lazy-Loading-Erlebnis basierend auf Ihren Bedürfnissen und dem Lighthouse-Score anzupassen und dennoch ein gewisses Maß an Flexibilität zu bewahren. Darüber hinaus ist all das mit dem möglich kostenlose Version von Optimole!
Fazit 🧐
Wenn Bilder nicht auf dem Bildschirm angezeigt werden, müssen Sie sie nicht laden. Ohne eine Lösung wie Lazy Loading kann es zu einer längeren Ladezeit Ihrer Website kommen. Es wird sich auch auf einige der wichtigsten Kennzahlen auswirken, die sich auf die Leistung beziehen. Google Lighthouses Verschieben Sie Offscreen-Bilder Die Gelegenheit gibt Ihnen den Anstoß, eine Art verzögertes Laden zu implementieren, und es gibt viele codefreie Möglichkeiten, dies zu tun.
Zum Beispiel, Optimol ist eines der besten Plugins, das Ihnen hilft, Offscreen-Bilder in WordPress zu verschieben. Sie können Optionen spezifischer festlegen als der globale „Always-on“-Ansatz von WordPress. Es gibt jedoch auch andere Plugins, die Ihnen dabei helfen, wie zum Beispiel Caching-Plugins. Sogar der Codierungspfad ist unkompliziert und was noch besser ist: Sie erhalten Unterstützung von fast jedem Browser.
Wird Optimole Ihre Methode zum Verzögern von Offscreen-Bildern in WordPress werden? Teilen Sie uns Ihre Gedanken im Kommentarbereich unten mit!
