{"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\/it\/hilfe\/seo-monitoring\/core-web-vitals-lcp-inp-cls\/","title":{"rendered":"Core Web Vitals spiegati: LCP, INP e CLS"},"content":{"rendered":"<p class=\"wp-block-paragraph\">I Core Web Vitals sono tre metriche utilizzate per valutare aspetti importanti dell'esperienza utente di un sito web: velocit\u00e0 di caricamento, reattivit\u00e0 e stabilit\u00e0 visiva.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I tre attuali Core Web Vitals sono <strong>Largest Contentful Paint (LCP)<\/strong>, <strong>Interaction to Next Paint (INP)<\/strong> e <strong>Cumulative Layout Shift (CLS)<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tuttavia, un buon valore da solo non significa che l'intero sito web funzioni in modo rapido e senza problemi. Ciascuno dei tre parametri prende in considerazione un aspetto diverso dell'esperienza utente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In questo articolo ti spieghiamo cosa misurano LCP, INP e CLS, quali valori sono considerati buoni e come cercare sistematicamente la causa in caso di risultati anomali.<\/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>Breve spiegazione:<\/strong> LCP misura, in modo semplificato, quanto velocemente diventa visibile un contenuto principale importante della pagina. L'INP valuta la velocit\u00e0 con cui il sito web reagisce alle interazioni degli utenti. Il CLS misura gli spostamenti inattesi del layout durante l'utilizzo.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Cosa sono i Core Web Vitals?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I Core Web Vitals sono metriche definite da Google per valutare determinati aspetti dell'effettiva esperienza utente di una pagina web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I tre attuali Core Web Vitals sono:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Valore misurato<\/th><th>Nome completo<\/th><th>Valutato<\/th><\/tr><\/thead><tbody><tr><td><strong>LCP<\/strong><\/td><td>Largest Contentful Paint<\/td><td>Esperienza di ricarica<\/td><\/tr><tr><td><strong>INP<\/strong><\/td><td>Interazione fino al prossimo rendering<\/td><td>Reattivit\u00e0<\/td><\/tr><tr><td><strong>CLS<\/strong><\/td><td>Cumulative Layout Shift<\/td><td>Stabilit\u00e0 visiva<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I valori si completano a vicenda, perch\u00e9 un sito web pu\u00f2 essere molto buono in un'area e problematico in un'altra.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">I valori limite in sintesi<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Google suddivide i valori nelle categorie \u201ebuono\u201c, \u201eda migliorare\u201c e \u201escarso\u201c.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Valore misurato<\/th><th>Bene<\/th><th>Migliorabile<\/th><th>Male<\/th><\/tr><\/thead><tbody><tr><td><strong>LCP<\/strong><\/td><td><code>\u2264 2,5 s<\/code><\/td><td><code>da 2,5 s a 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>da 200 ms a 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>da 0,1 a 0,25<\/code><\/td><td><code>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>Importante:<\/strong> Ognuno di questi valori limite appartiene a una determinata metrica. Ad esempio, un limite LCP di 2,5 secondi non significa che qualsiasi altro tempo di caricamento concepibile debba anch'esso essere inferiore a 2,5 secondi.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Perch\u00e9 viene utilizzato il 75\u00b0 percentile?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nel valutare i dati di utilizzo reali, non si guarda semplicemente alla visualizzazione di pagina migliore o media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per i Core Web Vitals viene utilizzato il 75\u00b0 percentile.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Semplificando, questo significa che almeno il 75 percento delle esperienze misurate dovrebbe raggiungere il rispettivo valore limite o essere migliore.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>100 esperienze misurate\n\n75 o pi\u00f9\n\u2192 intervallo ottimale\n\nse il valore al 75\u00b0 percentile\nrientra nel limite ottimale<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In questo modo la valutazione non \u00e8 determinata unicamente da dispositivi e connessioni particolarmente veloci.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Superare i Core Web Vitals: cosa significa?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Per una buona valutazione dei Core Web Vitals, i tre indicatori chiave LCP, INP e CLS, in presenza di una base di dati sufficiente, devono rientrare nell'intervallo ottimale al 75\u00b0 percentile.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quindi un sito web pu\u00f2 ad esempio avere un buon LCP e CLS, ma non superare la valutazione dei Core Web Vitals a causa di un INP scarso.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP \u2192 buono\nINP \u2192 scarso\nCLS \u2192 buono\n\nRisultato:\nCore Web Vitals non superati completamente<\/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\">Il Largest Contentful Paint misura il tempo necessario per il rendering del pi\u00f9 grande elemento di contenuto rilevante nell'area visibile.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In questo modo, l'LCP dovrebbe misurare approssimativamente quando una parte sostanziale del contenuto principale \u00e8 diventata visibile per il visitatore.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un buon LCP \u00e8 inferiore a:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>2,5 secondi o meno<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quale elemento pu\u00f2 essere l'elemento LCP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Questo dipende dalla struttura della rispettiva pagina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Spesso si tratta, ad esempio, di:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grande immagine hero\ngrande intestazione di testo\nbanner\ngrande immagine di contenuto\ngrande blocco di testo<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dovresti verificare quale elemento viene effettivamente riconosciuto come LCP con uno strumento di performance e non semplicemente intuirlo in base al design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Esempio di LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Supponendo che una pagina iniziale abbia una grande immagine hero nella parte superiore:<\/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 Navigazione                          \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          IMMAGINE EROE DI GRANDI DIMENSIONI          \u2502\n\u2502                                     \u2502\n\u2502        Web hosting per PMI           \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\">Se questa immagine rappresenta il pi\u00f9 grande elemento rilevante nell'area visibile, pu\u00f2 diventare l'elemento LCP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se si carica in ritardo, anche l'LCP potrebbe peggiorare.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cosa pu\u00f2 causare un LCP scarso?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Un LCP elevato pu\u00f2 avere diverse cause.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Questi possono includere, ad esempio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>una fornitura lenta del documento HTML,<\/li>\n\n\n\n<li>un'immagine LCP molto grande,<\/li>\n\n\n\n<li>una risorsa d'immagine scoperta tardi,<\/li>\n\n\n\n<li>risorse che bloccano il rendering,<\/li>\n\n\n\n<li>Webfont,<\/li>\n\n\n\n<li>rendering lato client,<\/li>\n\n\n\n<li>una priorit\u00e0 di ricarica sfavorevole.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Quale sia la causa effettiva, deve essere esaminato sulla singola pagina.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">In caso di LCP scarso, identificare prima l'elemento LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Prima di modificare qualsiasi impostazione delle prestazioni, dovresti determinare quale elemento viene effettivamente misurato.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP scarso\n    \u2193\nIdentificare l'elemento LCP\n    \u2193\nImmagine?\nTesto?\nAltro elemento?\n    \u2193\nAnalizzare il percorso di caricamento di questo elemento<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Google PageSpeed Insights pu\u00f2 fornire indicazioni sull'elemento LCP e sul suo comportamento di caricamento durante l'analisi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ti spieghiamo come utilizzare lo strumento su <a href=\"\/it\/aiuto\/monitoraggio-seo\/google-pagespeed-insights\/\">Usare correttamente Google PageSpeed Insights<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Se un'immagine \u00e8 l'elemento LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se un'immagine hero o un'immagine di contenuto \u00e8 responsabile del LCP, dovresti prima verificarne le caratteristiche tecniche.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tra gli altri, sono interessanti:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Dimensioni in pixel\nDimensione del file\nFormato dell'immagine\nCompressione\nvarianti di immagini responsive\nMomento del rilevamento\nPriorit\u00e0 di caricamento\nLazy loading<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Un'immagine nell'area immediatamente visibile non dovrebbe, ad esempio, essere trattata allo stesso modo senza verifiche rispetto a un'immagine molto pi\u00f9 in basso nella pagina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Spiegheremo come preparare opportunamente le immagini su <a href=\"\/it\/aiuto\/monitoraggio-seo\/bilder-fuer-web-optimieren\/\">Ottimizzare le immagini per il web: dimensione del file, formato e SEO<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Il lazy loading pu\u00f2 essere problematico per l'LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Il lazy loading \u00e8 spesso utile per le immagini al di fuori dell'area immediatamente visibile.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tuttavia, se un'importante immagine LCP nella parte superiore della pagina viene caricata con un ritardo non necessario, ci\u00f2 pu\u00f2 peggiorare l'LCP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ecco perch\u00e9 non vale:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>Tutte le immagini = Lazy Loading<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bens\u00ec:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>Implementare il Lazy Loading dove il caricamento ritardato ha senso.<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Un formato di immagine moderno da solo non risolve un LCP scarso<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WebP o AVIF possono aiutare a ridurre le dimensioni del file di un'immagine. Tuttavia, il formato \u00e8 solo una parte dell'intero percorso di caricamento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un'immagine WebP gigantesca con dimensioni in pixel non necessarie pu\u00f2 continuare a essere problematica.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anche un piccolo file immagine pu\u00f2 essere caricato in ritardo se il browser lo scopre tardi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trattiamo la scelta del formato dell'immagine in <a href=\"\/it\/aiuto\/monitoraggio-seo\/webp-avif-jpg-png-unterschied\/\">WebP, AVIF, JPG e PNG: quale formato di immagine usare?<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">La risposta del server pu\u00f2 influenzare l'LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Prima che il browser possa eseguire il rendering dei contenuti importanti della pagina, deve prima ricevere i dati necessari.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se gi\u00e0 la fornitura del documento HTML richiede molto tempo, si sposta anche il momento in cui le risorse successive possono essere scoperte e visualizzate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un LCP scarso non dovrebbe quindi essere considerato esclusivamente come un \u201eproblema di immagini\u201c.<\/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 misura la reattivit\u00e0 di una pagina alle interazioni degli utenti.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ci\u00f2 include, ad esempio, le interazioni tramite:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Clic del mouse\nTouchscreen\nTastiera<\/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\">Ulteriori possibili cause sono ad esempio:<\/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\">Esempi:<\/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>Consiglio pratico:<\/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\">Gli esempi sono:<\/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\">Ein typisches Beispiel:<\/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\">Le cause tipiche possono essere:<\/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>width<\/code> e <code>height<\/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;Immagine di esempio&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\">Esempi:<\/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\">Spieghiamo le differenze in dettaglio su <a href=\"\/it\/aiuto\/monitoraggio-seo\/website-ladezeit-messen\/\">Misurare e valutare correttamente il tempo di caricamento del sito 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\">o viceversa.<\/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=\"\/it\/aiuto\/monitoraggio-seo\/google-search-console-einrichten\/\">Configurare Google Search Console e verificare il sito 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>Importante:<\/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\">Per esempio:<\/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>Regola fondamentale:<\/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>Problema<\/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\">Riepilogo<\/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\/it\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"SEO &amp; Monitoring","term_url":"https:\/\/www.curiaweb.ch\/it\/hilfe-kategorie\/seo-monitoring\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/comments?post=22898"}],"version-history":[{"count":1,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22898\/revisions"}],"predecessor-version":[{"id":22900,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22898\/revisions\/22900"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/media?parent=22898"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/doc_category?post=22898"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/doc_tag?post=22898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}