Was ist der INP-Score von Google und wie verbessert man ihn in WordPress

Wenn Google einen neuen Rankingfaktor wie INP (Interaction to Next Paint) einführt, kann man sich leicht überfordert fühlen. Sie fragen sich wahrscheinlich, was dieser technische Begriff für Ihre WordPress-Site bedeutet und was Sie jetzt tun müssen.

Wir verstehen das vollkommen. Mit über einem Jahrzehnt Erfahrung in der Optimierung von WordPress-Sites begann unser Team sofort mit Tests, um die effektivsten Wege zur Verbesserung dieses neuen Scores zu finden.

Nach der Recherche des Themas haben wir den gesamten komplexen Fachjargon in einfache, umsetzbare Schritte übersetzt. Wir freuen uns, die bewährten Methoden teilen zu können, die wir jetzt in unserem eigenen Portfolio von Websites anwenden.

In diesem Leitfaden erfahren Sie genau, was INP ist und wie Sie Ihre Scores verbessern können, auch wenn Sie kein Entwickler sind.

Hier ist ein kurzer Überblick über die Themen, die wir in diesem Leitfaden behandeln werden:

1. Was sind Google Core Web Vitals?
2. Was ist Google INP?
3. Warum hat Google die FID-Metrik auf INP umgestellt?
4. So messen Sie den Google INP-Score in WordPress
5. So verbessern Sie den Google INP-Score in WordPress
6. Wie Website-Besitzer ihre Websites für INP optimieren können
7. Wie Entwickler ihren Code für INP optimieren können
8. Beispiele für gute JavaScript-Codierungspraktiken für Entwickler
9. Häufig gestellte Fragen zu Google INP
10. Experten-Anleitungen zur Verbesserung der WordPress-Performance

Was sind Google Core Web Vitals?

Google Core Web Vitals sind Website-Leistungskennzahlen, die Google für die allgemeine Benutzererfahrung als wichtig erachtet. Diese Web-Vitals-Werte sind Teil der gesamten Seitenerlebnisbewertung von Google, die sich auf Ihre SEO-Rankings auswirkt.

Diese Metriken sind nützlich, denn auch wenn Ihre WordPress-Website schnell geladen wird, ist sie für Benutzer möglicherweise nicht voll funktionsfähig. Selbst wenn eine Seite geladen wurde, kann ein Besucher möglicherweise nicht das tun, was er möchte, oder auf die Informationen zugreifen, die er benötigt.

Core Web Vitals sollen dabei helfen. Sie ermöglichen es Ihnen zu messen, wie schnell Ihre Website lädt, sichtbar wird und für Ihre Besucher nutzbar ist.

In der Vergangenheit verwendete Google drei Qualitätstests:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Weitere Informationen zu diesen Tests finden Sie in unserem ultimativen Leitfaden zum Thema Optimieren von Core Web Vitals für WordPress.

Google hat FID jedoch im März 2024 durch einen neuen Test namens INP (Interaction to Next Paint) ersetzt. Die beiden anderen Tests werden weiterhin verwendet.

Schauen wir uns an, was INP ist und warum Google darauf umgestellt hat.

Was ist Google INP?

INP steht für „Interaction to Next Paint“. Es ist eine neue Google Core Web Vital-Metrik, die Benutzerinteraktionen misst, die zu Verzögerungen auf Ihrer Website führen.

Der INP-Test misst, wie lange es dauert, bis Ihre Inhalte visuell aktualisiert werden, nachdem ein Nutzer mit Ihrer Website interagiert hat, z. B. indem er auf etwas klickt. Diese visuelle Aktualisierung wird als „nächster Anstrich“ bezeichnet.

Zum Beispiel könnte ein Benutzer ein Kontaktformular auf Ihrer Website ausfüllen, auf eine Schaltfläche klicken oder ein Bild auswählen, das in einer Lightbox geöffnet wird. Der INP-Test misst die Zeit, die zwischen der Ausführung dieser Interaktionen durch den Benutzer und dem tatsächlichen Erscheinen der aktualisierten Inhalte auf Ihrer Website vergeht.

Der Google-Test ermittelt dann einen einzigen INP-Score, der auf der Dauer der meisten Benutzerinteraktionen auf Ihrer Website basiert. Der Score ist entweder „Gut“, „Verbesserungswürdig“ oder „Schlecht“, je nachdem, wie lange Ihre Website zur visuellen Aktualisierung benötigt.

Warum hat Google die FID-Metrik auf INP umgestellt?

Der ältere FID-Test maß, wie schnell Ihre Website auf die erste Benutzereingabe nach dem Laden der Seite reagiert, z. B. einen Mausklick oder eine Tastatureingabe. Dies geschieht durch Messung der Zeit zwischen der ersten Eingabe des Benutzers und dem Zeitpunkt, an dem Ihre Website beginnt, auf diese Eingabe zu reagieren.

Mit anderen Worten, es wurde gemessen, wie reaktionsschnell Ihre Website beim ersten Laden war und welchen ersten Eindruck sie bei echten Nutzern hinterließ.

Allerdings war diese Metrik nicht so hilfreich, wie sie hätte sein können. Der FID-Test hatte zwei Einschränkungen:

1. Er maß nur die erste Benutzerinteraktion, nicht alle.
2. Es wurde nur gemessen, bis die Website mit der Verarbeitung der Interaktion beginnt, nicht, wann der Benutzer das visuelle Feedback tatsächlich auf dem Bildschirm sehen konnte.

Google hat den Test also geändert, um ein vollständigeres Bild von der Gesamt-Reaktionsfähigkeit einer Webseite zu geben. INP misst die gesamte Zeit, die der Benutzer dort verbringt, bis er die Seite verlässt.

So messen Sie den Google INP-Score in WordPress

Der einfachste Weg, Ihre Google Core Web Vitals-Bewertung zu testen, ist die Verwendung des PageSpeed Insights -Tools. Geben Sie einfach die zu testende URL ein und klicken Sie auf die Schaltfläche „Analysieren“.

Das Tool analysiert die Webseite einige Sekunden lang und zeigt Ihnen dann die Testergebnisse an.

Jetzt sehen Sie neben anderen Google Core Web Vitals auch den Interaction to Next Paint (INP)-Score der Seite.

Es wird unterschiedliche Werte für Mobil- und Desktop-Nutzer geben.

Im obigen Screenshot sehen Sie den INP-Wert für Desktop-Benutzer, die diese Webseite auf WPBeginner aufrufen, von 47 ms. Der grüne Punkt bedeutet, dass dies ein guter Wert ist.

Sobald Sie die Bewertung für Ihre eigene Website sehen können, werden Sie sich wahrscheinlich fragen, wie sie im Vergleich zu anderen Websites abschneidet und ob sie verbessert werden muss.

Google hat einige Richtlinien zur Interpretation Ihres INP-Scores bereitgestellt:

• Schneller als 200 Millisekunden – gute Reaktionsfähigkeit
• 200-500 Millisekunden – muss verbessert werden
• Langsamer als 500 Millisekunden – schlechte Reaktionsfähigkeit

Stellen Sie sicher, dass Sie Ihre Bewertung sowohl für mobile als auch für Desktop-Benutzer überprüfen und eine gute Reaktionsfähigkeit anstreben.

Sie können dann Ihre INP-Bewertung verbessern, indem Sie die Richtlinien in den folgenden Abschnitten befolgen.

Fallstudie: Langsame Interaktionen auf den Websites von Awesome Motive finden

Aber zuerst kann es hilfreich sein, sich eine Fallstudie anzusehen. Wir haben begonnen, die INP-Scores auf unseren Marken-Websites zu messen, darunter All in One SEO, MonsterInsights und WPForms.

Als unser Team die INP-Werte unserer Website überprüfte, zeigten die ersten Ergebnisse, dass unsere beliebtesten Seiten verbessert werden mussten.

Mithilfe des Chrome User Experience (CrUX) Dashboard konnten wir sehen, dass:

• 80% unserer Sitzungen wurden als „gut“ bewertet
• 12 % unserer Sitzungen wurden als „verbesserungswürdig“ eingestuft
• 8 % unserer Sitzungen wurden als „schlecht“ eingestuft

Ein PageSpeed Insights-Bericht gibt uns einen Gesamt-INP-Score, aber er sagt uns nicht, welche spezifischen Schaltflächen oder Formularfelder die Verzögerung für echte Benutzer verursachen. Um das herauszufinden, müssen wir mit anderen Tools, die Daten von tatsächlichen Besuchersitzungen analysieren, etwas tiefer graben.

Das bedeutet, dass wir als Nächstes unsere eigenen Tests durchführen müssen, um langsame Interaktionen auf Seiten mit niedrigeren INP-Werten zu finden. Dies ist eine detaillierte und fortgeschrittene Aufgabe, die am besten von einem Entwickler durchgeführt wird.

Dies geschieht, indem Sie jede Seite, die verbessert werden muss, aufrufen und dann jede Interaktion mit tatsächlichen Klicks, Taps und Tastendrücken testen. Diese müssen mit Tools gemessen und bewertet werden.

Das Chrome Developers Blog listet eine Reihe von Tools auf, die zum Testen verwendet werden können, wie z. B. die Chrome Web Vitals-Erweiterung und der neue Zeitfenstermodus im Lighthouse-Panel in DevTools. Sie können auch den Artikel von Google zum Thema Debuggen mit der Web Vitals-Erweiterung lesen.

Es ist wichtig zu beachten, dass die Sitzungen mit niedrigeren Bewertungen höchstwahrscheinlich auf langsameren Geräten oder Verbindungen stattfanden. Das bedeutet, dass es beim Testen empfohlen wird, die Geschwindigkeit Ihres Browsers zu drosseln, da Sie sonst möglicherweise die langsamen Interaktionen nicht erkennen.

Sie können dies mit der Chrome-Funktion Inspect Element tun, indem Sie zu Anzeigen » Entwickler » Elemente untersuchen gehen. Sie können zum Tab „Netzwerk“ wechseln und eine Drosselungsoption aus dem Dropdown-Menü auswählen.

Es ist wichtig, auf einer langsameren Verbindung zu testen, da viele Ihrer Benutzer möglicherweise mobile Geräte nutzen oder über kein perfektes Internet verfügen. Ein Problem, das auf Ihrem schnellen Bürocomputer unsichtbar ist, kann für sie eine große Frustration darstellen.

Sobald Sie die INP-Werte für Ihre Seiten gefunden haben, können Sie die Tipps im nächsten Abschnitt dieses Tutorials verwenden, um sie zu verbessern.

So verbessern Sie den Google INP-Score in WordPress

Die meiste Arbeit zur Optimierung des INP-Scores muss von Entwicklern geleistet werden. Dazu gehören die Autoren des Themes und der Plugins, die Sie auf Ihrer Website verwenden, sowie die Entwickler von benutzerdefinierten JavaScript, das Sie ausführen.

Das liegt daran, dass der INP-Wert hauptsächlich mit der Zeit zusammenhängt, die für die Durchführung von JavaScript-Interaktionen auf Ihrer Website benötigt wird.

Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt, wird ein JavaScript-Code ausgeführt, um die durch das Klicken auf die Schaltfläche erwartete Funktion auszuführen. Dieser Code wird auf den Computer des Benutzers heruntergeladen und in seinem Webbrowser ausgeführt.

Um Ihren INP-Wert zu optimieren, müssen die Verzögerungen bei JavaScript-Benutzerinteraktionen reduziert werden. Diese Verzögerung besteht aus drei Komponenten:

1. Eingabeverzögerung, die auftritt, wenn Ihre Website auf Hintergrundaufgaben auf dieser Seite wartet, die verhindern, dass der Ereignishandler ausgeführt wird.
2. Verarbeitungszeit, d. h. die Zeit, die benötigt wird, um Ereignishandler in JavaScript auszuführen.
3. Präsentationsverzögerung, d. h. die Zeit, die benötigt wird, um die Seite neu zu berechnen und den Seiteninhalt auf dem Bildschirm darzustellen.

Als Website-Besitzer können Sie Schritte unternehmen, um die erste und dritte Verzögerung zu verbessern. Wir zeigen Ihnen, wie das im nächsten Abschnitt geht.

Um jedoch wirkliche Verbesserungen an Ihrem INP-Score zu erzielen, müssen Sie die zweite Verzögerung verbessern, d. h. die Verarbeitungszeit des Codes selbst. Das ist nichts, was Sie selbst tun können.

Die Entwickler Ihres WordPress-Themes, Plugins und benutzerdefinierten JavaScripts müssen möglicherweise ihren Code optimieren, um Ihren Nutzern sofort Feedback zu geben. Die gute Nachricht ist, dass sie wahrscheinlich bereits daran arbeiten, die Frist im März 2024 einzuhalten.

Wir bieten später in diesem Artikel einige spezifische Tipps für Entwickler mit Beispielen.

Wie Website-Besitzer ihre Websites für INP optimieren können

Während die Optimierung ihres Codes durch Entwickler den größten Einfluss auf den INP-Wert Ihrer Website hat, gibt es ein paar Dinge, die Website-Besitzer tun können.

Insbesondere können Sie sicherstellen, dass die Mausklicks und Tastatureingaben Ihrer Nutzer so schnell wie möglich erkannt werden, indem Sie Hintergrundprozesse auf Ihrer Website optimieren. Außerdem können Sie sicherstellen, dass die Reaktion auf ihre Eingaben so schnell wie möglich auf dem Bildschirm angezeigt wird.

Während diese Schritte den Code, der eine langsame Interaktion verursacht, möglicherweise nicht direkt umschreiben, verbessern sie die allgemeine Gesundheit Ihrer Website. Eine schnellere, schlankere Website gibt dem Browser mehr Ressourcen, um Benutzerinteraktionen schnell zu verarbeiten, was definitiv zu Ihrer INP-Bewertung beitragen kann.

Hier sind einige Schritte, die Sie unternehmen können, um dies zu erreichen.

1. Stellen Sie sicher, dass Sie die neueste Version von WordPress ausführen

Das Erste, was Sie tun sollten, ist sicherzustellen, dass Sie die neueste Version von WordPress verwenden.

Das liegt daran, dass die WordPress-Versionen 6.2 und 6.3 erhebliche Leistungsverbesserungen eingeführt haben. Diese verbessern die Leistung Ihrer Website auf der Serverseite und auf der Clientseite, was Ihren INP-Score verbessert.

Detaillierte Anweisungen finden Sie in unserer Anleitung zum Thema sicheres Aktualisieren von WordPress.

2. Hintergrundprozesse in WordPress optimieren

Hintergrundprozesse sind geplante Aufgaben in WordPress, die im Hintergrund ausgeführt werden. Dazu gehören möglicherweise die Überprüfung auf WordPress-Updates, die Veröffentlichung geplanter Beiträge und die Sicherung Ihrer Website.

Wenn Ihre Website mit diesen Hintergrundaufgaben zu stark ausgelastet ist, erkennt sie möglicherweise nicht sofort, dass der Benutzer die Maus geklickt oder eine Taste gedrückt hat, was zu einem schlechten INP-Score führt.

Sie können möglicherweise Ihre Hintergrundskripte und Plugins so konfigurieren, dass sie weniger Arbeit verrichten und Ihre Website weniger belasten. Andernfalls können Sie sie möglicherweise nur dann ausführen, wenn sie benötigt werden, anstatt sie im Hintergrund laufen zu lassen.

Detaillierte Anweisungen finden Sie im Abschnitt Hintergrundprozesse optimieren in unserem ultimativen Leitfaden zur Steigerung der WordPress-Geschwindigkeit und -Leistung.

3. Überprüfen Sie die Leistungsempfehlungen von PageSpeed Insights

Nachdem Sie den PageSpeed Insights Test auf Ihrer Website ausgeführt haben, können Sie im Abschnitt Leistung der Testergebnisse nach unten scrollen.

Hier finden Sie einige Möglichkeiten zur Verbesserung der Leistung Ihrer Website sowie die geschätzten Zeitersparnisse, wenn Sie die Ratschläge befolgen.

Zum Beispiel sehen Sie möglicherweise Empfehlungen, renderblockierende Ressourcen zu eliminieren. Sie können dies tun, indem Sie unserer Anleitung folgen: So beheben Sie renderblockierendes JavaScript und CSS in WordPress.

Sie sehen möglicherweise auch eine Empfehlung, ungenutztes JavaScript zu reduzieren. Eine Einstellung hierfür finden Sie in vielen der besten WordPress-Caching-Plugins, wie z. B. WP Rocket.

4. Minifizieren Sie JavaScript in WordPress

JavaScript muss auf den Computer des Benutzers heruntergeladen werden, bevor es ausgeführt werden kann. Indem Sie Ihre JavaScript-Dateien so klein wie möglich machen, können Sie kleine Leistungssteigerungen erzielen.

Durch die Minifizierung Ihres JavaScripts werden die Dateien kleiner, indem Leerzeichen, Zeilenumbrüche und unnötige Zeichen aus dem Quellcode entfernt werden.

Dies wird keine dramatischen Auswirkungen auf Ihre Leistung haben, aber wenn Sie versuchen, ein paar zusätzliche Millisekunden von Ihrem INP-Score abzuschneiden, könnte es sich für Sie lohnen.

Um zu erfahren, wie das geht, können Sie unseren Leitfaden lesen: So minimieren Sie CSS- und JavaScript-Dateien in WordPress.

Wie Entwickler ihren Code für INP optimieren können

Wenn Sie Entwickler sind, werden die größten INP-Score-Verbesserungen durch die Optimierung Ihres Codes erzielt. Hier sind einige Dinge, die Sie tun können.

1. Bestätigen Sie Benutzereingaben sofort visuell

Hier ist die eine Sache, die den größten Unterschied bei der Optimierung des INP-Scores Ihres Codes macht: Sie müssen sofort visuelles Feedback für alle Benutzereingaben geben.

Der Benutzer sollte sofort sehen, dass seine Eingabe erkannt wurde und dass Sie darauf reagieren. Dies lässt Ihren Code für den Benutzer reaktionsfähiger erscheinen und führt zu einer großartigen INP-Bewertung.

Hier sind einige Beispiele:

• Wenn ein Benutzer auf ein Element klickt, sollten Sie etwas anzeigen, das zeigt, dass das Element angeklickt wurde.
• Wenn ein Benutzer ein Formular absendet, müssen Sie sofort etwas anzeigen, um dies zu bestätigen, z. B. eine Nachricht oder einen Spinner.
• Wenn ein Benutzer auf ein Bild klickt, um es in einem Lightbox-Fenster zu öffnen, warten Sie nicht einfach, bis das Bild geladen ist. Zeigen Sie stattdessen sofort ein Demo-Bild oder einen Spinner an. Wenn das Bild dann geladen ist, können Sie es im Lightbox-Fenster anzeigen.

Mehr als alles andere wird dies Ihre INP-Bewertung verbessern, insbesondere wenn Sie als Reaktion auf Benutzereingaben eine intensive JavaScript-Verarbeitung durchführen müssen.

Stellen Sie einfach sicher, dass Sie die Benutzeroberfläche aktualisieren, bevor Sie mit der Aufgabe beginnen.

Danach können Sie die rechenintensive Arbeit mit einem setTimeout-Callback etwas später ausführen lassen. Dies gibt dem Browser einen Moment Zeit, den Bildschirm zu aktualisieren, bevor er mit der intensiven Aufgabe beginnt.

Sobald Sie das richtig gemacht haben, gibt es noch ein paar weitere Dinge, die Sie tun können, um Ihren Code zu optimieren.

2. Optimieren Sie dort, wo der Browser die meiste Zeit verbringt

Als Nächstes sollten Sie untersuchen, wo der Browser die meiste Zeit verbringt, und diese Teile dann optimieren.

In Google Chrome können Sie unter Anzeigen » Entwickler » Entwicklertools » Leistung die JavaScript-Funktionen und Ereignishandler untersuchen, die den nächsten Paint blockieren.

Mit diesem Wissen können Sie sehen, was optimiert werden kann, um die Zeit bis zum nächsten Paint nach Benutzerinteraktion zu verkürzen.

3. Reduzieren Sie Ihre Layouts

Manchmal besteht viel CPU-Aktivität aus Layoutarbeiten.

Wenn dies geschieht, sollten Sie prüfen, ob Ihr Code dazu führt, dass der Browser wiederholt das Seitenlayout neu berechnet. Dies wird oft als „Layout Thrashing“ bezeichnet, und wir geben in dieser Anleitung später ein Beispiel, wie Sie es vermeiden können.

4. Zeigen Sie zuerst Inhalte oberhalb des sichtbaren Bereichs an

Wenn das Rendern des Seiteninhalts langsam ist, kann sich dies auf Ihre INP-Bewertung auswirken.

Sie können erwägen, zunächst nur wichtige Inhalte „above the fold“ anzuzeigen, um den nächsten Frame schneller zu liefern.

Beispiele für gute JavaScript-Codierungspraktiken für Entwickler

Es kann hilfreich sein, Ihnen einige Beispiele zu zeigen, wie schlechter Code zu einer schlechten INP-Bewertung führen kann.

Wir haben ein Beispielprojekt auf CodePen zusammengestellt, mit dem Sie experimentieren können. Sie können unseren Beispielcode untersuchen, unsere kurzen Erklärungen lesen und durch Klicken auf die Schaltflächen sehen, welchen Unterschied es macht.

Hier ist eine Animation aus diesem CodePen-Projekt. Sie können sehen, dass der nicht optimierte Beispielcode zu einem schlechten INP-Wert von 965 Millisekunden führt. Der Tastendruck wird sich für die Nutzer träge anfühlen.

Im Gegensatz dazu aktualisiert der optimierte Code den Button-Text sofort, was zu einem bestmöglichen INP-Wert führt.

Lesen Sie weiter, um vier Beispiele zu sehen, wie Sie Ihren Code verbessern können, um den INP-Wert zu optimieren.

Beispiel 1: Aktualisieren Sie den Bildschirm, bevor Sie eine CPU-intensive Aufgabe ausführen

CPU-intensive Aufgaben dauern ihre Zeit, und dies kann zu schlechten INP-Ergebnissen führen, es sei denn, Sie schreiben guten Code. In diesem Fall ist es am besten, den Bildschirm zu aktualisieren, bevor Sie diese Aufgabe ausführen.

Hier ist ein schlechtes Beispiel, bei dem die Benutzeroberfläche nach einer rechenintensiven Aufgabe aktualisiert wird. Dies führt zu einem hohen INP:

// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});

In diesem verbesserten Beispiel wird die Benutzeroberfläche sofort aktualisiert, wenn die Schaltfläche geklickt wird.

Danach wird die rechenintensive Aufgabe in einen setTimeout-Callback verschoben:

// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';

  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});

Dies ermöglicht es dem Browser, den Bildschirm zu aktualisieren, bevor die langsame Aufgabe beginnt, was zu einem guten INP-Wert führt.

Beispiel 2: Planen Sie nicht dringende Verarbeitungen

Sie sollten auch sicherstellen, dass Sie keine nicht dringenden oder nicht wesentlichen Arbeiten sofort in einem Skript ausführen, wenn dies die erwartete Antwort des Benutzers verzögern könnte.

Sie sollten damit beginnen, die Seite sofort zu aktualisieren, um die Eingabe des Benutzers zu bestätigen. Danach können Sie requestIdleCallback verwenden, um den Rest des Skripts zu planen, wenn am Ende eines Frames Zeit frei ist oder wenn der Benutzer inaktiv ist.

Hier ist ein Beispiel:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});

Dies lässt die Webseite für den Benutzer reaktionsschneller wirken und führt zu einem besseren INP-Score.

Beispiel 3: Planen Sie eine Funktion, die vor dem nächsten Paint ausgeführt wird

Sie können auchrequestAnimationFrame verwenden, um eine Funktion zu planen, die vor dem nächsten Neuzeichnen ausgeführt wird:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});

Dies kann für Animationen oder visuelle Aktualisierungen als Reaktion auf Benutzerinteraktionen nützlich sein.

Auch hier sollten Sie dem Nutzer sofort Feedback geben, indem Sie seine Eingabe bestätigen.

Beispiel 4: Layout-Thrashing vermeiden

Layout-Thrashing tritt auf, wenn Sie wiederholt im DOM (Document Object Model) lesen und schreiben, was dazu führt, dass der Browser das Layout mehrmals neu berechnet.

Hier ist ein Beispiel für Layout-Thrashing:

// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});

Dies kann durch Stapelverarbeitung Ihrer Lese- und Schreibvorgänge vermieden werden.

Dies ist ein besseres Beispiel:

// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});

Häufig gestellte Fragen zu Google INP

Wir verstehen, dass ein technisches Thema wie INP viele Fragen aufwerfen kann. Um Ihnen zu helfen, haben wir einige der häufigsten Fragen beantwortet, die wir von unseren Lesern erhalten.

Was ist Googles Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) ist eine Google Core Web Vital-Metrik, die die allgemeine Reaktionsfähigkeit einer Website auf Benutzerinteraktionen misst. Sie berechnet die Zeit von dem Zeitpunkt, an dem ein Benutzer auf einer Seite klickt, tippt oder tippt, bis zur nächsten visuellen Aktualisierung auf dem Bildschirm.

Dies gibt einen breiteren Überblick über die Nutzererfahrung als die bisherige FID-Metrik.

Warum hat Google die First Input Delay (FID) durch INP ersetzt?

Google hat FID durch INP ersetzt, da es eine umfassendere Messung der Reaktionsfähigkeit einer Seite bietet. FID maß nur die Verzögerung der ersten Interaktion.

Im Gegensatz dazu bewertet INP die Latenz aller Benutzerinteraktionen während eines Besuchs und bietet ein vollständigeres Bild der Benutzererfahrung.

Was ist ein guter INP-Wert?

Laut den Richtlinien von Google ist ein guter INP-Wert 200 Millisekunden oder weniger. Ein Wert zwischen 200 und 500 Millisekunden „muss verbessert werden“, und alles über 500 Millisekunden gilt als „schlechte Reaktionsfähigkeit“.

Wie kann ich meinen INP-Wert in WordPress verbessern?

Die Verbesserung Ihres INP-Scores in WordPress umfasst mehrere Schritte. Website-Besitzer können Hintergrundprozesse optimieren, JavaScript minimieren und sicherstellen, dass ihre Website auf dem neuesten Stand ist.

Entwickler können einen erheblichen Einfluss nehmen, indem sie den Code optimieren, um sofortiges visuelles Feedback für Benutzeraktionen zu geben, z. B. durch Anzeigen eines Lade-Spinners, und indem sie rechenintensive Aufgaben aufschieben.

Experten-Anleitungen zur Verbesserung der WordPress-Performance

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie Ihre Google INP-Bewertung in WordPress verbessern können. Möglicherweise möchten Sie auch einige andere Artikel zur Verbesserung der WordPress-Leistung lesen:

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.