{"id":22898,"date":"2026-08-30T09:20:17","date_gmt":"2026-08-30T07:20:17","guid":{"rendered":"https:\/\/www.curiaweb.ch\/?post_type=docs&#038;p=22898"},"modified":"2026-08-30T09:20:17","modified_gmt":"2026-08-30T07:20:17","password":"","slug":"core-web-vitals-lcp-inp-cls","status":"publish","type":"docs","link":"https:\/\/www.curiaweb.ch\/fr\/hilfe\/seo-monitoring\/core-web-vitals-lcp-inp-cls\/","title":{"rendered":"Core Web Vitals expliqu\u00e9s : LCP, INP et CLS"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Die Core Web Vitals sind drei Messwerte, mit denen wichtige Aspekte der Nutzererfahrung einer Website beurteilt werden: Ladegeschwindigkeit, Reaktionsf\u00e4higkeit und visuelle Stabilit\u00e4t.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die drei aktuellen Core Web Vitals hei\u00dfen <strong>Plus grand \u00e9l\u00e9ment affich\u00e9 (LCP)<\/strong>, <strong>Interaction to Next Paint (INP)<\/strong> et <strong>D\u00e9placement cumul\u00e9 de la mise en page<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein guter Wert allein bedeutet jedoch noch nicht, dass die gesamte Website schnell und problemlos funktioniert. Jeder der drei Messwerte betrachtet einen anderen Aspekt der Nutzererfahrung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Artikel erkl\u00e4ren wir dir, was LCP, INP und CLS messen, welche Werte als gut gelten und wie du bei auff\u00e4lligen Ergebnissen systematisch nach der Ursache suchst.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>En bref :<\/strong> LCP misst vereinfacht, wie schnell ein wichtiger gro\u00dfer Seiteninhalt sichtbar wird. INP bewertet, wie schnell die Website auf Benutzerinteraktionen reagiert. CLS misst unerwartete Layoutverschiebungen w\u00e4hrend der Nutzung.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Qu'est-ce que les Core Web Vitals ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Core Web Vitals sind von Google definierte Kennzahlen zur Bewertung bestimmter Aspekte der tats\u00e4chlichen Nutzererfahrung einer Webseite.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die drei aktuellen Core Web Vitals sind:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Valeur mesur\u00e9e<\/th><th>Vollst\u00e4ndiger Name<\/th><th>Bewertet<\/th><\/tr><\/thead><tbody><tr><td><strong>LCP<\/strong><\/td><td>Plus grand \u00e9l\u00e9ment affich\u00e9<\/td><td>Ladeerlebnis<\/td><\/tr><tr><td><strong>INP<\/strong><\/td><td>Interaction to Next Paint<\/td><td>Reaktionsf\u00e4higkeit<\/td><\/tr><tr><td><strong>CLS<\/strong><\/td><td>Cumulative Layout Shift<\/td><td>Visuelle Stabilit\u00e4t<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Die Werte erg\u00e4nzen sich, weil eine Website in einem Bereich sehr gut und in einem anderen problematisch sein kann.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Die Grenzwerte im \u00dcberblick<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Google unterteilt die Werte in die Bereiche \u201egut\u201c, \u201everbesserungsw\u00fcrdig\u201c und \u201eschlecht\u201c.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Valeur mesur\u00e9e<\/th><th>Bien<\/th><th>Verbesserungsw\u00fcrdig<\/th><th>Mauvais<\/th><\/tr><\/thead><tbody><tr><td><strong>LCP<\/strong><\/td><td><code>\u2264 2,5 s<\/code><\/td><td><code>&gt; 2,5 s bis 4,0 s<\/code><\/td><td><code>&gt; 4,0 s<\/code><\/td><\/tr><tr><td><strong>INP<\/strong><\/td><td><code>\u2264 200 ms<\/code><\/td><td><code>&gt; 200 ms bis 500 ms<\/code><\/td><td><code>&gt; 500 ms<\/code><\/td><\/tr><tr><td><strong>CLS<\/strong><\/td><td><code>\u2264 0,1<\/code><\/td><td><code>&gt; 0,1 bis 0,25<\/code><\/td><td><code>&gt; 0,25<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Important :<\/strong> Diese Grenzwerte geh\u00f6ren jeweils zu einer bestimmten Kennzahl. Ein LCP-Grenzwert von 2,5 Sekunden bedeutet beispielsweise nicht, dass jede andere denkbare Ladezeit ebenfalls unter 2,5 Sekunden liegen muss.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Warum wird das 75. Perzentil verwendet?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bei der Beurteilung realer Nutzungsdaten wird nicht einfach nur der beste oder durchschnittliche Seitenaufruf betrachtet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr die Core Web Vitals wird das 75. Perzentil verwendet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vereinfacht bedeutet das: Mindestens 75 Prozent der gemessenen Erfahrungen sollten den jeweiligen Grenzwert erreichen oder besser sein.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>100 gemessene Erfahrungen\n\n75 oder mehr\n\u2192 guter Bereich\n\nwenn der Wert am 75. Perzentil\ninnerhalb des guten Grenzwerts liegt<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Damit wird die Beurteilung nicht nur von besonders schnellen Ger\u00e4ten und Verbindungen bestimmt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Core Web Vitals bestehen: Was bedeutet das?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr eine gute Core-Web-Vitals-Bewertung m\u00fcssen die drei ma\u00dfgeblichen Kennzahlen LCP, INP und CLS bei ausreichender Datenbasis am 75. Perzentil im guten Bereich liegen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Website kann also beispielsweise einen guten LCP und CLS besitzen, aber wegen eines schlechten INP die Core-Web-Vitals-Bewertung nicht bestehen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP \u2192 gut\nINP \u2192 schlecht\nCLS \u2192 gut\n\nErgebnis:\nCore Web Vitals nicht vollst\u00e4ndig bestanden<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">LCP \u2013 Largest Contentful Paint<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Largest Contentful Paint misst die Zeit bis zum Rendern des gr\u00f6\u00dften relevanten Inhaltselements im sichtbaren Bereich.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Damit soll LCP n\u00e4herungsweise erfassen, wann ein wesentlicher Teil des Hauptinhalts f\u00fcr den Besucher sichtbar geworden ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein guter LCP liegt bei:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>2,5 Sekunden oder weniger<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welches Element kann das LCP-Element sein?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das h\u00e4ngt vom Aufbau der jeweiligen Seite ab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4ufig handelt es sich beispielsweise um:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>gro\u00dfes Hero-Bild\ngro\u00dfe Text\u00fcberschrift\nBanner\ngro\u00dfes Inhaltsbild\ngro\u00dfen Textblock<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Welches Element tats\u00e4chlich als LCP erkannt wird, solltest du mit einem Performance-Werkzeug \u00fcberpr\u00fcfen und nicht nur anhand des Designs vermuten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Beispiel f\u00fcr einen LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Angenommen, eine Startseite besitzt im oberen Bereich ein gro\u00dfes Hero-Bild:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Navigation                          \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502                                     \u2502\n\u2502          GROSSES HERO-BILD          \u2502\n\u2502                                     \u2502\n\u2502        Webhosting f\u00fcr KMU           \u2502\n\u2502                                     \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn dieses Bild das gr\u00f6\u00dfte relevante Element im sichtbaren Bereich darstellt, kann es zum LCP-Element werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u00e4dt es sp\u00e4t, kann sich dadurch auch der LCP verschlechtern.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was kann einen schlechten LCP verursachen?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein auff\u00e4lliger LCP kann verschiedene Ursachen haben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cela peut par exemple inclure :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>eine langsame Bereitstellung des HTML-Dokuments,<\/li>\n\n\n\n<li>ein sehr gro\u00dfes LCP-Bild,<\/li>\n\n\n\n<li>eine sp\u00e4t entdeckte Bildressource,<\/li>\n\n\n\n<li>render-blockierende Ressourcen,<\/li>\n\n\n\n<li>Webfonts,<\/li>\n\n\n\n<li>clientseitiges Rendering,<\/li>\n\n\n\n<li>eine ung\u00fcnstige Ladepriorisierung.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Welche Ursache tats\u00e4chlich vorliegt, muss an der konkreten Seite untersucht werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bei schlechtem LCP zuerst das LCP-Element identifizieren<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bevor du irgendwelche Performance-Einstellungen \u00e4nderst, solltest du feststellen, welches Element \u00fcberhaupt gemessen wird.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP schlecht\n    \u2193\nLCP-Element identifizieren\n    \u2193\nBild?\nText?\nanderes Element?\n    \u2193\nLadeweg dieses Elements untersuchen<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Google PageSpeed Insights kann bei der Analyse Hinweise auf das LCP-Element und dessen Ladeverhalten liefern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wie du das Werkzeug verwendest, erkl\u00e4ren wir unter <a href=\"\/fr\/aide\/surveillance-seo\/google-pagespeed-insights\/\">Comment utiliser correctement Google PageSpeed Insights<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wenn ein Bild das LCP-Element ist<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ist ein Hero- oder Inhaltsbild f\u00fcr den LCP verantwortlich, solltest du zun\u00e4chst dessen technische Eigenschaften pr\u00fcfen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Interessant sind unter anderem:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Pixelabmessungen\nDateigr\u00f6\u00dfe\nBildformat\nKompression\nresponsive Bildvarianten\nZeitpunkt der Entdeckung\nLadepriorit\u00e4t\nLazy Loading<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Bild im unmittelbar sichtbaren Bereich sollte beispielsweise nicht ohne Pr\u00fcfung genauso behandelt werden wie ein Bild weit unten auf der Seite.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wie du Bilder sinnvoll vorbereitest, erkl\u00e4ren wir unter <a href=\"\/fr\/aide\/surveillance-seo\/optimiser-des-images-pour-le-web\/\">Optimiser les images pour le Web : taille de fichier, format et r\u00e9f\u00e9rencement<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lazy Loading kann beim LCP problematisch sein<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lazy Loading ist f\u00fcr Bilder au\u00dferhalb des unmittelbar sichtbaren Bereichs h\u00e4ufig sinnvoll.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wird jedoch ein wichtiges LCP-Bild im oberen Seitenbereich unn\u00f6tig verz\u00f6gert geladen, kann dies den LCP verschlechtern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Deshalb gilt nicht:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>Alle Bilder = Lazy Loading<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mais plut\u00f4t :<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>Lazy Loading dort einsetzen, wo verz\u00f6gertes Laden sinnvoll ist.<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ein modernes Bildformat allein l\u00f6st keinen schlechten LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WebP oder AVIF k\u00f6nnen helfen, die Dateigr\u00f6\u00dfe eines Bildes zu reduzieren. Das Format ist jedoch nur ein Teil des gesamten Ladewegs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein riesiges WebP-Bild mit unn\u00f6tigen Pixelabmessungen kann weiterhin problematisch sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Auch eine kleine Bilddatei kann sp\u00e4t geladen werden, wenn der Browser sie erst sp\u00e4t entdeckt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Wahl des Bildformats behandeln wir unter <a href=\"\/fr\/aide\/surveillance-seo\/difference-webp-avif-jpg-png\/\">WebP, AVIF, JPG et PNG : quel format d'image utiliser ?<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Die Serverantwort kann den LCP beeinflussen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bevor der Browser wichtige Seiteninhalte rendern kann, muss er zun\u00e4chst die erforderlichen Daten erhalten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn bereits die Bereitstellung des HTML-Dokuments lange dauert, verschiebt sich auch der Zeitpunkt, an dem nachgelagerte Ressourcen entdeckt und dargestellt werden k\u00f6nnen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein schlechter LCP sollte deshalb nicht ausschlie\u00dflich als \u201eBildproblem\u201c betrachtet werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">INP \u2013 Interaction to Next Paint<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Interaction to Next Paint misst die Reaktionsf\u00e4higkeit einer Seite auf Benutzerinteraktionen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dazu geh\u00f6ren beispielsweise Interaktionen \u00fcber:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Mausklick\nTouchscreen\nTastatur<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">INP betrachtet, wie lange es dauert, bis eine Interaktion verarbeitet wird und der Browser anschlie\u00dfend eine visuelle Aktualisierung darstellen kann.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein guter INP liegt bei:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>200 Millisekunden oder weniger<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was bedeutet INP f\u00fcr einen Besucher?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Stell dir vor, du klickst auf einen Button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einer reaktionsschnellen Website erh\u00e4ltst du praktisch unmittelbar eine sichtbare Reaktion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einer schlechten Reaktionsf\u00e4higkeit kann dagegen eine merkliche Verz\u00f6gerung entstehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Klick\n  \u2193\n........ Verz\u00f6gerung ........\n  \u2193\nsichtbare Reaktion<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Genau diese Art von Nutzererfahrung soll INP messbar machen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">INP misst nicht einfach nur den ersten Klick<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">INP betrachtet die Interaktionen w\u00e4hrend des Besuchs einer Seite und versucht, die gesamte Reaktionsf\u00e4higkeit anhand einer repr\u00e4sentativen langsamen Interaktion zu bewerten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es handelt sich damit nicht einfach um eine Messung der ersten Interaktion nach dem Seitenaufruf.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was geh\u00f6rt zu einer Interaktionslatenz?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vereinfacht l\u00e4sst sich die Zeit einer Interaktion in mehrere Abschnitte zerlegen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Benutzer interagiert\n        \u2193\nEingabeverz\u00f6gerung\n        \u2193\nEvent-Handler \/ Verarbeitung\n        \u2193\nDarstellungsverz\u00f6gerung\n        \u2193\nn\u00e4chster sichtbarer Frame<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Probleme k\u00f6nnen in unterschiedlichen Teilen dieses Ablaufs entstehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was kann einen schlechten INP verursachen?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eine h\u00e4ufige Ursache ist zu viel Arbeit auf dem Hauptthread des Browsers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dazu kann umfangreiches oder ineffizientes JavaScript beitragen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Weitere m\u00f6gliche Ursachen sind beispielsweise:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>lange JavaScript-Aufgaben,<\/li>\n\n\n\n<li>aufwendige Event-Handler,<\/li>\n\n\n\n<li>komplexe DOM-\u00c4nderungen,<\/li>\n\n\n\n<li>umfangreiche Layout- und Rendering-Arbeit,<\/li>\n\n\n\n<li>viele gleichzeitig ausgef\u00fchrte Scripts,<\/li>\n\n\n\n<li>aufwendiger Drittanbieter-Code.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist der Main Thread?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Der Hauptthread beziehungsweise Main Thread des Browsers \u00fcbernimmt zahlreiche Aufgaben, die f\u00fcr die Darstellung und Interaktion einer Webseite erforderlich sind.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dazu geh\u00f6ren unter anderem Teile der JavaScript-Ausf\u00fchrung, Layoutberechnungen und Rendering-Arbeiten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ist dieser Thread lange mit einer Aufgabe besch\u00e4ftigt, kann er nicht gleichzeitig sofort auf eine neue Benutzerinteraktion reagieren.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Main Thread:\n\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588 lange JavaScript-Aufgabe \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n                                      \u2193\n                         Benutzer klickt hier\n                                      \u2193\n                         muss zun\u00e4chst warten<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Was sind Long Tasks?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lange Aufgaben auf dem Hauptthread k\u00f6nnen die Reaktionsf\u00e4higkeit einer Website beeintr\u00e4chtigen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine umfangreiche JavaScript-Aufgabe kann beispielsweise den Browser so lange besch\u00e4ftigen, dass Benutzerinteraktionen verz\u00f6gert verarbeitet werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei der INP-Optimierung ist deshalb h\u00e4ufig interessant, welche Aufgaben w\u00e4hrend einer langsamen Interaktion stattfinden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">INP ist nicht dasselbe wie TBT<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In Lighthouse begegnet dir h\u00e4ufig der Wert Total Blocking Time, kurz TBT.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TBT ist eine Laborkennzahl. INP basiert dagegen auf tats\u00e4chlichen Benutzerinteraktionen und ist ein Core Web Vital.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TBT kann f\u00fcr die technische Diagnose hilfreich sein, ist aber kein Ersatz f\u00fcr INP.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>TBT\n\u2192 Labormessung\n\nINP\n\u2192 reale Interaktionsdaten m\u00f6glich\n\u2192 Core Web Vital<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Warum kann PageSpeed keinen echten INP im Labortest erzeugen?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">INP ben\u00f6tigt echte Benutzerinteraktionen w\u00e4hrend eines Seitenbesuchs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein synthetischer Lighthouse-Ladetest besitzt nicht dieselbe Sammlung realer Interaktionen wie Felddaten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Deshalb solltest du bei INP besonders auf verf\u00fcgbare Felddaten achten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was tun bei schlechtem INP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Versuche zun\u00e4chst herauszufinden, welche Interaktionen langsam sind.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Men\u00fc \u00f6ffnen\nFilter anwenden\nProduktvariante ausw\u00e4hlen\nAccordion \u00f6ffnen\nFormular bedienen\nWarenkorb aktualisieren\nCookie-Banner bedienen<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Anschlie\u00dfend solltest du untersuchen, welche JavaScript- oder Rendering-Arbeit durch diese Interaktion ausgel\u00f6st wird.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Conseil pratique :<\/strong> Bei einem schlechten INP solltest du nicht einfach wahllos JavaScript-Dateien deaktivieren. Finde zuerst heraus, welche Interaktion langsam ist und was der Browser w\u00e4hrend dieser Interaktion verarbeitet.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Drittanbieter-Scripts k\u00f6nnen INP beeinflussen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Websites laden h\u00e4ufig JavaScript von externen Diensten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les exemples sont :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Analytics\nTag-Manager\nChat-Systeme\nSocial-Media-Widgets\nWerbesysteme\nTracking\nMaps\nMarketing-Tools<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Auch solcher Code kann Rechenzeit auf dem Main Thread beanspruchen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das bedeutet nicht, dass jeder externe Dienst entfernt werden muss. Sein Nutzen sollte aber gegen den technischen Aufwand und m\u00f6gliche Performance-Auswirkungen abgewogen werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CLS \u2013 Cumulative Layout Shift<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cumulative Layout Shift misst unerwartete Verschiebungen sichtbarer Seitenelemente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein guter CLS liegt bei:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>0,1 oder weniger<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anders als LCP und INP wird CLS nicht in Sekunden oder Millisekunden angegeben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es handelt sich um einen dimensionslosen Wert, der die Auswirkungen unerwarteter Layoutverschiebungen beschreibt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wie f\u00fchlt sich ein schlechter CLS an?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Un exemple type :<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Du m\u00f6chtest auf einen Button klicken. Kurz vor dem Klick erscheint oberhalb ein weiteres Element. Der Button springt nach unten und du klickst versehentlich auf etwas anderes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>VORHER\n\n&#91; Kaufen ]\n\nDu willst klicken ...\n\n      \u2193\n\nBild wird nachgeladen\n\n      \u2193\n\nNACHHER\n\n&#91; neues Bild ]\n\n&#91; Kaufen ]\n\nButton ist pl\u00f6tzlich verschoben<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Solche unerwarteten Bewegungen k\u00f6nnen sehr st\u00f6rend sein.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nicht jede Layoutverschiebung ist schlecht<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Layout\u00e4nderungen k\u00f6nnen auch vom Benutzer erwartet und bewusst ausgel\u00f6st werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du beispielsweise ein Men\u00fc \u00f6ffnest oder einen Akkordeon-Bereich aufklappst, darf sich die Oberfl\u00e4che entsprechend ver\u00e4ndern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Problematisch sind vor allem unerwartete Verschiebungen, die ohne eine entsprechende Erwartung des Benutzers auftreten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was kann einen schlechten CLS verursachen?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Les causes typiques peuvent \u00eatre :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bilder ohne reservierten Platz,<\/li>\n\n\n\n<li>Werbe- oder Bannerfl\u00e4chen ohne feste Dimensionen,<\/li>\n\n\n\n<li>nachtr\u00e4glich eingef\u00fcgte Inhalte,<\/li>\n\n\n\n<li>Cookie- oder Hinweis-Elemente, die Inhalt verschieben,<\/li>\n\n\n\n<li>bestimmte Webfont-Effekte,<\/li>\n\n\n\n<li>dynamische Widgets.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Bilder ohne Abmessungen und CLS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn der Browser vor dem Laden eines Bildes nicht wei\u00df, wie viel Platz ben\u00f6tigt wird, kann sich das Layout ver\u00e4ndern, sobald das Bild erscheint.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einem HTML-Bild k\u00f6nnen beispielsweise geeignete Angaben f\u00fcr <code>largeur<\/code> et <code>hauteur<\/code> dabei helfen, das Seitenverh\u00e4ltnis beziehungsweise den erforderlichen Platz bereits vorher zu ber\u00fccksichtigen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n  src=&quot;beispiel.webp&quot;\n  width=&quot;1200&quot;\n  height=&quot;800&quot;\n  alt=&quot;Image d&amp;#039;exemple&quot;\n&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Moderne CMS \u00fcbernehmen solche Angaben h\u00e4ufig automatisch. Bei einem auff\u00e4lligen CLS lohnt sich trotzdem die Kontrolle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Webfonts und Layoutverschiebungen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Auch Schriftarten k\u00f6nnen die Darstellung beeinflussen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn zun\u00e4chst eine Ersatzschrift dargestellt und sp\u00e4ter durch eine Webfont ersetzt wird, k\u00f6nnen sich Zeichenbreiten und Zeilenumbr\u00fcche ver\u00e4ndern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dadurch kann sich auch das Layout verschieben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ob dies tats\u00e4chlich ein relevantes CLS-Problem verursacht, sollte gemessen und nicht nur vermutet werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cookie-Banner und CLS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Cookie-Banner kann ebenfalls Layoutverschiebungen verursachen, wenn es nachtr\u00e4glich in den normalen Seitenfluss eingef\u00fcgt wird und vorhandene Inhalte verschiebt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Overlay, das \u00fcber dem bestehenden Inhalt erscheint, verh\u00e4lt sich technisch anders als ein Element, das nachtr\u00e4glich Platz innerhalb des Layouts beansprucht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei auff\u00e4lligen CLS-Werten solltest du deshalb auch Consent- und Hinweis-Systeme untersuchen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dynamische Inhalte und CLS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nachgeladene Inhalte k\u00f6nnen problematisch sein, wenn f\u00fcr sie vorher kein entsprechender Platz vorgesehen wurde.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Werbebanner\nEmpfehlungsboxen\nSocial-Media-Feeds\nBewertungen\nexterne Widgets\npersonalisierte Inhalte<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn solche Elemente Inhalte nach unten oder zur Seite verschieben, k\u00f6nnen sie zum CLS beitragen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wie wird CLS berechnet?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CLS basiert nicht einfach auf der Anzahl der Bewegungen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr eine Layoutverschiebung werden unter anderem ber\u00fccksichtigt, wie viel des sichtbaren Bereichs von instabilen Elementen betroffen ist und wie weit sich diese Elemente bewegen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die einzelnen relevanten Layoutverschiebungen werden innerhalb definierter Sitzungsfenster bewertet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr die praktische Website-Optimierung musst du die Formel normalerweise nicht selbst berechnen. Wichtiger ist, die verursachenden Elemente zu identifizieren.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">LCP, INP und CLS messen unterschiedliche Probleme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Website kann beispielsweise folgende Werte besitzen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP: 1,9 s\n\u2192 gut\n\nINP: 180 ms\n\u2192 gut\n\nCLS: 0,32\n\u2192 schlecht<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Die Seite l\u00e4dt in diesem Beispiel schnell und reagiert gut auf Interaktionen, besitzt aber erhebliche visuelle Verschiebungen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine pauschale Aussage wie \u201eDie Website ist schnell\u201c w\u00fcrde das eigentliche Problem nicht erfassen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ein weiteres Beispiel<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP: 4,4 s\n\u2192 schlecht\n\nINP: 120 ms\n\u2192 gut\n\nCLS: 0,04\n\u2192 gut<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hier reagiert die Website gut und bleibt visuell stabil. Der Hauptinhalt erscheint aber zu sp\u00e4t.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Optimierung sollte deshalb zun\u00e4chst auf den LCP beziehungsweise dessen Ursache ausgerichtet werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Felddaten und Labordaten unterscheiden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr die Core Web Vitals ist die Unterscheidung zwischen realen Felddaten und synthetischen Labordaten besonders wichtig.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Felddaten zeigen die tats\u00e4chlichen Erfahrungen realer Nutzer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Labordaten werden unter kontrollierten Testbedingungen erzeugt und eignen sich besonders f\u00fcr die technische Diagnose.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Unterschiede erkl\u00e4ren wir ausf\u00fchrlich unter <a href=\"\/fr\/aide\/surveillance-seo\/mesurer-le-temps-de-chargement-dun-site-web\/\">Mesurer et \u00e9valuer correctement le temps de chargement d'un site web<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Warum unterscheiden sich meine realen und getesteten Werte?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Reale Besucher verwenden unterschiedliche Ger\u00e4te, Netzwerkverbindungen und Browserbedingungen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Labortest arbeitet dagegen mit festgelegten beziehungsweise simulierten Bedingungen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Deshalb k\u00f6nnen beispielsweise folgende Ergebnisse gleichzeitig auftreten:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Labortest:\nLCP auff\u00e4llig\n\nreale Felddaten:\nLCP gut<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">oder umgekehrt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beide Ergebnisse k\u00f6nnen korrekt sein, weil sie unterschiedliche Daten betrachten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wo finde ich reale Core-Web-Vitals-Daten?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Reale Nutzungsdaten k\u00f6nnen unter anderem in Google PageSpeed Insights angezeigt werden, sofern gen\u00fcgend Daten f\u00fcr die betreffende URL beziehungsweise den Ursprung vorhanden sind.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Auch Google Search Console stellt einen Bericht zu den Core Web Vitals bereit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Einrichtung der Search Console behandeln wir unter <a href=\"\/fr\/aide\/surveillance-seo\/configurer-google-search-console\/\">Configurer Google Search Console et valider le site web<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Warum fehlen Core-Web-Vitals-Daten manchmal?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Felddaten muss eine ausreichende Datenbasis vorhanden sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neue oder wenig besuchte Websites beziehungsweise einzelne URLs k\u00f6nnen deshalb unter Umst\u00e4nden keine eigenen ausreichenden Felddaten besitzen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist kein Performance-Fehler.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Important :<\/strong> Fehlende Felddaten bedeuten nicht, dass deine Core Web Vitals schlecht sind. Es kann schlicht nicht gen\u00fcgend geeignete Messdaten geben.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">URL-Daten und Origin-Daten<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Performance-Werkzeuge k\u00f6nnen je nach Verf\u00fcgbarkeit Daten f\u00fcr eine einzelne URL oder aggregierte Daten f\u00fcr einen gesamten Ursprung anzeigen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das sollte bei der Interpretation ber\u00fccksichtigt werden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>URL\n\u2192 konkrete Seite\n\nOrigin\n\u2192 zusammengefasste Daten\n  derselben Website-Herkunft<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ein guter Origin-Wert garantiert deshalb nicht automatisch, dass jede einzelne Seite identisch funktioniert.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Core Web Vitals und mobile Ger\u00e4te<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mobile Nutzer k\u00f6nnen andere Performance-Erfahrungen haben als Desktop-Nutzer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unterschiede entstehen beispielsweise durch:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Rechenleistung\nNetzwerkverbindung\nDisplaygr\u00f6\u00dfe\nSeitenlayout\ngeladene Ressourcen\nBenutzerinteraktionen<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Deshalb solltest du Performance-Probleme nicht ausschlie\u00dflich auf einem leistungsf\u00e4higen Desktop-Rechner beurteilen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Core Web Vitals und SEO<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die Core Web Vitals sind Teil der technischen Signale rund um die Nutzererfahrung einer Seite.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sie sollten jedoch nicht als isolierter \u201eGoogle-Ranking-Score\u201c betrachtet werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein guter LCP, INP und CLS garantiert keine bestimmte Position in den Suchergebnissen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Umgekehrt solltest du schlechte Werte nicht ignorieren, nur weil eine Seite momentan gut rankt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine schnelle, reaktionsf\u00e4hige und stabile Website ist vor allem f\u00fcr deine Besucher sinnvoll.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Von 90 auf 100 ist nicht automatisch die wichtigste Optimierung<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die Core Web Vitals besitzen klar definierte gute Bereiche. Das bedeutet nicht, dass du anschlie\u00dfend jede weitere Millisekunde um jeden Preis entfernen musst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn eine Website bereits eine gute Nutzererfahrung bietet, kann es sinnvoller sein, gr\u00f6\u00dfere Probleme an anderer Stelle zu l\u00f6sen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP 2,4 s \u2192 gut\n\naber:\n\nCheckout funktioniert auf Mobilger\u00e4ten nicht\n\n\u2192 Checkout-Problem hat eindeutig h\u00f6here Priorit\u00e4t<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Core Web Vitals nicht isoliert optimieren<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Technische Performance-Ma\u00dfnahmen k\u00f6nnen Nebenwirkungen besitzen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du beispielsweise JavaScript aggressiv verz\u00f6gerst, nur um einen Messwert zu verbessern, k\u00f6nnen Navigation, Formulare oder andere Funktionen beeintr\u00e4chtigt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dasselbe gilt f\u00fcr \u00fcberm\u00e4\u00dfige Bildkompression oder unpassendes Lazy Loading.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>R\u00e8gle de base :<\/strong> Eine Performance-Optimierung ist nur dann eine Verbesserung, wenn die Website danach nicht nur bessere Messwerte besitzt, sondern weiterhin korrekt und angenehm funktioniert.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Core Web Vitals systematisch optimieren<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Statt wahllos Optimierungsma\u00dfnahmen umzusetzen, solltest du zuerst feststellen, welcher Messwert tats\u00e4chlich problematisch ist.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Core Web Vitals pr\u00fcfen\n        \u2193\nWelcher Wert ist schlecht?\n        \u2193\nLCP?\nINP?\nCLS?\n        \u2193\nkonkrete Ursache identifizieren\n        \u2193\ngezielte \u00c4nderung\n        \u2193\nWebsite testen\n        \u2193\nerneut messen<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Wenn LCP schlecht ist<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Beginne mit folgenden Fragen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Welches Element ist das LCP-Element?\n\nWann wird es entdeckt?\n\nWie gro\u00df ist die Ressource?\n\nIst das Bild passend dimensioniert?\n\nWird es unn\u00f6tig lazy geladen?\n\nBlockieren andere Ressourcen die Darstellung?\n\nWie schnell wird das HTML bereitgestellt?<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Danach kannst du wesentlich gezielter optimieren.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wenn INP schlecht ist<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Beginne mit:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Welche Interaktion ist langsam?\n\nWas passiert nach dem Klick oder Tastendruck?\n\nWelche JavaScript-Aufgaben laufen?\n\nIst der Main Thread lange blockiert?\n\nSind Drittanbieter-Scripts beteiligt?\n\nWerden gro\u00dfe DOM- oder Layout-\u00c4nderungen ausgel\u00f6st?<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das Ziel ist nicht einfach \u201eweniger JavaScript\u201c, sondern weniger unn\u00f6tige beziehungsweise ung\u00fcnstig geplante Arbeit w\u00e4hrend wichtiger Interaktionen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wenn CLS schlecht ist<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Untersuche:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Welches Element verschiebt sich?\n\nWas l\u00f6st die Verschiebung aus?\n\nSind Bildabmessungen bekannt?\n\nWird Inhalt nachtr\u00e4glich eingef\u00fcgt?\n\nVer\u00e4ndert eine Webfont das Layout?\n\nVerschiebt ein Banner bestehende Inhalte?\n\nSind externe Widgets beteiligt?<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Behebe anschlie\u00dfend die konkrete Ursache der unerwarteten Verschiebung.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mehrere Probleme k\u00f6nnen dieselbe Ursache haben<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Performance-Probleme sind nicht immer sauber voneinander getrennt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein komplexes JavaScript-Widget kann beispielsweise Ressourcen nachladen, den Main Thread belasten und gleichzeitig Inhalte in das Layout einf\u00fcgen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dadurch k\u00f6nnen mehrere Messwerte beeinflusst werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine saubere Ursachenanalyse ist deshalb wichtiger als das isolierte \u201eOptimieren einer Zahl\u201c.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nach \u00c4nderungen erneut messen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du eine konkrete Ursache behoben hast, solltest du erneut testen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr unmittelbare technische Ver\u00e4nderungen eignen sich Labortests gut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Reale Felddaten ver\u00e4ndern sich dagegen nicht sofort, weil sie \u00fcber einen l\u00e4ngeren Zeitraum gesammelt und ausgewertet werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Erwarte deshalb nicht, dass eine heute vorgenommene Optimierung unmittelbar s\u00e4mtliche Felddaten ver\u00e4ndert.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">H\u00e4ufige Fehler bei Core Web Vitals<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP mit vollst\u00e4ndiger Ladezeit gleichsetzen\n\nINP mit TBT gleichsetzen\n\nCLS in Sekunden interpretieren\n\nnur den Performance-Score betrachten\n\nnur Desktop testen\n\nfehlende Felddaten als schlechte Werte interpretieren\n\njedes Bild pauschal lazy laden\n\nJavaScript blind deaktivieren\n\njede Layout\u00e4nderung als CLS-Problem betrachten\n\ngute Core Web Vitals mit guten Rankings gleichsetzen\n\nmehrere Optimierungen gleichzeitig durchf\u00fchren\n\nnach \u00c4nderungen sofort neue Felddaten erwarten<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Praktische Diagnose-Matrix<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Probl\u00e8me<\/th><th>Erste Untersuchung<\/th><\/tr><\/thead><tbody><tr><td><strong>LCP schlecht<\/strong><\/td><td>LCP-Element und dessen Ladeweg identifizieren<\/td><\/tr><tr><td><strong>INP schlecht<\/strong><\/td><td>langsame Interaktionen und Main-Thread-Arbeit untersuchen<\/td><\/tr><tr><td><strong>CLS schlecht<\/strong><\/td><td>verschobene Elemente und Ausl\u00f6ser identifizieren<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Checkliste f\u00fcr Core Web Vitals<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>Felddaten vorhanden?\n        \u2193\nURL- oder Origin-Daten?\n        \u2193\n75. Perzentil betrachten\n        \u2193\nLCP \u2264 2,5 s?\n        \u2193\nINP \u2264 200 ms?\n        \u2193\nCLS \u2264 0,1?\n        \u2193\nproblematischen Messwert bestimmen\n        \u2193\nverursachendes Element \/ Interaktion finden\n        \u2193\ntechnische Ursache untersuchen\n        \u2193\ngezielte \u00c4nderung durchf\u00fchren\n        \u2193\nWebsite funktional testen\n        \u2193\nLabortest wiederholen\n        \u2193\nEntwicklung der Felddaten beobachten<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">R\u00e9sum\u00e9<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die Core Web Vitals betrachten drei unterschiedliche Aspekte der Nutzererfahrung einer Website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>LCP<\/strong> misst das Ladeerlebnis eines wichtigen gro\u00dfen Inhalts und gilt bei einem Wert von h\u00f6chstens <code>2,5 Sekunden<\/code> als gut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>INP<\/strong> bewertet die Reaktionsf\u00e4higkeit auf Benutzerinteraktionen. Ein Wert von h\u00f6chstens <code>200 Millisekunden<\/code> gilt als gut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CLS<\/strong> bewertet unerwartete Layoutverschiebungen. Ein Wert von h\u00f6chstens <code>0,1<\/code> gilt als gut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr die Bewertung realer Nutzungsdaten ist das 75. Perzentil entscheidend. Dadurch werden nicht nur besonders schnelle Einzelaufrufe ber\u00fccksichtigt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei schlechten Werten solltest du nicht sofort allgemeine Performance-Einstellungen ver\u00e4ndern. Identifiziere zuerst beim LCP das betroffene Element, beim INP die langsame Interaktion und beim CLS die unerwartete Layoutverschiebung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Core Web Vitals sind am hilfreichsten, wenn du sie nicht als drei Zahlen betrachtest, die m\u00f6glichst gr\u00fcn werden sollen, sondern als Hinweise darauf, welches konkrete Erlebnis deiner Besucher verbessert werden kann.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>Die Core Web Vitals sind drei Messwerte, mit denen wichtige Aspekte der Nutzererfahrung einer Website beurteilt werden: Ladegeschwindigkeit, Reaktionsf\u00e4higkeit und visuelle Stabilit\u00e4t. Die drei aktuellen Core Web Vitals hei\u00dfen Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS). Ein guter Wert allein bedeutet jedoch noch nicht, dass die gesamte Website [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"doc_category":[85],"doc_tag":[],"class_list":["post-22898","docs","type-docs","status-publish","hentry","doc_category-seo-monitoring"],"year_month":"2026-09","word_count":3266,"total_views":"5","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Silvio Mazenauer","author_nicename":"admin-curia","author_url":"https:\/\/www.curiaweb.ch\/fr\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"SEO &amp; Monitoring","term_url":"https:\/\/www.curiaweb.ch\/fr\/hilfe-kategorie\/seo-monitoring\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/comments?post=22898"}],"version-history":[{"count":1,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22898\/revisions"}],"predecessor-version":[{"id":22900,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22898\/revisions\/22900"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/media?parent=22898"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_category?post=22898"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_tag?post=22898"}],"curies":[{"name":"Bien jou\u00e9","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}