Core Web Vitals-INP-Problem auf Ihrer Website erkannt

Haben Sie auch diese Nachricht von Google erhalten. Was ist Core Web Vitals-INP-Problem? In diesem Blogbeitrag sehen wir und uns die Meldung und evtl. Lösungswege an.

Core Web Vitals-INP-Problem auf Ihrer Website erkannt

lautet die Überschrift folgender Nachricht:

Lieber Inhaber von ,

Google wechselt zu einem neuen Messwert, Interaction to Next Paint (INP), mit dem die Reaktionsfähigkeit von Websites gemessen wird und der ab März 2024 FID als Core Web Vital ersetzt.

Die Search Console hat auf Ihrer Website das folgende INP-Problem erkannt:

• Problem mit : länger als (Mobilgerät)

Wir empfehlen Websiteinhabern, gute Core Web Vitals-Werte anzustreben, um in der Google Suche erfolgreich zu sein und allgemein eine hohe Nutzerfreundlichkeit zu bieten. Diese und andere Aspekte der Nutzerfreundlichkeit von Seiten entsprechen den Anforderungen unserer Ranking-Systeme.

Was ist ein Core Web Vitals-INP-Problem

Core Web Vitals sind eine Reihe von Metriken, die Google verwendet, um die Nutzerfreundlichkeit und Qualität von Webseiten zu bewerten. Sie umfassen drei Aspekte: Ladezeit, Interaktivität und visuelle Stabilität. Die Core Web Vitals sind seit Juni 2021 ein Rankingfaktor für Google und können sich auf Ihre SEO-Leistung auswirken.

Um das Core Web Vitals-INP-Problem zu beheben, müssen Sie zunächst die Ursache dafür herausfinden. Sie können die Core Web Vitals Ihrer Website mit verschiedenen Tools messen, wie z.B.:

• PageSpeed Insights: Ein Online-Tool, das Ihnen einen Überblick über die Leistung Ihrer Website gibt und Ihnen Optimierungsvorschläge macht.
• Core Web Vitals Bericht in der Google Search Console: Ein Bericht, der Ihnen zeigt, wie Ihre Seiten in Bezug auf die Core Web Vitals abschneiden und welche Probleme behoben werden müssen.
• Core Web Vitals Chrome Extension: Eine Browser-Erweiterung, die Ihnen die Core Web Vitals-Werte für jede Seite anzeigt, die Sie besuchen.

Nachdem Sie die Core Web Vitals Ihrer Website gemessen haben, können Sie an der Verbesserung und Optimierung arbeiten. Es gibt viele Faktoren, die die Core Web Vitals beeinflussen können, wie z.B.:

• Die Größe und Qualität Ihrer Bilder, Videos und Schriftarten
• Die Anzahl und Art der externen Skripte, Stylesheets und Anzeigen, die Ihre Seite lädt
• Die Servergeschwindigkeit und -konfiguration Ihrer Website
• Die Browserkompatibilität und Responsivität Ihrer Website

Um Ihnen den Einstieg zu erleichtern, habe ich einige praktische Tipps für Sie zusammengestellt, wie Sie die Core Web Vitals verbessern und optimieren können:

• Installieren Sie ein Plugin wie Nitropack, das Ihre Website automatisch beschleunigt und optimiert.
• Verwenden Sie ein Content Delivery Network (CDN) wie Cloudflare, das Ihre Website schneller und sicherer macht.
• Optimieren Sie Ihre Bilder mit einem Tool wie TinyPNG, das Ihre Bilder komprimiert, ohne an Qualität zu verlieren.
• Vermeiden Sie Layoutverschiebungen, indem Sie Ihren Elementen feste Breiten und Höhen zuweisen oder Platzhalter verwenden.
• Reduzieren Sie die Anzahl der Anzeigen auf Ihrer Seite oder verwenden Sie ein Tool wie Ezoic, das Ihre Anzeigen automatisch an die Core Web Vitals anpasst

Problem mit INP: länger als 200 ms (Mobilgerät)

Ich verstehe, dass Sie das Problem mit den Core Web Vitals auf Ihrer Website auch beheben möchten. Das ist eine wichtige Aufgabe, um Ihre Website für Ihre Besucher und für Google attraktiver zu machen.

Das Problem ist "Problem mit INP: länger als 200 ms (Mobilgerät)". INP steht für Inputverzögerung, die die Zeit misst, die zwischen der Interaktion eines Nutzers mit Ihrer Seite und der Reaktion der Seite darauf vergeht. Zum Beispiel, wenn ein Nutzer auf einen Button klickt oder scrollt, wie lange dauert es, bis die Seite darauf reagiert? Eine hohe INP bedeutet, dass Ihre Seite langsam oder ruckelig ist und die Nutzer frustriert.

Um dieses Problem zu beheben, müssen Sie herausfinden, was die Verzögerung verursacht. Es gibt mehrere mögliche Ursachen, wie z.B.:

• Schlechte Internetverbindung des Nutzers
• Zu viele oder zu große Ressourcen auf Ihrer Seite, die den Hauptthread blockieren
• Schlechte JavaScript-Performance oder ineffizienter Code
• Zu viele Anzeigen oder Pop-ups auf Ihrer Seite

Hier sind einige Schritte, die Sie ausprobieren können, um das Problem zu lösen:

• Testen Sie Ihre Seite mit verschiedenen Netzwerkbedingungen und Geräten, um zu sehen, ob das Problem nur bei bestimmten Szenarien auftritt. Sie können Tools wie PageSpeed Insights oder Chrome DevTools verwenden, um Ihre Seite unter verschiedenen Bedingungen zu simulieren.
• Reduzieren Sie die Anzahl und Größe der Ressourcen auf Ihrer Seite, die den Hauptthread blockieren. Dazu gehören Bilder, Videos, Schriftarten, CSS- und JavaScript-Dateien. Sie können Tools wie Lighthouse oder WebPageTest verwenden, um zu sehen, welche Ressourcen am meisten Zeit beanspruchen.
• Optimieren Sie Ihren JavaScript-Code, indem Sie ihn minifizieren, komprimieren und verzögert laden. Vermeiden Sie auch lange Aufgaben oder intensive Berechnungen im Hauptthread. Sie können Tools wie Chrome DevTools oder Web Vitals Chrome Extension verwenden, um die JavaScript-Leistung zu analysieren und zu verbessern.
• Reduzieren Sie die Anzahl der Anzeigen oder Pop-ups auf Ihrer Seite oder verwenden Sie ein Tool wie Ezoic, das Ihre Anzeigen automatisch an die Core Web Vitals anpasst.

Wenn Sie das Problem gelöst haben - können und sollten Sie die Fehlerhebung prüfen lassen.

Wir empfehlen Websiteinhabern, gute Core Web Vitals-Werte anzustreben, um in der Google Suche erfolgreich zu sein und allgemein eine hohe Nutzerfreundlichkeit zu bieten. Diese und andere Aspekte der Nutzerfreundlichkeit von Seiten entsprechen den Anforderungen unserer Ranking-Systeme.

Was ist der Hauptthread in JavaScript?

Der Hauptthread in JavaScript ist der Thread, in dem der Browser die Benutzerereignisse und das Rendering verarbeitet. Standardmäßig verwendet der Browser einen einzigen Thread, um das gesamte JavaScript auf Ihrer Seite auszuführen, sowie um das Layout, die Reflows und die Garbage Collection durchzuführen.

Das bedeutet, dass wenn Sie eine lange oder intensive Berechnung im Hauptthread ausführen, der Browser blockiert wird und nicht mehr auf die Eingaben des Benutzers reagieren oder die Seite aktualisieren kann. Das führt zu einer schlechten Benutzererfahrung und kann auch die Core Web Vitals negativ beeinflussen.

Um dies zu vermeiden, können Sie Web Worker verwenden, um Code getrennt vom Hauptthread im Hintergrund auszuführen. Web Worker sind eine Art von JavaScript-Threads, die es Ihnen ermöglichen, parallel zu Ihrem Hauptskript zu arbeiten, ohne es zu blockieren. Sie können mit dem Hauptskript über Nachrichten kommunizieren und Daten austauschen.

Es gibt drei Arten von Web Workern: Dedicated Workers, Shared Workers und Service Workers. Dedicated Workers sind Web Worker, die nur von einem einzelnen Skript erstellt und verwendet werden können. Shared Workers sind Web Worker, die von mehreren Skripten geteilt werden können, die dieselbe Domain verwenden. Service Workers sind Web Worker, die als Proxy zwischen Ihrem Skript und dem Netzwerk fungieren und Funktionen wie Offline-Unterstützung, Push-Benachrichtigungen und Hintergrundaktualisierungen ermöglichen.

Um einen Web Worker zu erstellen, müssen Sie ein separates JavaScript-File schreiben, das den Code enthält, den Sie im Hintergrund ausführen möchten. Dann müssen Sie in Ihrem Hauptskript eine neue Instanz des Worker-Objekts mit dem Pfad zu dem File als Parameter erstellen. Zum Beispiel:

`var worker = new Worker('worker.js');`

Um mit dem Web Worker zu kommunizieren, können Sie die Methoden postMessage() und onmessage verwenden. Zum Beispiel:

// In Ihrem Hauptskript
worker.postMessage('Hallo'); // Senden Sie eine Nachricht an den Web Worker
worker.onmessage = function(e) { // Empfangen Sie eine Nachricht vom Web Worker
  console.log(e.data); // Loggen Sie die Nachricht
};

// In Ihrem worker.js
self.onmessage = function(e) { // Empfangen Sie eine Nachricht vom Hauptskript
  console.log(e.data); // Loggen Sie die Nachricht
  self.postMessage('Hallo zurück'); // Senden Sie eine Nachricht an das Hauptskript
};

Wie kann ich feststellen, ob mein Code den Hauptthread blockiert?

Um festzustellen, ob Ihr Code den Hauptthread blockiert, können Sie verschiedene Tools und Methoden verwenden, wie z.B.:

• Chrome DevTools: Mit Chrome DevTools können Sie die Leistung Ihrer Seite analysieren und sehen, wie viel Zeit Ihr Code im Hauptthread verbringt. Sie können auch die CPU-Auslastung simulieren und sehen, wie Ihre Seite unter verschiedenen Bedingungen reagiert.
• Lighthouse: Lighthouse ist ein Tool, das Ihnen einen Bericht über die Qualität Ihrer Seite gibt, einschließlich der Core Web Vitals. Es zeigt Ihnen auch, welche Ressourcen oder Aufgaben den Hauptthread blockieren und wie Sie sie optimieren können.
• WebPageTest: WebPageTest ist ein Online-Tool, das Ihnen einen detaillierten Einblick in die Leistung Ihrer Seite gibt. Es zeigt Ihnen auch die Hauptthread-Aktivität und die Zeitachse der Ereignisse auf Ihrer Seite.

Um diese Tools zu verwenden, müssen Sie nur die URL Ihrer Seite eingeben und den Test starten. Sie erhalten dann einen Bericht oder eine Grafik, die Ihnen zeigt, wie Ihr Code den Hauptthread beeinflusst. Sie können auch nach Warnungen oder Empfehlungen suchen, die Ihnen helfen können, Ihr Problem zu beheben.

Was ist der Unterschied zwischen Lighthouse und PageSpeed Insights?

Lighthouse und PageSpeed Insights sind beides wertvolle Tools, um die Leistung Ihrer Website zu verbessern, aber sie haben auch einige Unterschiede. Hier sind einige wichtige Punkte, die Sie wissen sollten:

• Lighthouse ist flexibler und bietet mehr detaillierte Informationen als PageSpeed Insights. Lighthouse kann auch eine ganze Website überprüfen, während PageSpeed Insights sich auf eine einzelne Seite konzentriert. Außerdem bewertet Lighthouse auch andere Faktoren wie Barrierefreiheit und SEO-Best Practices.
• PageSpeed Insights ist nur als webbasiertes Tool verfügbar, während Lighthouse als Chrome-Erweiterung installiert werden kann. Außerdem bietet PageSpeed Insights nur Daten für einzelne Seiten an, während Lighthouse die Leistung Ihrer gesamten Website überprüfen kann.
• Ein wichtiger Unterschied zwischen Lighthouse und PageSpeed Insights ist, dass Lighthouse mehr detaillierte Informationen über jeden gemessenen Punkt liefert. Zum Beispiel wird Ihnen Lighthouse nicht nur sagen, ob ein Bild optimiert ist, sondern auch, wie viel kleiner die optimierte Version sein sollte.
• PageSpeed Insights verwendet sowohl reale Daten von Nutzern als auch generelle Empfehlungen oder Schätzungen aus simulierten Tests, um die Leistung Ihrer Seite zu messen. Lighthouse verwendet nur Labordaten unter konsistenten Bedingungen, die möglicherweise nicht die tatsächliche Geschwindigkeit Ihrer Seite widerspiegeln.

Ich hoffe, diese Punkte helfen Ihnen weiter. Wenn Sie mehr über Lighthouse und PageSpeed Insights erfahren möchten, können Sie diese Links besuchen:

Lighthouse vs PageSpeed Insights: Which is Better for You?
PageSpeed Insights vs Lighthouse. The Differences Explained.

---