WP Rocket 3.15: Vorstellung von Lazy-Loading CSS-Hintergrundbildern zur Leistungssteigerung

Was ist das Hauptziel, das du im Kopf hast, wenn du deine Website für Geschwindigkeit optimierst? Du möchtest vielleicht eine herausragende Erfahrung für deine Besucher bieten. Oder du möchtest deine Core Web Vitals-Noten und deine PageSpeed Insights-Bewertung verbessern, da sie mit der Optimierung der Sichtbarkeit deiner Website in Google zusammenhängen.

So oder so, wir wetten, du wirst die neue Hauptversion genießen. Begrüße WP Rocket 3.15!

Wir sind stolz und aufgeregt, diese neue Hauptversion mit einer brandneuen Funktion vorzustellen: LazyLoading CSS-Hintergrundbilder. Diese neue Option hilft dir, zwei PageSpeed Insights-Prüfungen anzugehen und einige wichtige Leistungskennzahlen zu verbessern – folglich auch deine PageSpeed Insights-Bewertung. Die Funktion ist auch eine bahnbrechende Option auf dem Markt. Warum das so ist, erfährst du im nächsten Abschnitt. 🚀

WP Rocket 3.15 entfernt auch die Funktion “CSS kombinieren” – den Grund für diese Entscheidung erfährst du im Artikel.

Sage hallo zur neuen Version, schau dir unser Video an oder lies weiter, um alles über diesen Meilenstein von WP Rocket zu erfahren!

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren

Mehr Informationen

Warum hilft das LazyLoading von Bildern, die Leistung zu verbessern?

Lazy Loading ist eine leistungsstarke Optimierungstechnik, die es dem Browser ermöglicht, nur die vor dem Scrollen sichtbaren Dateien (über dem “Bildschirmrand”) zu laden. Das sind die Dateien, die notwendig sind, um die Seite schnell dem Benutzer anzuzeigen.

Dank Lazy Loading werden die Dateien, die sich nicht im oberen Bereich des sichtbaren Bereichs befinden (unter dem “Bildschirmrand”), asynchron geladen. Sie werden nicht benötigt, wenn die Seite zuerst geladen wird, und sie werden nur angezeigt, wenn der Benutzer auf der Seite nach unten scrollt. Dadurch wird die Seite schneller angezeigt, da der Browser nicht warten muss, bis alle Ressourcen – einschließlich der nicht kritischen – geladen sind.

Lazy Loading sollte auf alle Bilder angewendet werden, außer auf diejenigen, die sich über dem “Bildschirmrand” befinden – wie bereits erklärt, sind diese sofort sichtbar für die Benutzer und müssen so schnell wie möglich geladen werden. Dazu gehören auch die in den CSS-Dateien und im Inline-CSS-Code definierten Bilder, wie die Hintergrundbilder.

Du kannst sehen, wie Lazy Loading dazu beiträgt, dass die Seite schneller lädt und die Gesamtladezeit verbessert, oder?

Nachdem wir erklärt haben, warum Lazy Loading zur Leistungssteigerung wichtig ist, lass uns die neue WP Rocket-Funktion entdecken.

3.15: Was LazyLoading für CSS-Hintergrundbilder bedeutet

Die wichtigste Nachricht bezüglich LazyLoading für CSS-Hintergrundbilder ist, dass es direkt auf zwei wichtige PageSpeed Insights-Prüfungen Einfluss nimmt: “Vermeidung riesiger Netzwerk-Payloads” und “Niedrige Anzahl von Anfragen und geringe Übertragungsgrößen beibehalten”. Beide Prüfungen beziehen sich darauf, wie schwer deine Seiten und deren Elemente sind, wenn eine Seite geladen wird.

Und genau deshalb ist die LazyLoading CSS-Hintergrundbilder-Funktion praktisch – insbesondere, weil sie die erste Option auf dem Markt ist, die diese Art der Optimierung automatisch bei Aktivierung der Funktion ermöglicht, ohne jeglichen Aufwand von deiner Seite aus.

Abhängig davon, wie deine Seite aufgebaut ist, kann die neue Funktion auch dazu beitragen, drei Leistungskennzahlen der Core Web Vitals zu verbessern: Largest Contentful Paint, First Contentful Paint und Speed Index.

All diese Kennzahlen sind im Leistungsbericht von Google enthalten und beeinflussen die Gesamtbewertung von PageSpeed Insights. Durch ihre Verbesserung wirst du wahrscheinlich die Bewertung der Core Web Vitals und die Gesamtleistungsnote verbessern.

Auswirkungen der neuen Funktion auf die Leistung

Wir haben einige Leistungstests durchgeführt, um die Auswirkungen der brandneuen Funktion auf den PageSpeed-Leistungsbericht zu messen.

Wir haben 22 Hintergrundbilder in den Website-Test aufgenommen, um die Auswirkungen der Aktivierung der neuen Funktion zu messen.

Vor der Aktivierung der LazyLoad für CSS-Hintergrundbilder haben wir den PageSpeed-Bericht durchgeführt.

Das Ergebnis zeigte Verbesserungspotenzial für die beiden oben genannten Prüfungen: “Vermeidung riesiger Netzwerk-Payloads” und “Niedrige Anzahl von Anfragen und geringe Übertragungsgrößen beibehalten”. Insbesondere wurde die Gesamtgröße der Ressourcen (6.229 KB) und die Anzahl der gefundenen Ressourcen (23 Anfragen) in Rot hervorgehoben.

Die Gesamtnote und die fünf Lighthouse-Metriken waren ziemlich gut.

Schauen wir mal, was passiert ist, nachdem wir LazyLoading für die CSS-Hintergrundbilder aktiviert haben.

Sieh dir die Liste der Bilder im Chrome Network Tab an. Du kannst sehen, dass die Anzahl der Bilder von 22 auf nur 7 gesunken ist – dies sind diejenigen, die auf diesem speziellen Sichtbereich geladen werden mussten.

Wir haben den PageSpeed-Bericht erneut durchgeführt, und hier ist das Ergebnis.

Der Diagnosebereich zeigte eine große Verbesserung. Die Anzahl der Anfragen ging von 24 auf 7 zurück, und ihre Größe von 6.229 KB auf nur 930 KB. Keine rote Warnung mehr!

Tatsächlich ging die Prüfung “Vermeidung riesiger Netzwerk-Payloads” in die “Bestanden”-Kategorie über.

Obwohl die Gesamtnote und die Bewertungen bereits gut waren, können wir immer noch eine Verbesserung sehen. Der “Largest Contentful Paint” (Core Web Vitals) ging von 2,3 s auf 1,3 s zurück. Der “Speed Index” ging von 1,1 s auf 0,8 s, und der “First Contentful Paint” ging von 1,0 s auf 0,8 s zurück.

Es ist wichtig zu bedenken, dass die Verbesserungen, die du mit einer solchen Funktion erzielen kannst, von der Struktur der Seite und der Anzahl der Hintergrundbilder unterhalb des “Bildschirmrandes” abhängen. “First Contentful Paint”, “Speed Index” und “Largest Contentful Paint” sind alles potenzielle Zielmetriken zur Verbesserung, ebenso wie die PageSpeed-Prüfungen und die Gesamtleistungsnote. Unser Test wurde an einem Prototyp durchgeführt, um die Verbesserungen zu zeigen, die eine solche Funktion bewirken kann, auch wenn der Ausgangspunkt bereits gut ist. Stell dir vor, was passieren kann, wenn der Verbesserungsbedarf größer ist.

Lass uns jetzt die LazyLoading CSS-Hintergrundbilder im Detail entdecken!

Wie die neue Funktion funktioniert

Die Funktion “LazyLoading CSS-Hintergrundbilder” befindet sich im Media-Tab > LazyLoad-Bereich.

Die Option zum “LazyLoading von CSS-Hintergrundbildern” ist die Zweite in der Liste. Du musst nur das Kästchen auswählen, um die neue Funktion zu aktivieren. Wie oben erklärt, gibt es keine zusätzliche Arbeit für dich: Du aktivierst die Option, und das Plug-in erledigt die Arbeit für dich.

Wie bereits im vorherigen Abschnitt erwähnt, sollten Bilder über dem “Bildschirmrand” nicht verzögert geladen werden, da sie so schnell wie möglich angezeigt werden müssen. Das gilt auch für Hintergrundbilder.

Wenn du möchtest, kannst du die Box “Ausgeschlossene Bilder oder Iframes” verwenden, um sie auszuschließen. Wir möchten dir auch mitteilen, dass die nächste Version sich darum kümmern wird, aber psst!

⚠️ Wir empfehlen, diese Funktion nicht zusammen mit der CSS-Kombination aus anderen Optimierungsplugins oder Themes zu aktivieren. Wir verarbeiten keine kombinierten Dateien aus anderen Plug-ins. Daher werden eventuelle Hintergründe, die dort platziert sind, nicht in den Lazy Loading-Prozess einbezogen.

Abschied von der Funktion “CSS kombinieren”

Die Funktion “CSS kombinieren” wurde für Websites entwickelt, die das HTTP/1-Protokoll verwenden, um eine seiner Einschränkungen zu beheben: die Fähigkeit, mehrere Anfragen über eine einzige Verbindung zu senden. Im Laufe der Zeit nahm die Verwendung von HTTP/1 ab und ist jetzt ein veraltetes Protokoll. Andererseits ist HTTP/2 jetzt das Hauptprotokoll und HTTP/3 wird immer beliebter für die Bereitstellung statischer Ressourcen.

Aus diesen Gründen wird “CSS kombinieren” überflüssig. Es gibt keine Leistungsvorteile bei der Verwendung der Funktion “CSS kombinieren” mit den Protokollen HTTP/2 und HTTP/3. Ferner gibt es noch weniger Grund, eine CSS-Optimierung durchzuführen, wenn du die Funktion “Unbenutzte CSS entfernen” verwendest, die auch mit der neuen Funktion kompatibel ist.

Weiterhin sollte die Funktion “CSS kombinieren” nicht aktiviert werden, wenn du die neue Funktion “LazyLoad CSS-Hintergrundbilder” aktivierst.

Deswegen wird “CSS kombinieren” automatisch aus dem Tab “Dateioptimierung” für neue Benutzer und Kunden entfernt, die auf WP Rocket 3.14 aktualisieren.

Fazit

WP Rocket 3.15 kommt mit einer neuen leistungsstarken Funktion, um wichtige Leistungskennzahlen zu verbessern – einschließlich einer Core Web Vitals-Metrik –, wichtige Leistungsprüfungen anzugehen und die PageSpeed Insights-Bewertung zu steigern.

LazyLoading CSS-Hintergrundbilder sind ein weiterer Schritt zur einfachen und effektiven Web-Performance-Optimierung, um deine Website schneller zu machen, ohne jeglichen Aufwand. Du musst nur ein Kästchen aktivieren, um die neue Funktion ihre Optimierung durchführen zu lassen – und du wirst keine anderen Caching-Plug-ins auf dem Markt finden, die die gleiche Optimierung automatisch durchführen!

Es ist auch an der Zeit, sich von der Funktion “CSS-Dateien kombinieren” zu verabschieden. Die Web-Performance hat sich neben dem HTTP-Protokoll entwickelt, und es gab keinen Grund, sie beizubehalten. WP Rocket enthält nur die Funktionen, die für die Verbesserung der Geschwindigkeit deiner Website notwendig sind – Einfachheit und Benutzerfreundlichkeit stehen immer im Mittelpunkt des Produkts.

Aktualisiere WP Rocket jetzt auf die neue Version und teile uns deine Meinung in den Kommentaren mit!