WP Rocket 3.17: Verbessern Sie Ihre INP-Metrik mit automatischem Lazy Rendering

Hatten Sie jemals das Gefühl, dass Ihre Website langsam reagiert, insbesondere wenn Sie versuchen, mit langen Blogseiten oder E-Commerce-Produktseiten zu interagieren? Die Leistungsoptimierung ist eine Herausforderung, und dies gilt umso mehr, wenn es darum geht, komplexe Metriken im Zusammenhang mit der Benutzererfahrung zu verbessern, wie z. B. Interaction to Next Paint (INP). INP ist die neue Core Web Vital-Metrik, die die Reaktionsfähigkeit von Webseiten misst und eine Schlüsselrolle bei der Verbesserung von Geschwindigkeit, Benutzererfahrung und SEO spielt – mit anderen Worten, Sie können sie nicht ignorieren.

Wenn Sie hart daran gearbeitet haben, die Geschwindigkeit und Benutzererfahrung Ihrer Website zu verbessern und einen besseren INP-Grad zu erreichen, werden Sie sich freuen, mehr über unsere neue Hauptversion und ihre brandneue automatisierte Funktion zu erfahren. Sag Hallo zu WP Rocket 3.17!

Unsere neue Hauptversion konzentriert sich auf die automatische Optimierung der Darstellung von Inhalten auf Ihrer Website, wenn Besucher scrollen. Dies ist besonders hilfreich für Blogs, Online-Shops und alle Websites mit vielen Inhalten, die es zu erkunden gilt.

Wir freuen uns aus zwei Gründen, WP Rocket 3.17 vorzustellen.

Erstens wird die neue Funktion die INP-Metrik und die wahrgenommene Geschwindigkeit verbessern, insbesondere auf Mobilgeräten. Es kann sich auch positiv auf andere Schlüsselkennzahlen auswirken, wie z. B. die Noten „Größter Contentful Paint“ und „Erster Contentful Paint“. Die Optimierung von Kennzahlen im Zusammenhang mit der Benutzererfahrung kann auch die Conversion-Rate verbessern, was das Endziel ist, Ihre Website schneller zu machen, oder?

Darüber hinaus ist WP Rocket das erste Plugin, das eine so leistungsstarke und automatische Optimierung auf allen Seiten einer Website präzise bietet.

Entdecken Sie alles in unserem Blogbeitrag oder schauen Sie sich das Video an.

Was ist Rendering und welche Auswirkungen hat es auf die Leistung?

Um zu verstehen, wie WP Rocket 3.17 die Leistung Ihrer Website verbessern kann, beginnen wir mit der Erläuterung des Renderings. Wenn Ihre Webseite geladen wird, kommt das Rendering ins Spiel – das heißt, die Art und Weise, wie der Browser Ihren Website-Code in die visuellen Elemente umwandelt, die Benutzer auf ihrem Bildschirm sehen.

Das Browser-Rendering umfasst mehrere Phasen, die damit beginnen, dass der Browser die HTML-Datei empfängt und den DOM-Baum erstellt, der die Baumstrukturdarstellung der Webseite darstellt. Der letzte Schritt ist das Malen – dabei malt der Browser jedes Element auf den Bildschirm und Benutzer können die fertige Webseite sehen.

Wie immer bei der Web-Performance-Optimierung gibt es einen Haken. Tatsächlich kann der Rendervorgang eine Leistungsherausforderung darstellen, da der Browser viele Aufgaben gleichzeitig erledigen muss. Diese Multitasking-Aktivität findet im sogenannten Hauptthread statt, der hauptsächlich von JavaScript-Dateien betroffen ist.

Wenn der Hauptthread zu beschäftigt ist, führt dies zu langen Aufgaben. Diese langwierigen Aufgaben sind wie Staus, die die Reaktionsfähigkeit Ihrer Seite verlangsamen und sich auf Kennzahlen wie die Interaktion mit Next Paint auswirken – eine entscheidende Core Web Vital-Kennzahl, die misst, wie schnell Ihre Seite auf Benutzerinteraktionen reagiert.

Rendering und Leistung

Wenn wir über das Rendern und seine Auswirkungen auf die Leistung sprechen, beziehen wir uns insbesondere auf zwei Teile des Prozesses: das Rendern und das Malen – wie Sie im vorherigen Abschnitt gesehen haben. Dies sind die Phasen, in denen der Browser hart arbeitet, um den Inhalt auf dem Bildschirm anzuzeigen – und die zum INP-Score und zur wahrgenommenen Geschwindigkeit beitragen.

Es gibt mehrere Variablen, die die Leistung während dieses Prozesses beeinflussen können. Um nur einige zu nennen: die DOM-Größe, die JavaScript-Ausführungsgeschwindigkeit und die Animationen. Je mehr Inhalte auf der Seite vorhanden sind, desto anspruchsvoller ist die Rendering-Optimierung.

Nachdem Sie nun wissen, dass das Rendern für die Geschwindigkeit entscheidend ist und verbessert werden muss, lernen wir, wie Sie dies ermöglichen können.

Lernen Sie die CSS-Eigenschaft content-visibility kennen

Eine effektive Möglichkeit, das Browser-Rendering – und damit Geschwindigkeit und Reaktionsfähigkeit – zu optimieren, besteht darin, die CSS-Eigenschaft „Content-Visibility“ zu nutzen. Diese Eigenschaft weist den Browser an, nicht alle Inhaltsteile der Seite sofort darzustellen, sondern zu warten, bis der Benutzer sie sieht.

Haben Sie schon einmal Videospiele gespielt? Wenn ja, wissen Sie, dass nicht die ganze Welt auf einmal geladen wird. Stattdessen werden die neuen Szenen und ihr Hintergrund erst angezeigt bzw. gerendert, wenn Sie vorwärts gehen. Genau das ermöglicht die CSS-Eigenschaft content-visibility.

Wie hilft das also? Durch die Verwendung der Inhaltssichtbarkeit muss der Browser weniger Arbeit auf einmal erledigen. Anstatt zu versuchen, alles sofort zu rendern, kann es sich auf das konzentrieren, was gerade am wichtigsten ist. Das heisst:

1. Es weist den Browser an, das Rendern einiger Elemente zu unterlassen, bis sie benötigt werden, sodass der Browser weniger langwierige Aufgaben erledigen muss, insbesondere wenn es um das Rendern und Malen geht.
2. Die Seite wird schneller geladen, da die sichtbarsten Teile schnell fertig sind.
3. Die Seite reagiert schneller, wenn Benutzer mit ihr interagieren.

Dadurch bietet Ihre Website ein verbessertes Benutzererlebnis. Besucher sehen Ihre Inhalte schneller und können beim Scrollen und Klicken mit der Seite interagieren.

Die gute Nachricht ist, dass die Content-Visibility-Eigenschaft jetzt von allen gängigen Browsern unterstützt wird. Dies bedeutet, dass diese leistungsstarke Funktion die Leistung einer Website für fast alle Benutzer verbessern kann, unabhängig von ihrem Browser.

Durch die Anwendung der Content-Visibility-Eigenschaft in WP Rocket 3.17 führen wir die automatische Lazy-Rendering-Funktion ein. Lesen Sie weiter, um zu erfahren, was es bedeutet.

3.17: Einführung in das automatische Lazy Rendering

Unsere neue Hauptversion ermöglicht das automatische Lazy-Rendering. Wie immer bei unseren Neuerscheinungen und Verbesserungen besteht das Ziel darin, Ihnen dabei zu helfen, die Leistung Ihrer Website auf einfachste Weise zu verbessern, unabhängig von Ihren technischen Fähigkeiten und davon, ob Sie Techniken zur Optimierung der Webleistung beherrschen.

Wir konzentrieren uns auf Funktionen, die einen erheblichen Einfluss auf Geschwindigkeit und Benutzererfahrung haben können, und WP Rocket 3.17 bildet da keine Ausnahme.

In erster Linie kann die neue Version Ihren INP-Score erheblich verbessern, sodass Ihre Website besser auf Besucher reagiert. Es kann auch zu einer leichten Verbesserung Ihrer Werte für „Largest Contentful Paint“ und „First Contentful Paint“ führen, obwohl dies eher ein positiver Nebeneffekt wäre.

Die neue Funktion ist sicher zu implementieren und wird Ihre Besucher niemals beeinträchtigen. Wenn ein Browser die Eigenschaft „Inhaltssichtbarkeit“ nicht unterstützt, weil es sich um eine ältere Version handelt, passiert nichts – auch wenn WP Rocket 3.17 aktiviert ist.

Die Funktion stellt außerdem ein geringes Risiko für Ihre Website dar – es ist sehr unwahrscheinlich, dass etwas kaputt geht.

Nebenbei bemerkt haben wir vor drei Jahren darüber nachgedacht, eine solche Funktion zu veröffentlichen. Damals basierte die Funktion auf JavaScript und erforderte einen Langzeittest, um die möglichen Auswirkungen auf SEO zu überprüfen. In der Zwischenzeit wurde die CSS-Eigenschaft „Content-Visibility“ stärker unterstützt und bot eine praktikable und einfachere Lösung. Da INP für die Optimierung der Web-Performance immer wichtiger wird, war die Veröffentlichung dieser Funktion eine Selbstverständlichkeit.

So funktioniert automatisches Lazy Rendering

Kehren wir zu unserer Videospiel-Analogie zurück.

Stellen Sie sich vor, Sie spielen ein Spiel. Wenn Sie Ihren Charakter vorwärts bewegen, rendert das Spiel neue Bereiche, bevor Sie diese erreichen. Genau so funktioniert das automatische Lazy Rendering für Ihre Website.

Die Einführung des automatischen Lazy-Renderings wurde dank des Vorgängers, WP Rocket 3.16, ermöglicht. Unsere vorherige Version führte zwei entscheidende Verbesserungen ein:

• Wir haben den separaten Mobilcache standardmäßig aktiviert.
• Wir haben die Erkennung und Optimierung der kritischen Bilder (Bilder über dem Falz) mithilfe eines Beacons eingeführt, der echte Informationen über die zu optimierenden Elemente sammelt. Die Funktion 3.17 erweitert lediglich die vom Beacon verfolgten Elemente, um genaue Informationen über das Layout bereitzustellen und die neue Optimierung zu ermöglichen.

Und Folgendes passiert, wenn WP Rocket 3.17 aktiviert ist.

Wenn ein Benutzer auf Ihrer Seite landet, kann der Browser aufgrund der neuen Funktion nicht alles sofort rendern. Im Gegenteil, der Browser rendert die Elemente auf der Seite nur dann, wenn sich Benutzer in der Nähe dieses Punktes auf der Seite befinden – so wie das Spiel den nächsten Bereich erst dann lädt, wenn man sich ihm nähert. Je länger die Seite ist, desto effizienter ist das verzögerte Rendern.

Deshalb ist die neue Version besonders vorteilhaft für:

1. Lange Seiten mit viel Inhalt, etwa Blogbeiträgen oder Produktlisten.
2. Seiten mit komplexen Elementen, deren Rendern mehr Zeit in Anspruch nimmt, z. B. nicht zusammengesetzte Animationen (z. B. Leinwandanimationen und Videohintergründe).

WP Rocket ist das erste Plugin, das diese automatische Funktion präzise auf alle Ihre Seiten anwendet. Tatsächlich analysiert WP Rocket 3.17 die Struktur der Seite und erkennt Elemente, bei denen Lazy Rendering angewendet werden kann. Das Plugin verarbeitet jede Seite einzeln, Desktop und Mobilgerät separat, um sicherzustellen, dass wir die richtigen Elemente erhalten, ohne Chancen zu verpassen.

Es gibt keine Option zum Markieren – Sie müssen nichts tun, um es zu aktivieren. Sobald WP Rocket auf 3.17 aktualisiert wird, wird es funktionieren.

Wie Lazy Rendering die Interaktion mit der nächsten Farbstufe verbessern kann

Sehen wir uns nun an, wie WP Rocket 3.17 Ihre INP-Note verbessern kann.

Das Wichtigste zuerst: Laut Google bedeutet eine gute Reaktionsfähigkeit, dass Ihr INP-Score unter 200 Millisekunden liegen sollte.

Bevor wir uns mit den Ergebnissen der von uns durchgeführten Tests befassen, ist es auch wichtig zu betonen, dass die Leistungsverbesserungen, die Ihre Website erzielen kann, von ihrem aktuellen Optimierungsgrad abhängen. Wenn Ihre Website bereits gut optimiert ist, werden Sie möglicherweise geringfügige Verbesserungen in Ihrer INP-Bewertung feststellen. Wenn es jedoch Raum für Verbesserungen gibt, könnten Sie einen deutlicheren Anstieg des INP-Scores und der LCP- und FCP-Noten erleben.

Um die INP-Leistungsverbesserung zu messen, empfehlen wir die Verwendung eines Tools wie des INP Debugger von DebugBear, das Ihnen ein klares Bild der Reaktionsfähigkeit Ihrer Website vor und nach der Aktivierung von WP Rocket 3.17 und seiner automatischen Funktion „Lazy Rendering“ liefert.

Wenn Sie sich fragen, warum wir dieses Mal nicht das auf Lighthouse basierende PageSpeed ​​Insights-Tool verwenden, liegt der Grund darin, dass INP eine Feldmetrik ist und anhand der Interaktion berechnet wird. Und Lighthouse misst es nicht, zumindest im Moment.

Schauen wir uns ein Beispiel aus der Praxis an, um Ihnen die potenziellen Verbesserungen zu zeigen, die WP Rocket 3.17 mit sich bringen kann. Wir haben eine E-Commerce-Website mit vielen Inhalten zum Scrollen getestet – mehrere Abschnitte, Produktbilder und Artikellisten. Zu Testzwecken haben wir der Website außerdem eine JavaScript-Workload hinzugefügt, um den Hauptthread zu beschäftigen und die Effizienz des Lazy Rendering zu überprüfen, um die Situation zu verbessern.

Hier ist, was wir gefunden haben.

Bevor Sie WP Rocket 3.17 mit automatischem Lazy Rendering aktivieren

Das INP-Ergebnis beträgt 204 ms. Wie Sie sehen, zeigt das Ergebnis einen Verbesserungsbedarf auf:

Aus technischerer Sicht haben wir auch das Browser-Rendering auf der Registerkarte „Leistung“ des Chrome DevTools analysiert. Der Screenshot verdeutlicht die langen Aufgaben und die zum Rendern benötigte Zeit: 2610 ms.

Nach der Aktivierung von WP Rocket 3.17 mit automatischem Lazy Rendering

Das INP-Ergebnis beträgt jetzt 146 ms. Diesmal ist die INP-Note grün.

Dieses Mal zeigt die Registerkarte „Leistung“ des Chrome DevTools, wie die langen Aufgaben optimiert wurden und die Renderzeit auf 2325 ms reduziert wurde.

Wie Sie sehen, haben wir genau dieselbe Seite getestet. Der einzige Unterschied besteht darin, dass beim zweiten das automatische verzögerte Rendern aktiviert ist, beim ersten jedoch nicht.

Die Verbesserung ist erheblich. Wir sind von einer Seite mit einem orangefarbenen INP-Score – der verbessert werden musste – zu einer Seite mit einem grünen Ergebnis übergegangen, was empfohlen wird, um die Reaktionsfähigkeit sicherzustellen und ein großartiges Benutzererlebnis zu bieten.

Einpacken

Unabhängig davon, ob Sie ein Blog, einen Online-Shop oder eine andere Art von inhaltsreicher Website betreiben, kann WP Rocket 3.17 und seine Lazy-Rendering-Funktion eine wichtige Kennzahl wie INP automatisch verbessern.

Durch die Steigerung von INP wird die Reaktionsfähigkeit der Seite und damit das Benutzererlebnis verbessert. Dies kann dazu beitragen, dass Besucher länger auf Ihrer Website bleiben und sie zum Konvertieren und Wiederkommen bewegen – und deshalb sollten Sie die Optimierung nicht außer Acht lassen.

Warum sehen Sie nicht selbst, wie die INP-Note verbessert werden kann? Aktualisieren Sie WP Rocket auf Version 3.17 oder probieren Sie es aus. Wir würden gerne hören, wie die neue Hauptversion für Sie funktioniert. Teilen Sie uns in den Kommentaren mit, welche Erfahrungen Sie mit WP Rocket 3.17 gemacht haben und welche Verbesserungen Sie erhalten!