Google veröffentlicht Tutorial zur Identifizierung von INP-Problemen

Ein neues Tutorial von Google kann dir dabei helfen, Interaktion-zu-nächstem-Anzeigen (INP) Probleme zu identifizieren und zu lösen.

Highlights

Google hat ein Video-Tutorial zur Identifizierung von Interaktion-zu-nächstem-Anzeigen (INP) Problemen mithilfe der Chrome DevTools veröffentlicht.
INP hat kürzlich den First Input Delay (FID) als wichtige Web-Vital-Metrik abgelöst.
Folge den Schritten im Tutorial, um die INP-Werte deiner Website zu bewerten und zu optimieren.

Identifikation und Lösung von Interaktion-zu-nächstem-Anzeigen (Interaction to Next Paint) (INP) Problemen: Neues Google-Tutorial

Google hat ein Video-Tutorial zur Identifizierung und Lösung von Interaktion-zu-nächstem-Anzeigen (INP) Problemen auf Websites veröffentlicht.

Das Tutorial ist aktuell, da INP kürzlich den First Input Delay (FID) als Core Web Vital abgelöst hat, was auf eine Änderung in der Bewertung der Nutzererfahrung durch Google hinweist.

Bewertung und Optimierung der INP-Performance

Das Tutorial empfiehlt, die aktuelle INP-Performance deiner Website mithilfe von Tools wie PageSpeed Insights und dem Chrome User Experience Report zu bewerten.

Ein Ziel ist es, die „gute“ Schwelle zu erreichen, die eine Performance auf dem 75. Perzentil der Seitenaufbauzeiten repräsentiert.

Entwickler können die INP-Werte einer Website verbessern, indem sie Probleme wie lang laufende JavaScript-Aufgaben, übermäßige Aktivität im Hauptthread oder übermäßig komplexe DOM-Strukturen diagnostizieren und angehen.

Tutorial-Durchführung

Das Video führt die Zuschauer durch die Verwendung von Chrome DevTools zur Identifizierung von INP-Problemen.

Hier ist eine detaillierte Aufschlüsselung der im Tutorial behandelten Schritte:

Öffne Chrome DevTools: Beginne damit, das Chrome DevTools-Panel in deinem Browser zu öffnen. Dies kannst du tun, indem du mit der rechten Maustaste auf die Seite klickst und „Untersuchen“ auswählst oder indem du die Tastenkombination Strg+Shift+I (Windows) oder Cmd+Option+I (Mac) verwendest.

Simuliere ein langsames mobiles Gerät: Klicke im DevTools-Panel auf das Symbol „Gerät umschalten“ (das wie ein Telefon und Tablet aussieht), um die Emulation des mobilen Displays zu aktivieren. Wähle dann im Dropdown-Menü für die Drosselung unter „Netzwerk“ die Option „Mittleres Mobilgerät“, um eine langsamere mobile Verbindung zu simulieren.

Nehme Nutzerinteraktionen auf: Navigiere zum „Performance“-Tab in DevTools und klicke auf die Schaltfläche „Aufzeichnen“ (der schwarze Kreis). Interagiere mit der Website wie ein Nutzer, indem du Buttons oder Links klickst, die Aktionen auslösen. Sobald du die Interaktion abgeschlossen hast, klicke auf die Schaltfläche „Stop“ (der rote Kreis), um die Aufzeichnung zu beenden.

Analysiere die Leistung: Nach dem Stoppen der Aufzeichnung siehst du einen Leistungsgraphen. Klicke auf die Spur „Interaktionen“, um sie zu erweitern. Diese Spur markiert die Zeit von deinem Klick bis zur Anzeige einer Reaktion auf dem Bildschirm. Gleiche die Interaktion mit der „Haupt“-Thread-Aktivität ab, um lange Aufgaben zu identifizieren, die zu langsamen Interaktionen führen.

Identifiziere problematischen Code: Im „Zusammenfassung“-Bereich findest du einen Link zur Seitenquelle. Ein Klick auf diesen Link führt dich zum Code, der für die langsame Interaktion verantwortlich ist. Von hier aus kannst du mit der Diagnose und Behebung des Problems beginnen.

Auswirkungen für SEO-Profis

Die Veröffentlichung dieses Tutorials ist relevant, da die Annahme von INP als Core Web Vital Auswirkungen auf SEO hat.

Die Entscheidung von Google, dieses Tutorial zu veröffentlichen, unterstreicht die Bedeutung der Anpassung an den Übergang zu INP.

Da die Suchmaschine ihre Methoden zur Bewertung der Nutzererfahrung weiterentwickelt, können SEO-Profis und Webentwickler durch aktuelle Informationen über die neuesten Tools und bewährten Methoden Erfolg sicherstellen.

Zusammenfassung

Googles neues Video-Tutorial zur Identifizierung von INP-Problemen ist für SEO-Profis und Webentwickler, die diesen Übergang bewältigen und optimierte Websites bereitstellen möchten, wertvoll.

Indem du die im Tutorial beschriebenen Schritte befolgst und über die neuesten Entwicklungen informiert bleibst, kannst du sicherstellen, dass deine Website wettbewerbsfähig bleibt und eine optimale Nutzererfahrung bietet.

Written by: SEO Freelancer Tobias Bertram

Autor