Site icon Atelier für 3D-Visualisierungen, V/AR. Produktvisualisierung und Rendering. ❤ r23

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

Ralf Dreiundzwanzig

Wie Sie das Problem "INP: länger als 200 ms (Mobilgerät)" lösen können

Wenn Sie eine Website oder eine Web-App für mobile Geräte entwickeln, möchten Sie sicherstellen, dass Ihre Nutzer eine schnelle und reibungslose Erfahrung haben. Ein wichtiger Faktor, der die Benutzerfreundlichkeit beeinflusst, ist die Eingabeverzögerung (INP). Das ist die Zeit, die zwischen dem Tippen oder Wischen auf dem Bildschirm und der Reaktion der Website oder App vergeht. Eine hohe INP kann dazu führen, dass Ihre Nutzer frustriert oder ungeduldig werden und Ihre Website oder App verlassen.

Die Fehlermeldung von Google: Problem mit INP: länger als 200 ms (Mobilgerät)

Die Fehlermeldung “Problem mit INP: länger als 200 ms (Mobilgerät)” bedeutet, dass Ihre Webseite zu langsam reagiert, wenn ein Nutzer mit ihr interagiert. 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.

Dieses Problem kann die Nutzerfreundlichkeit und das Ranking Ihrer Webseite negativ beeinflussen. Um es zu beheben, müssen Sie die Leistung Ihrer Webseite optimieren. Es gibt verschiedene Faktoren, die die Leistung beeinflussen können, wie z.B.:

Um Ihnen den Einstieg zu erleichtern, haben wir bei R23 einige praktische Tipps für Sie zusammengestellt, wie Sie die Leistung Ihrer Webseite verbessern und optimieren können.

Die Empfehlungen

empfiehlt, dass die INP für mobile Geräte unter 100 Millisekunden (ms) liegen sollte, um eine gute Benutzererfahrung zu gewährleisten. Wenn Ihre INP jedoch über 200 ms liegt, wird dies als ein Problem angesehen, das behoben werden muss. Aber wie können Sie das Problem "INP: länger als 200 ms (Mobilgerät)" lösen?

Es gibt mehrere mögliche Ursachen für eine hohe INP, aber die häufigste ist eine überlastete Haupt-Thread. Der Haupt-Thread ist der Teil des Browsers, der für die Ausführung von JavaScript, das Rendern von HTML und CSS, das Verarbeiten von Benutzereingaben und das Aktualisieren der Benutzeroberfläche verantwortlich ist. Wenn der Haupt-Thread zu viel Arbeit hat oder blockiert wird, kann er nicht schnell genug auf die Eingaben der Nutzer reagieren.

Meldung "INP: länger als 200 ms (Mobilgerät)"

Die Meldung "INP: länger als 200 ms (Mobilgerät)" weist darauf hin, dass die Interaktion auf Ihrer Website auf Mobilgeräten länger als 200 Millisekunden dauert. Um dieses Problem zu lösen, können Sie folgende Schritte unternehmen:

  1. Überprüfen Sie Ihre Website auf mögliche Leistungsprobleme, wie lange Ladezeiten und langsame Interaktionen auf Mobilgeräten.
  2. Optimieren Sie die Leistung Ihrer Website, indem Sie Bilder und andere Ressourcen komprimieren, Caching verwenden und unnötige Skripte entfernen.
  3. Implementieren Sie eine RUM (Real User Monitoring) Lösung, um echte Nutzerdaten zu sammeln und die Interaktion auf Mobilgeräten zu analysieren.
  4. Identifizieren Sie potenzielle Ursachen für die längeren Interaktionszeiten, wie z.B. lange Aufgaben (long tasks) im Browser, und beheben Sie diese.

Es ist wichtig, die Interaktion zu Next Paint (INP) zu optimieren, da diese Metrik als Teil der Core Web Vitals betrachtet und eine schlechte Leistung Auswirkungen auf das Ranking in den Suchergebnissen haben kann.

Tipps: INP zu reduzieren

Um die INP zu reduzieren, müssen Sie also den Haupt-Thread entlasten und optimieren. Hier sind einige Tipps, wie Sie das tun können:

Welche Maßnahmen kann ich ergreifen, um die INP-Zeit auf meiner Webseite zu verbessern

Um die INP-Zeit auf Ihrer Webseite zu verbessern, können Sie folgende Maßnahmen ergreifen:

  1. Optimierung der Serverleistung: Stellen Sie sicher, dass Ihre Serverleistung ausreichend ist, um schnelle Interaktionen zu ermöglichen.
  2. Code-Optimierung: Überprüfen Sie Ihren Code auf Effizienz und entfernen Sie unnötige Skripte, um die Ladezeiten zu verkürzen.
  3. Reduzierung gleichzeitiger Anfragen: Verringern Sie die Anzahl gleichzeitiger Anfragen, um die Interaktion zu beschleunigen.
  4. Einsatz von RUM (Real User Monitoring): Implementieren Sie eine RUM-Lösung, um echte Nutzerdaten zu sammeln und die Interaktion auf Mobilgeräten zu analysieren.
  5. Überwachung und Anpassung: Die Optimierung ist ein fortlaufender Prozess, der ständige Überwachung und Anpassung erfordert.

Wie kann ich die Serverleistung auf meiner Webseite verbessern

Um die Serverleistung auf Ihrer Webseite zu verbessern, können Sie die folgenden Maßnahmen ergreifen:

  1. Optimierung der Verbindungsgeschwindigkeiten: Stellen Sie sicher, dass die Verbindungsgeschwindigkeiten Ihrer Webseite optimiert sind, um die Ladezeiten zu verkürzen.
  2. Server-Caching nutzen: Implementieren Sie Server-Caching, um häufig auftretende Anfragen intelligent zu verarbeiten und die Antwortzeiten zu verkürzen.
  3. Überprüfung der Serverkapazität: Prüfen Sie, ob die aktuelle Serverkapazität ausreicht, um den Traffic auf Ihrer Webseite zu bewältigen, und erhöhen Sie gegebenenfalls die Kapazität.
  4. Entfernung unnötiger JavaScript-Code: Reduzieren Sie unnötigen JavaScript-Code, um die Reaktionsfähigkeit der Webseite zu verbessern.

Die Verbesserung der Serverleistung ist entscheidend, um die Interaktionszeiten auf Ihrer Webseite zu optimieren und sicherzustellen, dass sie den Anforderungen der Nutzer und Suchmaschinen entspricht.

Indem Sie diese Tipps befolgen, können Sie das Problem "INP: länger als 200 ms (Mobilgerät)" lösen und Ihren Nutzern eine bessere mobile Erfahrung bieten.

Unsere Erfahrungen

Wir haben mit https://gtmetrix.com eine genannte Seite geprüft und haben uns erschrocken. Anschließend haben wir die Seite mit den Chrome Dev Tools untersucht.

Eine Meldung war, dass wir Java Scripte verwenden, die für alte Browser bestimmt sind. Vor diesem Hintergrund haben wir ein WordPress Update auf die aktuelle Version 6.4.1 installiert. Selbstverständlich erst nach einer Datensicherung.

Die Bilder von unserem Blog liegen auf einer eigenen Domain. Der Server lieferte die Bilder ohne Cache aus, vor diesem Hintergrund haben wir die Cache-Richtlinien für -Bilder zu verlängert.

Cache-Richtlinien für Ihre -Bilder zu verlängern

Das bedeutet, dass Chrome empfiehlt, die Cache-Richtlinien für Ihre WebP-Bilder zu verlängern, um die Ladezeit Ihrer Seite zu verbessern. Cache-Richtlinien sind Anweisungen, die dem Browser sagen, wie lange er eine bestimmte Ressource wie ein Bild im Cache speichern soll. Wenn Sie eine lange Verweildauer im Cache haben, muss der Browser die Ressource nicht jedes Mal neu anfordern, wenn der Nutzer Ihre Seite besucht. Das spart Bandbreite und macht Ihre Seite schneller.

Die optimale Verweildauer im Cache hängt von der Häufigkeit ab, mit der Sie deine Inhalte ändern oder aktualisieren. Wenn Sie Ihre Bilder selten änderst, können Sie eine längere Verweildauer im Cache verwenden, z.B. "access plus 1 year". Wenn Sie Ihre Bilder häufig ändern, sollten Sie eine kürzere Verweildauer im Cache verwenden, z.B. "access plus 1 day". Sie sollten jedoch vermeiden, eine Verweildauer im Cache von weniger als einer Stunde zu verwenden, da dies die Leistung Ihrer Seite beeinträchtigen kann.

Unsere dreißig Tage im Cache waren dem Monopolisten zu kurz!

Um die Cache-Richtlinien für unsere WebP-Bilder zu ändern, mussten wir die. htaccess-Datei auf unserem Server bearbeiten und die entsprechenden Werte für ExpiresByType image/webp anpassen. Wir konnten auch die Cache-Control-Header verwenden, um die Cache-Richtlinien genauer zu steuern. Zum Beispiel, um eine Verweildauer im Cache von einem Jahr für WebP-Bilder zu setzen, haben wir folgende Zeilen in unsere .htaccess-Datei eingefügt:

<FilesMatch "\.(webp)$">
  ExpiresDefault "access plus 1 year"
  Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

Dieses ist als praktischer Leitfaden gedacht und behandelt keine theoretischen Hintergründe. Diese werden in einer Vielzahl von anderen Dokumenten im Internet behandelt.

Für die Richtigkeit der Inhalte dieses Tutorials gebe ich keinerlei Garantie. Der hier gezeigte Weg ist nicht der einzige um ein solches System aufzusetzen, es ist lediglich, der, den wir bevorzuge.

Ein Script war bei uns funktioniert, muss nicht bei Ihnen funktionieren.

Nutze das CSS-Feature font-display

Das CSS-Feature font-display ist eine Eigenschaft, die Sie in der @font-face-Regel verwenden können, um zu steuern, wie der Browser Ihre Webfonts lädt und anzeigt. Webfonts sind Schriftarten, die von einem externen Server oder Ihrer eigenen Website geladen werden, um Ihrer Seite ein individuelles Aussehen zu verleihen.

Es gibt fünf mögliche Werte für font-display: auto, block, swap, fallback und optional. Jeder Wert hat eine andere Auswirkung auf die Ladezeit und das Ihrer Seite. Hier ist eine kurze Erklärung für jeden Wert:

Um das CSS-Feature font-display zu nutzen, müssen Sie in der @font-face-Regel Ihrer CSS-Datei angeben. Zum Beispiel, wenn Sie eine Webfont namens “MyFont” von Ihrer eigenen Website laden, können Sie folgenden Code verwenden:

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff");
  font-display: swap; /* Hier kannst du den gewünschten Wert einsetzen */
}

Dann können Sie die Schriftart wie gewohnt in Ihrem CSS verwenden, z.B.:

h1 {
  font-family: "MyFont", Arial, sans-serif;
}

Beispiel unser Code:

"@font-face {
  font-family: 'entypo';
  src: url('entypo/entypo.eot?90097532');
  src: url('entypo/entypo.eot?90097532#iefix') format('embedded-opentype'),
       url('entypo/entypo.woff?90097532') format('woff'),
       url('entypo/entypo.ttf?90097532') format('truetype'),
       url('entypo/entypo.svg?90097532#entypo') format('svg');
  font-weight: normal;
  font-style: normal;

Um unseren Code zu optimieren, haben wir folgende Schritte ausgeführt:

Unser optimierter Code sieht so aus:

@font-face {
  font-family: 'entypo';
  src: url('entypo/entypo.woff2') format('woff2'),
       url('entypo/entypo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Ergebnis:

Sehr geehrte Leserinnen und Leser,

wir freuen uns, dass Sie unseren Blogbeitrag gelesen haben. Wir hoffen, dass Sie ihn informativ und nützlich fanden. Wenn Sie uns unterstützen möchten, würden wir uns sehr freuen, wenn Sie diesen Beitrag in den sozialen Medien teilen würden. Damit helfen Sie uns, mehr Sichtbarkeit bei zu erlangen und mehr Menschen zu erreichen, die sich für unsere Themen interessieren. Das Teilen ist ganz einfach: Klicken Sie einfach auf einen der Buttons unten und wählen Sie das Netzwerk aus, auf dem Sie den Beitrag teilen möchten. Vielen Dank für Ihre Hilfe und Ihr Interesse. Wir wünschen Ihnen einen schönen Tag.

Exit mobile version