Die Pagespeed-Struktur von Google, an die wir seit Jahren gewöhnt sind, ist darauf ausgerichtet, sicherzustellen, dass Websites schnell geladen und bereitgestellt werden. Indem Google messbare Parameter erstellt und die anonymen Daten nutzt, die über den Marktanteil von Chrome gesammelt wurden, verwendet es diese Metriken als SEO-Indikatoren. Mit der Einführung von Interaction to Next Paint (INP) im Jahr 2022 hat sich der Fokus von der bloßen Seitenladegeschwindigkeit auf eine breitere Perspektive der Webleistung verlagert. INP misst nicht nur, wie schnell eine Seite geladen wird, sondern auch, wie schnell Benutzerinteraktionen auf der Seite verarbeitet werden. Im Wesentlichen wird das Navigationserlebnis auf der Website in eine Pagespeed-Metrik umgewandelt.
Auf Kerems Blogwird der Begriff „General Interaction Delay“ als passend für dieses Konzept vorgeschlagen, den Google auch in einem eigenen Video gut erklärt. Um diese Metrik jedoch vollständig zu verstehen, werden wir in den folgenden Abschnitten tiefer in das Thema eintauchen.
Was ist die Erklärung zur INP-Dauer?
Die Dauer des INP umfasst:
- Die Zeit zwischen der Interaktion des Benutzers mit der Seite und der Ausführung des Ereignishandlers.
- Die Ausführungszeit des Skripts.
- Die Zeit von der Ausführung des Codes bis zur Anzeige der Ausgabe für den Benutzer.
Diese Prozesse erfolgen normalerweise innerhalb von Millisekunden, aber auf mobilen Geräten, insbesondere älteren Android-Telefonen mit geringer CPU-Leistung, können solche Verzögerungen (Latenz) oft spürbar sein. Es ist erwähnenswert, dass INP-Daten wie andere Lighthouse-Daten anonym gesammelt und basierend auf dem 75. PerzentilDas Ziel besteht daher darin, Anwendungen zu erstellen, die auf durchschnittlichen Geräten und nicht nur auf High-End-Geräten gut funktionieren.
Beispiele aus der Praxis zur INP-Dauer
Zur Erläuterung dieses Konzepts sind hier einige Beispiele aus dem echten Leben von den Internetseiten aufgeführt, die wir täglich besuchen:
Eingeben einer Adresse auf einer E-Commerce-Site
Wenn Sie auf einer E-Commerce-Site einkaufen und die Lieferadresse eingeben, wählen Sie zuerst die Provinz aus. Wenn Sie dann auf das Auswahlfeld klicken, um den Bezirk auszuwählen, warten Sie eine Weile, bis das Ajax-Ergebnis geladen ist, und nach einer bestimmten Zeit werden die Bezirksinformationen geladen. Dies ist ein gutes Beispiel für INP. Zur Verbesserung der Benutzererfahrung in diesem Beispiel könnte ein „Ladeindikator“ hinzugefügt werden, der den Benutzer über den Ajax-Prozess informiert.
Sortierauswahl
Wenn Sie Filter auf Produktlistenseiten verwenden und die gefilterten Produkte nach dem Anklicken eines Kontrollkästchens nicht richtig verwaltet werden, erhöht sich der INP. Die Verwendung von weniger komplexem JS und die Berücksichtigung der Benutzererfahrung während der Filtervorgänge können dazu beitragen, den INP-Wert so hoch wie möglich zu halten.
Produktfotogalerien
Die Zeit, die Benutzer warten, bis die Fotogalerie geladen ist, nachdem sie auf Produktdetailseiten auf ein Produktfoto geklickt haben, kann sich möglicherweise auf INP auswirken.
Reservierungstaste
Die Interaktionsverzögerung zwischen dem Klicken auf die Schaltfläche „Reservierung vornehmen“ und der nächsten Seite ist ein Beispiel für INP.
In den Warenkorb Button
Die Millisekunden Verzögerung beim Klicken auf die Schaltfläche „Zum Einkaufswagen hinzufügen“ und die Frage, ob der Artikel zum Einkaufswagen hinzugefügt wurde oder nicht, definieren INP perfekt.
Wie in diesen Beispielen zu sehen ist, sind INP-Fallen in Szenarien vorhanden, die sowohl die SEO als auch die direkten Konversionsraten beeinflussen.
Wie kann man INP verbessern?
- Verwenden Sie aktuelle JS-Frontend-Bibliotheken: Eine Leistungsverbesserung durch die Verwendung moderner JS-Frontend-Bibliotheken wie Vue, React und Angular ist vorteilhaft, da sie Vorteile hinsichtlich Leistung und Wiederverwendbarkeit bieten.
- Minimieren Sie die Komplexität von JS-Bibliotheken: Es empfiehlt sich, weniger komplexe JS-Bibliotheken zu verwenden. Ich persönlich empfehle, jQuery so weit wie möglich zu vermeiden.
Akzeptable INP-Metrik-Level
Die Schwellenwerte für gute, mittlere und schlechte INP-Werte liegen bei 200 Millisekunden und 500 Millisekunden. Um eine gute Benutzererfahrung und eine gute Gesamtleistung des Webs aufrechtzuerhalten, ist es wichtig, den INP unter diesen Schwellenwerten zu halten.
