Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Was ist der INP-Score von Google und wie kann man ihn in WordPress verbessern?

Websites, die sich träge anfühlen und nicht reagieren, können Besucher frustrieren, sodass sie auf eine andere Website klicken. Um dies zu verhindern, hat Google Core Web Vitals eingeführt, die die reale Erfahrung der Benutzer messen. Eine dieser wichtigen Metriken ist INP oder Interaction to Next Paint.

Ein guter INP-Wert bedeutet, dass Ihre WordPress Website schnell auf Benutzerinteraktionen wie Klicks, Antippen und Tastendrucke reagiert und somit ein reibungsloses und zufriedenstellendes Erlebnis erstellt. Bei WPBeginner optimieren wir sorgfältig für diese Metrik, um die Benutzererfahrung zu verbessern.

In diesem Artikel wird der INP-Score von Google erklärt und eine praktische Schritt-für-Schritt-Anleitung zur Verbesserung des INP-Scores auf Ihrer WordPress-Website gegeben. Machen Sie sich bereit, die Benutzererfahrung zu verbessern und Ihre Rankings zu verbessern.

What is Google INP score and how to improve it in WordPress

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

Was sind Google Core Web Vitals?

Google Core Web Vitals sind Leistungskennzahlen für Websites, die Google als wichtig für die allgemeine Nutzererfahrung erachtet. Diese Web-Vital-Bewertungen sind Teil der Google-Gesamtwertung für das Seitenerlebnis, die sich auf Ihre SEO-Rankings auswirkt.

Diese Metriken sind nützlich, denn selbst wenn Ihre WordPress-Website schnell lädt, ist sie für die Nutzer 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 nicht auf die benötigten Informationen zugreifen.

Die Core Web Vitals sollen dabei helfen. Mit ihnen können Sie messen, wie schnell Ihre Website lädt, sichtbar wird und für Ihre Besucher einsatzbereit ist.

In der Vergangenheit verwendete Google drei Qualitätstests:

  • Größte inhaltsreiche Farbe (LCP)
  • Erste Eingabeverzögerung (FID)
  • Kumulative Layout-Verschiebung (CLS)

Mehr über diese Tests erfahren Sie in unserem ultimativen Leitfaden zur Optimierung von Core Web Vitals für WordPress.

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

Werfen wir einen Blick darauf, was INP ist und warum Google darauf umgestiegen ist.

Was ist Google INP?

INP steht für „Interaktion bis zum nächsten Bild“. Es handelt sich um eine neue Metrik von Google Core Web Vital, die die Nutzerinteraktionen misst, die zu Verzögerungen auf Ihrer Website führen.

Der INP-Test misst, wie lange es dauert, bis ein Nutzer mit Ihrer Website interagiert, z. B. auf etwas klickt, und Ihr Inhalt daraufhin visuell aktualisiert wird. Diese visuelle Aktualisierung wird als „nächster Anstrich“ bezeichnet.

So kann ein Nutzer beispielsweise ein Kontaktformular auf Ihrer Website ausfüllen, auf eine Schaltfläche klicken oder ein Bild auswählen, das sich in einem Leuchtkasten öffnet. Der INP-Test misst die Zeit, die zwischen der Durchführung dieser Interaktionen durch den Nutzer und der tatsächlichen Anzeige des aktualisierten Inhalts auf Ihrer Website vergeht.

Der Google-Test ergibt dann eine einzige INP-Bewertung, die auf der Dauer der meisten Nutzerinteraktionen auf Ihrer Website basiert. Die Bewertung lautet entweder „Gut“, „Verbesserungswürdig“ oder „Schlecht“, je nachdem, wie lange es dauert, bis Ihre Website visuell aktualisiert wird.

Warum hat Google die FID-Metrik in INP geändert?

Mit dem älteren FID-Test wurde gemessen, wie schnell Ihre Website auf die erste Benutzereingabe nach dem Laden der Seite reagiert, z. B. auf einen Mausklick oder eine Tastatureingabe. Dazu wird die Zeit zwischen der ersten Eingabe des Nutzers und dem Zeitpunkt gemessen, zu dem Ihre Website beginnt, auf diese Eingabe zu reagieren.

Mit anderen Worten: Es wurde gemessen, wie reaktionsschnell Ihre Website ist, wenn sie zum ersten Mal geladen wird, und wie der erste Eindruck ist, den sie auf echte Nutzer macht.

Allerdings war diese Kennzahl nicht so hilfreich, wie sie sein könnte. Der FID-Test wies zwei Einschränkungen auf:

  1. Es wurde nur die erste Benutzerinteraktion gemessen, nicht alle.
  2. Es wurde nur gemessen, bis die Website mit der Verarbeitung der Interaktion beginnt, nicht aber, wenn der Nutzer die visuelle Rückmeldung auf dem Bildschirm tatsächlich sehen konnte.

Daher hat Google den Test geändert, um ein umfassenderes Bild von der allgemeinen Reaktionsfähigkeit einer Webseite zu erhalten. INP misst die gesamte Zeit, die der Nutzer dort verbringt, bis er die Seite verlässt.

Wie man den Google INP Score in WordPress misst

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

Analyzing a Web Page for Page Speed Insights

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

Hinweis: Sie können Core Web Vitals auch mit DebugBear’s Free Website Speed Test oder Site Speed Chrome Extension ansehen, die von einigen Entwicklern bevorzugt werden.

Zusammen mit anderen Google Core Web Vitals sehen Sie nun auch den INP-Wert (Interaction to Next Paint) der Seite.

Es wird unterschiedliche Punktzahlen für mobile und Desktop-Nutzer geben.

Page Insights Results

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

Sobald Sie die Punktzahl 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 für die Interpretation Ihrer INP-Bewertung bereitgestellt:

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

Stellen Sie sicher, dass Sie Ihr Ergebnis sowohl für mobile als auch für Desktop-Nutzer prüfen und eine gute Reaktionsfähigkeit anstreben.

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

Fallstudie: Langsame Interaktionen auf den Websites von Awesome Motive finden

Aber zunächst kann es hilfreich sein, sich eine Fallstudie anzusehen. Wir haben begonnen, die INP-Scores auf unseren Markenseiten zu messen, einschließlich All in One SEO, MonsterInsights und WPForms.

Als unser Team die INP-Bewertungen unserer Website überprüfte, zeigten die ersten Ergebnisse, dass unsere beliebtesten Seiten verbesserungswürdig waren.

Mit Hilfe des Chrome User Experience (CrUX) Dashboards konnten wir das sehen:

  • 80 % unserer Sitzungen wurden mit „gut“ bewertet.
  • 12 % unserer Sitzungen wurden als „verbesserungsbedürftig“ eingestuft.
  • 8 % unserer Sitzungen wurden mit „mangelhaft“ bewertet.

Jetzt wissen wir noch nicht, welche spezifischen Interaktionen auf unseren Seiten langsam sind und optimiert werden müssen. Diese Informationen werden von Google beim Testen nicht bereitgestellt.

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.

Dazu wird jede Seite, die verbessert werden muss, aufgerufen und jede Interaktion mit tatsächlichen Klicks, Antippen und Tastendrücken getestet. Diese müssen zeitlich erfasst und mit Hilfe von Tools bewertet werden.

Der Chrome Developers Blog listet eine Reihe von Tools auf, die zum Testen verwendet werden können, z. B. die Chrome Web Vitals-Erweiterung und den neuen Zeitspannenmodus im Lighthouse Panel in DevTools. Sie können auch den Artikel von Google lesen, in dem beschrieben wird, wie man mit der Web Vitals-Erweiterung debuggt.

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

Sie können dies mit der Funktion “ Element inspizieren “ von Chrome tun, indem Sie zu Ansicht “ Entwickler “ Elemente inspizieren gehen. Sie können zur Registerkarte „Netzwerk“ wechseln und eine Drosselungsoption aus dem Dropdown-Menü auswählen.

Using Chrome Inspect Elements to Throttle Your Browser

Sobald Sie die INP-Werte für Ihre Seiten ermittelt haben, können Sie sie mit den Tipps im nächsten Abschnitt dieses Tutorials verbessern.

Wie man den Google INP-Score in WordPress verbessert

Die meisten Arbeiten zur Optimierung des INP-Scores müssen von Entwicklern durchgeführt werden. Dazu gehören die Autoren des Themes und der Plugins, die Sie auf Ihrer Website verwenden, sowie die Entwickler von benutzerdefiniertem JavaScript, das Sie einsetzen.

Das liegt daran, dass die INP-Punktzahl hauptsächlich mit der Zeit zusammenhängt, die für die Ausfü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 Anklicken der Schaltfläche erwartete Funktion auszuführen. Dieser Code wird auf den Computer des Benutzers heruntergeladen und in seinem Webbrowser ausgeführt.

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

  1. Eingabeverzögerung, die auftritt, wenn Ihre Website auf Hintergrundaufgaben auf dieser Seite wartet, die die Ausführung des Event-Handlers verhindern.
  2. Verarbeitungszeit, d. h. die Zeit, die für die Ausführung von Ereignis-Handlern in JavaScript benötigt wird.
  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 Inhaber einer Website können Sie Maßnahmen ergreifen, um die erste und dritte Verzögerung zu verbessern. Wir werden Ihnen im nächsten Abschnitt zeigen, wie.

Um Ihr INP-Ergebnis wirklich zu verbessern, müssen Sie jedoch die zweite Verzögerung, d. h. die Verarbeitungszeit des Codes selbst, verbessern. Das ist nichts, was Sie selbst tun können.

Die Entwickler Ihres WordPress-Themes, Ihrer Plugins und Ihres benutzerdefinierten JavaScript müssen ihren Code möglicherweise so optimieren, dass sie Ihren Benutzern sofort Feedback geben können. Die gute Nachricht ist, dass sie wahrscheinlich bereits daran arbeiten, um die Frist bis März 2024 einzuhalten.

Einige konkrete Tipps für Entwickler mit Beispielen finden Sie weiter unten in diesem Artikel.

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

Den größten Einfluss auf die INP-Bewertung Ihrer Website haben zwar die Entwickler, die ihren Code optimieren, aber es gibt auch einige Dinge, die Website-Besitzer tun können.

Insbesondere können Sie dafür sorgen, dass die Mausklicks und Tastendrücke Ihrer Nutzer so schnell wie möglich erkannt werden, indem Sie die Hintergrundprozesse auf Ihrer Website optimieren. Außerdem können Sie dafür sorgen, dass die Antwort auf ihre Eingaben so schnell wie möglich auf dem Bildschirm angezeigt wird.

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

1. Stellen Sie sicher, dass Sie die neueste Version von WordPress verwenden

Als Erstes sollten Sie sicherstellen, dass Sie die neueste Version von WordPress verwenden.

Das liegt daran, dass mit den WordPress-Versionen 6.2 und 6.3 erhebliche Leistungsverbesserungen eingeführt wurden. Diese verbessern die Leistung Ihrer Website sowohl auf der Server- als auch auf der Client-Seite, wodurch sich Ihr INP-Score verbessert.

Detaillierte Anweisungen finden Sie in unserem Leitfaden zur sicheren Aktualisierung von WordPress.

2. Optimieren Sie Hintergrundprozesse in WordPress

Hintergrundprozesse sind geplante Aufgaben in WordPress, die im Hintergrund ablaufen. Dazu gehören z. B. die Suche nach WordPress-Updates, die Veröffentlichung geplanter Beiträge und das Sichern Ihrer Website.

Wenn Ihre Website zu sehr mit diesen Hintergrundaufgaben beschäftigt ist, erkennt sie möglicherweise nicht sofort, dass der Benutzer auf die Maus geklickt oder eine Taste gedrückt hat, was zu einer schlechten INP-Bewertung führt.

Möglicherweise können Sie Ihre Hintergrundskripte und Plugins so konfigurieren, dass sie weniger Arbeit machen und Ihre Website weniger belasten. Andernfalls können Sie sie vielleicht 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 Geschwindigkeit und Leistung von WordPress.

3. Prüfen Sie die PageSpeed Insights-Leistungsempfehlungen

Nachdem Sie den PageSpeed Insights-Test für Ihre Website durchgeführt haben, können Sie zum Abschnitt „Leistung“ der Testergebnisse scrollen.

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

PageSpeed Insights Performance Opportunities and Diagnostics

Sie können zum Beispiel Empfehlungen zur Beseitigung von Rendering-blockierenden Ressourcen sehen. Sie können dies tun, indem Sie unseren Leitfaden zur Behebung von Render-Blocking-JavaScript und -CSS in WordPress befolgen.

Möglicherweise wird auch empfohlen, ungenutztes JavaScript zu reduzieren. Eine entsprechende Einstellung finden Sie in vielen der besten WordPress-Caching-Plugins, wie z. B. WP Rocket.

4. JavaScript in WordPress minimieren

JavaScript muss erst auf den Computer des Benutzers heruntergeladen werden, bevor es ausgeführt werden kann. Wenn Sie Ihre JavaScript-Dateien so klein wie möglich halten, können Sie die Leistung ein wenig steigern.

Durch die Verkleinerung Ihres JavaScript werden die Dateien verkleinert, indem Leerzeichen, Zeilen und unnötige Zeichen aus dem Quellcode entfernt werden.

Dies wird sich nicht dramatisch auf Ihre Leistung auswirken, aber wenn Sie ein paar zusätzliche Millisekunden von Ihrem INP-Ergebnis abzwacken wollen, könnte sich dies lohnen.

WP Rocket minify JavaScript files

Wie das geht, erfahren Sie in unserer Anleitung zum Minifizieren von CSS- und JavaScript-Dateien in WordPress.

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

Wenn Sie Entwickler sind, können Sie Ihre INP-Punktzahl vor allem durch die Optimierung Ihres Codes verbessern. Hier sind ein paar Dinge, die Sie tun können.

1. Benutzereingaben sofort visuell quittieren

Bei der Optimierung des INP-Scores Ihres Codes kommt es vor allem auf eine Sache an: Sie müssen alle Benutzereingaben sofort visuell kommentieren.

Der Benutzer sollte sofort sehen, dass seine Eingabe erkannt wurde und dass Sie darauf reagieren. Dadurch fühlt sich Ihr Code für den Benutzer reaktionsfähiger an und führt zu einer guten 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 ausfüllt, müssen Sie sofort etwas anzeigen, um dies zu bestätigen, z. B. eine Nachricht oder einen Spinner.
  • Wenn ein Nutzer auf ein Bild klickt, um es in einem Leuchtkasten zu öffnen, sollten Sie nicht einfach warten, bis das Bild geladen ist. Stattdessen sollten Sie sofort ein Demobild oder einen Spinner anzeigen. Wenn das Bild dann geladen ist, können Sie es im Leuchtkasten anzeigen.

Dies wird vor allem Ihr INP-Ergebnis verbessern, insbesondere wenn Sie als Reaktion auf Benutzereingaben umfangreiche JavaScript-Verarbeitungen durchführen müssen.

Stellen Sie nur sicher, dass Sie die Benutzeroberfläche aktualisieren, bevor Sie die Aufgabe starten. Danach können Sie die CPU-lastige Arbeit in einem setTimeout-Callback oder auf einem separaten Thread mit einem Webworker erledigen und die Ergebnisse schließlich dem Benutzer präsentieren.

Wenn Sie das geschafft haben, gibt es noch ein paar Dinge, die Sie tun können, um Ihren Code zu optimieren.

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

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

Wenn Sie in Google Chrome zu Ansicht “ Entwickler “ Entwicklertools “ Leistung navigieren, können Sie die JavaScript-Funktionen und Event-Handler prüfen, die den nächsten Malvorgang blockieren.

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

3. Reduzieren Sie Ihre Layouts

Manchmal besteht ein Großteil der CPU-Aktivität aus Layout-Arbeiten.

Wenn das passiert, sollten Sie prüfen, ob Sie die Anzahl der Relayout-Funktionen in Ihrem Code reduzieren können.

4. Zeigen Sie zuerst den Inhalt oberhalb des Falzes

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

Sie können in Erwägung ziehen, nur wichtige „above-the-fold“-Inhalte zuerst anzuzeigen, um das nächste Bild 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 den Unterschied sehen, den es macht, wenn Sie auf die Schaltflächen klicken.

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

Im Gegensatz dazu aktualisiert der optimierte Code den Text der Schaltfläche sofort, was zur bestmöglichen INP-Bewertung führt.

Animation of CodePen Example Project for Optimizing INP Score

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

Beispiel 1: Aktualisieren des Bildschirms vor der Ausführung einer schweren CPU-Aufgabe

CPU-lastige Aufgaben brauchen Zeit, und das kann zu schlechten INP-Ergebnissen führen, wenn Sie keinen guten Code schreiben. In diesem Fall ist es am besten, den Bildschirm zu aktualisieren, bevor Sie die Aufgabe ausführen.

Hier ist ein schlechtes Beispiel, bei dem die Benutzeroberfläche nach einer schweren CPU-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 angeklickt wird.

Danach wird die schwere CPU-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);
});

Dadurch kann der Browser den Bildschirm aktualisieren, bevor er die langsame Aufgabe startet, was zu einer guten INP-Bewertung führt.

Beispiel 2: Nicht dringende Verarbeitung einplanen

Sie sollten auch darauf achten, dass Sie nicht dringende oder unwichtige Arbeiten nicht sofort in einem Skript ausführen, wenn dies die vom Benutzer erwartete Antwort verzögern könnte.

Sie sollten damit beginnen, die Seite sofort zu aktualisieren, um die Eingaben des Benutzers zu bestätigen. Danach können Sie requestIdleCallback verwenden, um den Rest des Skripts zu planen, wenn am Ende eines Frames oder bei Inaktivität des Benutzers freie Zeit zur Verfügung steht.

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!';
  });
});

Dadurch wird die Webseite besser auf den Benutzer reagieren und Sie erhalten eine bessere INP-Bewertung.

Beispiel 3: Planen Sie eine Funktion, die vor dem nächsten Bild ausgeführt werden soll

Sie können aucherequestAnimationFrame verwenden, um eine Funktion zu planen, die vor dem nächsten Repaint 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 den Nutzern ein Feedback geben, indem Sie ihre Eingaben sofort anerkennen.

Beispiel 4: Vermeiden Sie Layout-Thrashing

Layout-Thrashing tritt auf, wenn Sie das DOM (Document Object Model) wiederholt lesen und beschreiben, was den Browser dazu veranlasst, das Layout mehrere Male neu zu berechnen.

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 vermieden werden, indem Sie Ihre Lese- und Schreibvorgänge stapelweise durchführen.

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
});

Expertenanleitungen zur Verbesserung der WordPress-Leistung

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu lernen, wie Sie Ihren Google INP-Score in WordPress verbessern können. Vielleicht interessieren Sie sich auch für einige andere Artikel zur Verbesserung der WordPress-Leistung:

  • Important Metrics to Measure on Your WordPress Site
  • How to Optimize Core Web Vitals for WordPress (Ultimate Guide)
  • How to Reduce Time to First Byte (TTFB) in WordPress – Expert Tips
  • How to Properly Run a Website Speed Test
  • How to Stress Test a WordPress Website
  • How to Use GTmetrix Plugin to Improve WordPress Site Performance
  • How to Optimize Images for Web Performance Without Losing Quality
  • The Ultimate Guide to Boost WordPress Speed & Performance
  • How to Speed up WooCommerce Performance
  • Fastest WordPress Hosting (Performance Tests)
  • Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

    Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

    Avatar

    Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

    Das ultimative WordPress Toolkit

    Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

    Reader Interactions

    6 KommentareEine Antwort hinterlassen

    1. Syed Balkhi

      Hey WPBeginner readers,
      Did you know you can win exciting prizes by commenting on WPBeginner?
      Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
      You can get more details about the contest from here.
      Start sharing your thoughts below to stand a chance to win!

    2. Jiří Vaněk

      I struggled a lot with website optimizations at the beginning. I tried to do everything as best as I could, but there was always something in red. And when I managed to get into the green numbers, something on the website usually broke. Logically, I adjusted the website behavior in a way that something didn’t work, paradoxically speeding up the loading time. It’s great that thanks to these guides, I can always get a bit closer to understanding Google metrics. Now I’m in the green numbers, and the website is working. But there’s always room for improvement and learning.

    3. Zack

      You missed the most crucial element of this article: how to measure INP the right way. Because the new Timespan in lighthouse shows inconsistent INP values. The first time it’ll show 900 INP and on the second test it’ll show you 200 green INP. As for the web vital extension that you mentioned, I agree that you should set it to Slow 3G for accurate simulation. The problem with this is: when you interact with the page while it’s loading on 3G slow, it does NOT record your INP values during that phase of loading in the web vitals extension (console logging enabled). It only records your INP inputs after the page is loaded rendering the Slow 3G throttling useless.

      • WPBeginner Support

        Thank you for that feedback, we’ll be sure to take a look at the loading and if we have any other recommendations.

        Admin

    4. ASHIKUR RAHMAN

      do we needs to add these code on our site? or is it just example?

      • WPBeginner Support

        The code is set there as an example. :)

        Admin

    Eine Antwort hinterlassen

    Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.