Google führt mit der Interaction to Next Paint (INP) ab März 2024 eine neue Bewertungsmetrik ein. Was das neue Web Core Vital bedeutet und vor allem was du beachten musst um die Interaction to Next Paint in WordPress zu verbessern, erfährst du in diesem Artikel.
Was ist die Interaction to Next Paint?
Die Interaction to Next Paint ist Googles neue Web Core Vital, welche die allgemeine Reaktionsgeschwindigkeit einer Seite auf Nutzerinteraktionen bewertet. Google simuliert das Klick, Tipp- und Tastaturverhalten eines Besuchers und misst die längste beobachtete Interaktion. Dies ist dann der Wert der INP.
Konkret kannst du dir die Messung anhand eines Akkordeon-Elements auf Deiner Website vorstellen. Es wird die Reaktionszeit ab dem Zeitpunkt des Klicks auf das Akkordeon-Element, bis zur Anzeige des Inhaltes gemessen. Öffnet sich das Element sofort und zeigt den Inhalt an, ist dies ein Indiz für eine gute Reaktionsgeschwindigkeit. Sofern sich das Element mit einer Verzögerung öffnet, die beispielsweise auf schlechten Code oder lange Animationen zurückzuführen ist, verschlechtert sich die INP.
Was ist eine gute INP?
Wie auch bei den anderen Web Core Vitals wird die Performance auch hier in drei Kategorien aufgeschlüsselt: Gute Reaktionszeit, verbesserungswürdige Reaktionszeit und schlechte Reaktionszeit.
Die Messwert-Obergrenzen für die drei Kategorien sehen wie folgt aus:
- Gute Reaktionszeit: unter 200 ms
- Verbesserungswürdige Reaktionszeit: Zwischen 200 ms und 500 ms
- Schlechte Reaktionszeit: Über 500 ms
Die Reaktionszeit zwischen Interaktion und Content Anzeige sollte auf Deiner Website also stets unter 200 ms liegen, um Googles neue Messmetrik zu bestehen.
Wie kann ich die Interaction to next Paint in WordPress verbessern?
Wie so oft ist auch die Interaction to next Paint von vielen unterschiedlichen Faktoren abhängig. Generell solltest du aber darauf achten, dass Deine WordPress Website stets schnell reagiert und schnelle Serverantwortzeiten liefert. Welche Schritte dafür im Detail notwendig sind erfährst du hier:
Allgemeine Performance Optimierungen
Bevor wir uns den komplexen Themen widmen, solltest du sicherstellen, dass Deine Website im allgemeinen bereits schnell lädt. Sofern dies noch nicht der Fall ist solltest du zunächst Deinen WordPress Pagespeed optimieren. Stelle insbesondere sicher, dass du bereits folgende Optimierungsmaßnahmen getroffen hast:
- Setze auf ein schnelles WordPress Hosting: Schnelles WordPress Hosting, verbessert die allgemeine Serverantwortzeiten Deiner Website. Je schneller die Ressourcen (HTML, JavaScript, CSS, MySQL) ausgeliefert werden können, desto besser ist die INP.
- Deaktiviere nicht genutzte WordPress Plugins: Du solltest nicht genutzt WordPress Plugins deaktivieren und ggf. nochmals überdenken, ob du wirklich jedes genutzte WordPress Plugin auch wirklich benötigst. Denn je weniger Plugins du nutzt, desto weniger Code muss geladen und ausgeführt werden, was sich letzten Endes positiv auf die Reaktionsfähigkeit deiner Website auswirkt.
- Wähle ein „schlankes“ WordPress Theme: Bei der Wahl des WordPress Themes, solltest du stets darauf achten, dass der Code größtenteils sauber geschrieben wurde und möglichst schlank ist. Denn auch hier gilt, je weniger Code geladen werden muss, desto besser ist das für die Reaktionsfähigkeit Deiner Website. Aktuell im Trend sind FSE-Themes. Neben diversen Vorteilen wie des Block-Editors, sind FSE-Themes in den allermisten Fällen extrem schlank und verhelfen dir zu besseren Ladezeiten.
- Nutze ein CDN: Ein content delivery network (CDN) ist ein Verbund aus mehreren Servern, welches das Laden von datenintensiven Websites stark beschleunigen kann. Eines der wohl bekanntesten CDNs ist Cloudflare.
- Nutze ein Caching-Plugin: Ein Caching-Plugin ist ein Muss für alle Betreiber einer WordPress Website. Sofern du noch kein Caching Plugin verwendest, solltest du dies schleunigst ändern! Mit einem Caching-Plugin reduzierst du die Anfragen an die Datenbank Deiner WordPress Website und erzielst so schnellere Reaktionszeiten Deiner Website. Laut unseren Tests ist WP Rocket nach wie vor das wohl beste WordPress Caching Plugin allerzeiten.
- Halte Dein WordPress up-to-date: WordPress wird stetig weiterentwickelt und verbessert. Deshalb solltest du die WordPress Website Pflege nicht vernachlässigen. Denn nur so stellst du sicher, dass alle Ladezeitrelevanten Neuerungen auch Deine WordPress Website betreffen.
Hauptthread minimieren und optimieren
Der Hauptthread ist sozusagen die Verarbeitungswarteschlange Deines Webbrowser. Alle für die Darstellung relevanten Website Ressourcen werden in der Warteschlange eingereiht und nach und nach abgearbeitet. Je weniger der Browser verarbeiten muss, desto schneller ist die Reaktionszeit, Deiner Website.
Folgende Maßnahmen sind die effektivsten, um die Interaction to Next Paint in WordPress zu verbessern:
JavaScript-Ausführung verzögern: Du solltest JavaScript-Daten verzögert laden um die Last der Hauptthreads zu minimieren. JavaScript Daten sollten generell erst dann geladen werden, wenn der Großteil des relevanten und sichtbaren Inhalts Deiner Website geladen wurde. Webentwickler verwenden hierfür zum Beispiel die Funktionen setTimeout oder requestIdleCallback. Wenn dir das zu kompliziert ist, kannst du auf eine Vielzahl an WordPress Plugins zurückgreifen, die dir die Arbeit nahezu komplett abnehmen. Du kannst Beispielsweise die JavaScript-Ausführung-verzögern-Funktion des WordPress Caching-Plugins WP Rocket verwenden.
Minimiere JavaScript und CSS: Auch die Minimierung von JavaScript- und CSS-Dateien kann mittlerweile fast jedes WordPress Caching-Plugin für dich übernehmen. Ziel der Minimierung der Daten, ist es den Code „leichter“ zu machen und die Ladezeit dieser Ressourcen zu erhöhen. Dies geschieht bei den meisten Caching-Plugins meist im Hintergrund, indem Zeilenumbrüche, Kommentare und Leerzeichen aus dem Code entfernt und somit die Datei verkleinert wird.
CSS Darstellung optimieren: Du solltest nicht genutztes CSS aus Deinem Code entfernen oder asynchron laden, um das Rendering Deiner Website zu beschleunigen. Auch diese Funktion bieten einige WordPress Caching-Plugin- und CDN-Anbieter an. Meist lässt sich die CSS Darstellung mit nur einem Klick aktivieren. Doch Vorsicht! Dies ist meist ein massiver Eingriff in das Styling Deiner Website. Deine Website könnte danach nicht mehr richtig dargestellt werden. Entsprechend kann es sein, dass du ggf. Ausnahmen für bestimmte CSS-Dateien definieren musst.
Lazy Loading verwenden: Lazy Loading kann den Hauptthread erheblich minimieren. Dank Lazy Loading werden nämlich Ressourcen, wie beispielsweise Bilder oder Skripte erst geladen, wenn diese im sichtbaren Bereich des Website Besuchers liegen.
Empfohlene Plugins zur Verbesserung der Interaction to Next Paint in WordPress
Die meisten oben genannten Empfehlungen lassen sich in WordPress glücklicherweise über Plugins umsetzen. Um die Interaction to Next Paint also in wenigen Klicks zu verbessern empfehlen wir dir folgende Plugins:
- WP Rocket: Beim lesen dieses Artikels ist dir sicher schon aufgefallen, dass wir absolute WP Rocket Fans sind. Das liegt insbesondere daran, dass du fast alle oben genannten Empfehlungen (JS & CSS Optimierung, Lazy Loading, Caching, CDN) und mehr, ausschließlich mit WP Rocket umsetzen kannst. Demnach ist das Caching-Plugin unsere Nummer 1, wenn es darum geht die Interaction to Next Paint in WordPress zu verbessern.
- Asset CleanUp: Wenn du bereits ein Caching-Plugin hast, mit dem du zufrieden bist und zusätzlich Optimierungen an JavaScript und CSS vornehmen möchtest. Dann ist Asset CleanUp eine tolle Ergänzung.
- Autoptimize: Auch Autoptimize ist eine tolle Ergänzung zu den oben genannten Optimierungs-Plugins, um Deine hochgeladenen Bilder zu verkleinern und so den Hauptthread zu entlasten.
- NitroPack: Ist eine gute alternative zu WP Rocket. Im gegensatz zu WP Rocket konzentriert sich NitroPack auf server-side Caching und kommt mit standardmäßig mit einem CDN daher.
Fazit: Interaction to Next Paint in WordPress verbessern
In WordPress ist es vergleichsweise einfach die Interaction to Next Paint zu verbessern, sofern du unsere oben genannten Empfehlungen befolgst. Im Grunde genommen kommt es insbesondere auf zwei Dinge an:
- Blitzschnelles WordPress Hosting, damit deine Website schnell ausgeliefert werden kann, um die Interaktionszeit zu verbessern.
- Ein gutes Performance Optimierungs-Plugin wie WP Rocket um die Last vom Hauptthread zu nehmen und die Interaction to Next Paint zu verbessern.
Tipp: Bei WPspace bekommst du gleich beides auf einmal. Blitzschnelles WordPress Hosting + AccelerateWP als Performance-Plugin. AccelerateWP ist eine Weiterentwicklung des beliebten Caching-Plugins WP Rocket und speziell für die Server von WPspace optimiert. In dieser Kombi erzielst du die schnellsten Ladezeiten und verbesserst die Interaction to Next Paint Deiner WordPress Website.
