{"id":29454,"date":"2023-08-02T12:40:48","date_gmt":"2023-08-02T12:40:48","guid":{"rendered":"https:\/\/www.seobility.net\/core-web-vitals-guide\/"},"modified":"2025-07-25T13:39:28","modified_gmt":"2025-07-25T13:39:28","slug":"core-web-vitals-guide","status":"publish","type":"post","link":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/","title":{"rendered":"Core Web Vitals: Alles, was Du dar\u00fcber wissen musst"},"content":{"rendered":"<p><em>Beitrag zuletzt aktualisiert am 1. Februar 2024.<\/em><\/p>\n<p>Die Core Web Vitals sind Messwerte, mit denen Google die Qualit\u00e4t der User Experience (UX) bzw. Nutzererfahrung einer Website realit\u00e4tsnah bewertet. Wie der Name \u201eCore\u201d Web Vitals verr\u00e4t, erachtet Google diese Messwerte als entscheidend daf\u00fcr.<\/p>\n<p>Au\u00dferdem hat Google explizit betont, dass sie einen direkten Einfluss auf Deine Suchmaschinen-Rankings haben.<\/p>\n<p>Ob dies wirklich so ist, wird unter SEOs hitzig diskutiert. Viele k\u00f6nnen nach Verbesserung der Core Web Vitals nur sehr geringf\u00fcgige direkte Auswirkungen auf das Ranking feststellen.<\/p>\n<p>Soll das also hei\u00dfen, dass Du diese Messwerte einfach ignorieren kannst?<\/p>\n<p>Ganz im Gegenteil! Wie wir an sp\u00e4terer Stelle erkl\u00e4ren werden, solltest Du die Optimierung Deiner Core Web Vitals und die allgemeine User Experience Deiner Website auf keinen Fall vernachl\u00e4ssigen.<\/p>\n<p>In diesem Guide erkl\u00e4ren wir Dir <em>alles<\/em>, was Du \u00fcber Core Web Vitals wissen musst, einschlie\u00dflich:<\/p>\n<ul>\n<li>wof\u00fcr sie <em>genau<\/em> stehen<\/li>\n<li>welchen Einfluss sie auf Deine Google Rankings haben<\/li>\n<li>wie Google sie misst<\/li>\n<li>wo Du die Core Web Vitals Deiner Website pr\u00fcfen kannst<\/li>\n<li>wie Du h\u00e4ufige Probleme f\u00fcr alle drei Core Web Vitals findest und l\u00f6st<\/li>\n<\/ul>\n<p>\u00dcber das Inhaltsverzeichnis kannst Du direkt zu den einzelnen Themen springen.<br \/>\n<div class=\"toc-container\"><div class=\"toc-h3\">Inhalt<\/div><ul class=\"toc-list\"><li><a href='#content-was-sind-core-web-vitals' class='toc-link toc-link-level-2'>Was sind Core Web Vitals?<\/a><\/li><li><a href='#content-warum-die-nutzerfreundlichkeit-page-experience-deiner-website-aus-seo-sicht-unerlaesslich-ist' class='toc-link toc-link-level-2'>Warum die Nutzerfreundlichkeit (\u201cPage Experience\u201d) Deiner Website aus SEO-Sicht unerl\u00e4sslich ist<\/a><\/li><li><a href='#content-wie-misst-google-die-core-web-vitals' class='toc-link toc-link-level-2'>Wie misst Google die Core Web Vitals?<\/a><\/li><li><a href='#content-warum-du-alle-drei-core-web-vitals-optimieren-solltest' class='toc-link toc-link-level-2'>Warum Du alle drei Core Web Vitals optimieren solltest<\/a><\/li><li><a href='#content-first-input-delay-fid' class='toc-link toc-link-level-2'>First Input Delay (FID)<\/a><\/li><li><a href='#content-interaction-to-next-paint-inp' class='toc-link toc-link-level-2'>Interaction to Next Paint (INP)<\/a><\/li><li><a href='#content-largest-contentful-paint-lcp' class='toc-link toc-link-level-2'>Largest Contentful Paint (LCP)<\/a><\/li><li><a href='#content-cumulative-layout-shift-cls' class='toc-link toc-link-level-2'>Cumulative Layout Shift (CLS)<\/a><\/li><li><a href='#content-wie-und-wo-du-die-core-web-vitals-deiner-website-pruefen-kannst' class='toc-link toc-link-level-2'>Wie (und wo) Du die Core Web Vitals Deiner Website pr\u00fcfen kannst<\/a><\/li><li><a href='#content-jetzt-bist-du-ideal-auf-die-optimierung-deiner-core-web-vitals-vorbereitet' class='toc-link toc-link-level-2'>Jetzt bist Du ideal auf die Optimierung Deiner Core Web Vitals vorbereitet<\/a><\/li><\/ul><\/div><\/p>\n<p>Lass uns damit beginnen, was Core Web Vitals genau sind und welchen Einfluss sie auf Deinen Suchmaschinen Traffic haben.<\/p>\n<h2 id='content-was-sind-core-web-vitals'><strong>Was sind Core Web Vitals?<\/strong><\/h2>\n<p>Google m\u00f6chte Websites belohnen, die ihren Nutzern eine gute User Experience (UX) bieten.<\/p>\n<p>Doch dabei gibt es ein Problem: <a href=\"https:\/\/www.seobility.net\/de\/wiki\/User_Experience\" target=\"_blank\" rel=\"noopener\">User Experience<\/a> ist schwer zu messen.<\/p>\n<p>Zwar geben Statistiken wie <a href=\"https:\/\/www.seobility.net\/de\/wiki\/bounce-rate\/\" target=\"_blank\" rel=\"noopener\">Bounce Rate<\/a> oder <a href=\"https:\/\/www.seobility.net\/de\/wiki\/Verweildauer\" target=\"_blank\" rel=\"noopener\">Verweildauer<\/a> Hinweise, doch beide Kennzahlen k\u00f6nnen manipuliert werden. Des Weiteren gibt es ja nach Zweck einer einzelnen Seite oder Website gro\u00dfe Unterschiede.<\/p>\n<p>Hier kommen die \u201eWeb Vitals\u201c ins Spiel.<\/p>\n<p>Sie bestehen aus mehreren Statistiken und Signalen, von denen Google mit Sicherheit wei\u00df, dass sie sich positiv (oder negativ) auf die User Experience auswirken, und die vom Algorithmus gemessen (oder beobachtet) werden k\u00f6nnen.<\/p>\n<p>Googles Web Vitals konzentrieren sich auf Ladezeit und Layout-Stabilit\u00e4t, sowie darauf, wie schnell eine Seite auf eine Aktion eines Nutzers reagiert.<\/p>\n<p>Warum Google genau diese Werte ausgew\u00e4hlt hat? Weil sie objektiv sind:<\/p>\n<ul>\n<li>Eine schnelle Website ist f\u00fcr Nutzer immer besser als eine langsame.<\/li>\n<li>Eine Website, die schnell auf User-Interaktionen reagiert, f\u00fchrt bei Nutzern nicht zu Frustration.<\/li>\n<li>Ein stabiles Layout verhindert unabsichtliche Klicks.<\/li>\n<\/ul>\n<p>Macht soweit Sinn, oder?<\/p>\n<p>Indem Du die User Experience Deiner Website verbesserst, erh\u00f6hst Du Deinen organischen Traffic.<\/p>\n<p>Aber aufgepasst\u2026 nicht alle \u201eWeb Vitals\u201c geh\u00f6ren zu den \u201eCore Web Vitals\u201c.<\/p>\n<p>Sehen wir uns das genauer an.<\/p>\n<h3><strong>So beeinflussen die Core Web Vitals zusammen mit anderen Speed- und UX-Faktoren Deine Google Rankings<\/strong><\/h3>\n<p>Damit es nicht zu un\u00fcbersichtlich wird, halte ich die Unterscheidung ganz einfach: Die <a href=\"https:\/\/www.seobility.net\/de\/wiki\/Core_Web_Vitals\" target=\"_blank\" rel=\"noopener\">Core Web Vitals (CWV)<\/a> sind eine Untergruppe der Web Vitals. Mit der Zeit wird Google die CWV um zus\u00e4tzliche Kennzahlen erweitern, doch im Moment gibt es nur drei.<\/p>\n<p><strong><em>Beachte:<\/em><\/strong><em> Die Kennzahlen sind komplex und nicht so einfach in nur einem Absatz zu erkl\u00e4ren. Darum keine Sorge, falls Du die Begriffe noch nicht kennst. Wir gehen sp\u00e4ter im Detail auf alle drei ein.<\/em><\/p>\n<h4><strong>1. Largest Contentful Paint (LCP)<\/strong><\/h4>\n<p>Dieser Begriff bezeichnet die Dauer, bis das gr\u00f6\u00dfte sichtbare \u201e<a href=\"https:\/\/www.seobility.net\/de\/wiki\/Above_the_fold\" target=\"_blank\" rel=\"noopener\">Above the fold<\/a>\u201c-Element auf einer Seite vollst\u00e4ndig geladen ist. Um Googles Core Web Vitals Test zu bestehen, muss das Largest Contentful Paint-Element einer Seite innerhalb von 2,5 Sekunden komplett geladen sein.<\/p>\n<p><img decoding=\"async\" class=\"alignleft size-full wp-image-3594 contentimage\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/largest-contentful-paint-seobility.png\" alt=\"largest contentful paint\" width=\"1000\" height=\"671\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/largest-contentful-paint-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/largest-contentful-paint-seobility-768x515.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h4><strong>2. First Input Delay (FID)<\/strong><\/h4>\n<p>Dieser Begriff bezeichnet die Dauer zwischen der ersten Aktion, die ein Nutzer auf einer Seite durchf\u00fchrt (z.B. der Klick auf einen Button oder in ein Suchfeld, oder das \u00d6ffnen eines Men\u00fcs) und der Antwort der Website. Um Googles Core Web Vitals Test zu bestehen, darf der First Input Delay einen Wert von 100 Millisekunden nicht \u00fcberschreiten.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3595 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/first-input-delay-seobility.png\" alt=\"first input delay\" width=\"1000\" height=\"672\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/first-input-delay-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/first-input-delay-seobility-768x516.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>FID geh\u00f6rt seit der Einf\u00fchrung zu den CWV. Ab dem 12. M\u00e4rz 2024soll FID jedoch von einem anderen Messwert namens \u201eInteraction to Next Paint\u201d (INP) abgel\u00f6st werden.<\/p>\n<h5>Neu: Interaction to Next Paint (INP)<\/h5>\n<p>Interaction to Next Paint misst die Reaktionsdauer einer Seite auf <em>alle<\/em> Interaktionen eines Users. Es geht also darum, wie schnell und zuverl\u00e4ssig eine Seite generell auf Interaktionen, zum Beispiel durch Klicks oder Tastatur, reagieren kann. Dabei beschreibt der Wert die Zeitspanne, die (fast) alle Interaktionen unterschritten haben (d.h. die h\u00f6chste Gesamt-Interaktionszeit, Ausrei\u00dfer ausgenommen). Ein guter INP liegt laut Google bei 200 ms oder weniger. Alles \u00fcber 500 ms gilt als schlecht.<\/p>\n<p>Der Wert INP soll ab dem 12. M\u00e4rz 2024 FID ersetzen, da letzterer nur die erste Interaktion betrachtet, w\u00e4hrend INP einen vollst\u00e4ndigen \u00dcberblick \u00fcber alle Interaktionen auf einer Seite bietet.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-6872 size-full contentimage\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/interaction-to-next-paint-2.png\" alt=\"interaction to next paint\" width=\"1000\" height=\"672\" \/><\/p>\n<h4><strong>3. Cumulative Layout Shift (CLS)<\/strong><\/h4>\n<p>Dieser Begriff bezieht sich auf die visuelle Stabilit\u00e4t einer Seite. Alle Elemente, die sich w\u00e4hrend der Ladephase verschieben, erh\u00f6hen den CLS-Wert einer Seite. Um Googles Core Web Vitals Test zu bestehen, muss eine Seite einen Cumulative Layout Shift-Wert unter 0,1 erzielen.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3596 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cumulative-layout-shift-seobility.png\" alt=\"cumulative layout shift\" width=\"1000\" height=\"681\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cumulative-layout-shift-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cumulative-layout-shift-seobility-768x523.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Neben den \u201eCore\u201c Kennzahlen gibt es noch weitere Web Vitals:<\/p>\n<ul>\n<li>Time to First Byte (<a href=\"https:\/\/web.dev\/time-to-first-byte\/\" target=\"_blank\" rel=\"noopener\">TTFB<\/a>)<\/li>\n<li>First Contentful Paint (<a href=\"https:\/\/web.dev\/first-contentful-paint\/\" target=\"_blank\" rel=\"noopener\">FCP<\/a>)<\/li>\n<li>Total Blocking Time (<a href=\"https:\/\/web.dev\/lighthouse-total-blocking-time\/\" target=\"_blank\" rel=\"noopener\">TBT<\/a>)<\/li>\n<li>Time to Interactive (<a href=\"https:\/\/web.dev\/interactive\/\" target=\"_blank\" rel=\"noopener\">TTI<\/a>)<\/li>\n<\/ul>\n<p>Und zu guter Letzt gibt es noch vier traditionelle UX Faktoren:<\/p>\n<ul>\n<li>Ist eine Website f\u00fcr mobile Endger\u00e4te optimiert?<\/li>\n<li>Nutzt sie <a href=\"https:\/\/www.seobility.net\/de\/wiki\/HTTPS\" target=\"_blank\" rel=\"noopener\">HTTPS<\/a>?<\/li>\n<li>Verzichtet sie auf st\u00f6rende <a href=\"https:\/\/www.seobility.net\/de\/wiki\/Interstitial\" target=\"_blank\" rel=\"noopener\">Interstitial<\/a>-Werbung (zum Beispiel l\u00e4stige Pop-up-Anzeigen)?<\/li>\n<\/ul>\n<p>Diese Punkte geh\u00f6ren laut Google zwar nicht konkret zu den Core Web Vitals, doch wir w\u00fcrden sie trotzdem dazu z\u00e4hlen, da sie gemeinsam Googles \u201cPage Experience\u201d Rankingfaktor bilden.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6873 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/page-experience-v2.png\" alt=\"Page Experience Rankingfaktor\" width=\"1000\" height=\"1028\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/page-experience-v2.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/page-experience-v2-768x790.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Und seit Juni 2021 hat dieser Faktor\u00a0<a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/11\/timing-for-page-experience\" target=\"_blank\" rel=\"noopener\">direkten Einfluss auf die Google Rankings<\/a>.<\/p>\n<p>Das bedeutet, dass Deine Website eine gute Nutzererfahrung bieten muss, wenn Du im Ranking weit oben stehen m\u00f6chtest.<\/p>\n<div style=\"background-color: #f7f7f7; padding: 12px 32px 12px 12px; margin-bottom: 15px;\"><center><strong>Page Experience und (Core) Web Vitals \u2013 Die gesamte Infografik<\/strong><\/center><br \/>\n<a href=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/core-web-vitals-infographik-v2023.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"contentimage aligncenter wp-image-6875 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/core-web-vitals-infografik.png\" alt=\"Core Web Vitals Infografik\" width=\"200\" height=\"356\" \/><\/a><\/div>\n<h2 id='content-warum-die-nutzerfreundlichkeit-page-experience-deiner-website-aus-seo-sicht-unerlaesslich-ist'><strong>Warum die Nutzerfreundlichkeit (\u201cPage Experience\u201d) Deiner Website aus SEO-Sicht unerl\u00e4sslich ist<\/strong><\/h2>\n<p>Die Core Web Vitals beeinflussen <a href=\"https:\/\/www.searchenginejournal.com\/ranking-factors\/core-web-vitals\/\" target=\"_blank\" rel=\"noopener\">laut Google<\/a> direkt Deine Rankings.<\/p>\n<p>Allerdings scheint der Einfluss nicht ganz so schwerwiegend zu sein, wie urspr\u00fcnglich angek\u00fcndigt. Einige Mitarbeiter von Google haben sogar offiziell zugegeben, dass die Metriken <a href=\"https:\/\/www.seroundtable.com\/google-core-web-vitals-priority-34937.html\" target=\"_blank\" rel=\"noopener\">keinen riesigen Einfluss haben<\/a>.<\/p>\n<p>Wie wir oben bereits erw\u00e4hnt haben, bedeutet das aber nicht, dass Du sie einfach ignorieren kannst. Hier einige Gr\u00fcnde daf\u00fcr, warum Du die Core Web Vitals Deiner Website dennoch unbedingt optimieren solltest:<\/p>\n<h3>1. Core Web Vitals beeinflussen den Erfolg Deiner Website indirekt<\/h3>\n<p>Google hat mitgeteilt, dass Core Web Vitals direkten Einfluss auf das Ranking haben. Viele SEOs berichten allerdings eher von gemischten Ergebnissen. Manche <a href=\"https:\/\/www.advancedwebranking.com\/blog\/core-web-vitals-study\/\" target=\"_blank\" rel=\"noopener\">Korrelationsstudien<\/a> scheinen ebenfalls anzudeuten, dass sie nicht so bedeutend sind wie anfangs angenommen.<\/p>\n<p>Allerdings ist deren indirekte Wirkung auf den Website-Erfolg wahrscheinlich deutlich st\u00e4rker als die direkte.<\/p>\n<p>Die Wahrscheinlichkeit daf\u00fcr, dass ein Nutzer eine Seite verl\u00e4sst, erh\u00f6ht sich <a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-strategies\/app-and-mobile\/page-load-time-statistics\/\" target=\"_blank\" rel=\"noopener\">laut Recherche von Google<\/a> beispielsweise um 32 %, wenn sich die Seitenladezeit von 1 Sekunde auf 3 Sekunden verl\u00e4ngert.<\/p>\n<p>Die Ladezeit scheint laut einer <a href=\"https:\/\/www.portent.com\/blog\/analytics\/research-site-speed-hurting-everyones-revenue.htm#:~:text=The%20first%205%20seconds%20of,(between%20seconds%200%2D5)\" target=\"_blank\" rel=\"noopener\">Studie von Portent<\/a> aus dem Jahr 2019 auch einen gravierenden Einfluss auf die Conversion Rate zu haben. Die Studie zeigte, dass Websites mit einer Ladezeit von einer Sekunde eine dreimal so hohe Conversion Rate hatten wie Websites, die in 5 Sekunden laden. Im Bereich E-Commerce war die Differenz 2,5-fach.<\/p>\n<p>Da es bei der Suchmaschinenoptimierung letztendlich darum geht, Leads, Sales, Registrierungen oder andere Messwerte, die wichtig f\u00fcrs Gesch\u00e4ft sind, zu erh\u00f6hen, sollte man die Ladezeit daher auf keinen Fall auf die leichte Schulter nehmen.<\/p>\n<h3>2. Page Experience spielt eine Rolle beim Erstellen hilfreicher Inhalte<\/h3>\n<p>Im April 2023 hat Google seinem <a href=\"https:\/\/developers.google.com\/search\/docs\/fundamentals\/creating-helpful-content\" target=\"_blank\" rel=\"noopener\">Leitfaden zum Erstellen hilfreicher Inhalte<\/a> einen Abschnitt \u00fcber die Nutzerfreundlichkeit (f\u00fcr die Core Web Vitals eine wichtige Rolle spielen) hinzugef\u00fcgt.<\/p>\n<p>Hier hei\u00dft es wie folgt:<\/p>\n<blockquote><p>\u201eDie Haupt-Rankingsysteme von Google belohnen Inhalte, die eine gute Nutzerfreundlichkeit von Seiten bieten. Website-Inhaber, die mit unseren Systemen erfolgreich sein m\u00f6chten, sollten sich nicht auf nur einen oder zwei Aspekte der Nutzerfreundlichkeit von Seiten konzentrieren. Pr\u00fcfe stattdessen, ob du in vielen Aspekten insgesamt eine hohe Nutzerfreundlichkeit von Seiten erzielst.\u201d<\/p><\/blockquote>\n<p>In den vergangenen Jahren hat es mehrere sog. \u201c<a href=\"https:\/\/www.seobility.net\/de\/blog\/google-helpful-content-update\/\" target=\"_blank\" rel=\"noopener\">Helpful Content Updates<\/a>\u201d gegeben, was deutlich macht, dass dies f\u00fcr Google ein wichtiges Thema ist. Umso wichtiger ist es, diesen Aspekt immer im Blick zu behalten.<\/p>\n<p>Und wer will schlie\u00dflich keine Website, die den Usern n\u00fctzlichen Content liefert?<\/p>\n<h3><strong>3. Page Experience ist ein Ranking-Signal f\u00fcr Googles Top Stories in der mobilen Ansicht<\/strong><\/h3>\n<p>F\u00fcr viele Suchanfragen, die sich auf aktuelle News beziehen, zeigt Google einen sogenannten \u201eTop Stories\u201c Abschnitt oberhalb der Suchergebnisse.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3601 size-full\" style=\"float: none;\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/top-stories.png\" alt=\"top stories\" width=\"300\" height=\"649\" \/><\/p>\n<p>Damit belegen diese den besten Platz in den Suchergebnissen.<\/p>\n<p>In der Vergangenheit musste Deine Website <a href=\"https:\/\/www.seobility.net\/de\/wiki\/amp-accelerated-mobile-pages\/\" target=\"_blank\" rel=\"noopener\">AMP <\/a>verwenden, um f\u00fcr Googles \u201eTop Stories\u201c in der mobilen Ansicht infrage zu kommen. Doch seit Juni 2021 hat sich dies ge\u00e4ndert und Page Experience ist nun ein Ranking-Faktor f\u00fcr dieses Feature.<\/p>\n<blockquote><p>\u201eWenn wir das Update zum Ranking im Zusammenhang mit der Nutzerfreundlichkeit von Seiten einf\u00fchren, wird es auch neue Kriterien f\u00fcr das Schlagzeilenkarussell geben. In Zukunft soll es auf Mobilger\u00e4ten nicht nur f\u00fcr AMP-Seiten, sondern f\u00fcr alle Seiten zug\u00e4nglich sein. Die Nutzerfreundlichkeit von Seiten wird dann einer von vielen Faktoren f\u00fcr das Ranking im Schlagzeilenkarussell sein. Alle Seiten m\u00fcssen weiterhin den <a href=\"https:\/\/support.google.com\/news\/publisher-center\/answer\/6204050?hl=de\" target=\"_blank\" rel=\"noopener\">Google News-Inhaltsrichtlinien<\/a> entsprechen.\u201c<\/p><\/blockquote>\n<p>Falls Deine Website den Core Web Vitals Test nicht besteht, verpasst Du damit die Chance auf ziemlich viel Traffic. Das gilt besonders f\u00fcr umk\u00e4mpfte Branchen.<\/p>\n<p>Nun wei\u00dft Du, wie wichtig es ist, Deine Core Web Vitals zu optimieren. Im n\u00e4chsten Schritt sehen wir uns an, wie Google sie \u00fcberhaupt misst.<\/p>\n<h2 id='content-wie-misst-google-die-core-web-vitals'><strong>Wie misst Google die Core Web Vitals?<\/strong><\/h2>\n<p>Wenn Du Deine Website mit <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=de\" target=\"_blank\" rel=\"noopener\">Googles PageSpeed Insights Tool<\/a> pr\u00fcfst, siehst Du, dass der Bericht in zwei Abschnitte aufgeteilt ist. Google unterscheidet hier zwischen \u201eLabdaten\u201c und \u201eFelddaten\u201c.<\/p>\n<p>Wenn Deine Website ausreichend Besucher hat, findest Du die Felddaten im ersten Abschnitt unter \u201eSo sieht die Leistung auf der Nutzerseite aus\u201d.\u00a0 Die Labdaten sind f\u00fcr alle Websites verf\u00fcgbar und sind unter \u201eLeistungsprobleme diagnostizieren\u201d zu finden.<\/p>\n<p>Der Unterschied zwischen den beiden? <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/v5\/about?hl=de#lab\" target=\"_blank\" rel=\"noopener\">Laut Google<\/a> basieren Labdaten<\/p>\n<blockquote><p>auf einem simulierten Seitenaufbau auf einem einzelnen Ger\u00e4t und unter festgelegten Netzwerkbedingungen.<\/p><\/blockquote>\n<p>Mit anderen Worten: Diese Daten basieren nicht auf tats\u00e4chlichen Nutzerinteraktionen mit Deiner Website.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6876 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/labdaten.png\" alt=\"Labdaten\" width=\"883\" height=\"791\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/labdaten.png 883w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/labdaten-768x688.png 768w\" sizes=\"(max-width: 883px) 100vw, 883px\" \/><\/p>\n<p>Felddaten hingegen werden von Googles <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noopener\">Chrome User Experience Report<\/a> bereitgestellt.<\/p>\n<blockquote><p>The Chrome User Experience Report is powered by real user measurement of key user experience metrics across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled.<\/p><\/blockquote>\n<p>Laut Google basiert dieser Bericht also auf dem Verhalten von echten Benutzern auf \u00f6ffentlich zug\u00e4nglichen Websites, gemessen anhand der wichtigsten User-Experience-Kennzahlen. Diese Daten werden mithilfe von Usern gesammelt, die ihr Einverst\u00e4ndnis zum Synchronisieren ihres Browserverlaufs gegeben, kein Synchronisierungspasswort festgelegt und Berichte zu Nutzungsdaten aktiviert haben.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6877 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/felddaten.png\" alt=\"Felddaten\" width=\"887\" height=\"479\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/felddaten.png 887w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/felddaten-768x415.png 768w\" sizes=\"(max-width: 887px) 100vw, 887px\" \/><\/p>\n<p>Kurz gesagt sammelt Google Millionen von Daten von Chrome Nutzern auf der ganzen Welt. Zu diesen Daten geh\u00f6ren unter anderem auch die drei Core Web Vitals.<\/p>\n<p>Die Felddaten, die Dir angezeigt werden, basieren also auf tats\u00e4chlichen Besuchen Deiner Website.<\/p>\n<p><strong><em>Beachte:<\/em><\/strong><em> Weiter unten gehen wir auf zus\u00e4tzliche Tools ein, mit denen Du die Core Web Vitals Deiner Website pr\u00fcfen kannst. Zuerst wollen wir die drei Core Web Vitals jedoch im Detail betrachten.<\/em><\/p>\n<h2 id='content-warum-du-alle-drei-core-web-vitals-optimieren-solltest'><strong>Warum Du alle drei Core Web Vitals optimieren solltest<\/strong><\/h2>\n<p>Nachdem wir jetzt wissen, woher die Daten kommen, nehmen wir die drei Core Web Vitals einmal genauer unter die Lupe.<\/p>\n<p>Zur Erinnerung, es geht um diese drei Messwerte:<\/p>\n<ul>\n<li>First Input Delay (FID) \u2013 wird bald durch Interaction to Next Paint (INP) ersetzt<\/li>\n<li>Largest Contentful Paint (LCP)<\/li>\n<li>Cumulative Layout Shift (CLS)<\/li>\n<\/ul>\n<p>Google stuft die drei Core Web Vitals jeweils in drei Kategorien ein: \u201eGood\u201c (gut), \u201eNeeds Improvement\u201c (verbesserungsw\u00fcrdig) und \u201ePoor\u201c (schlecht).<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3604 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cwv-skalen.png\" alt=\"Kategorien der Core Web Vitals\" width=\"854\" height=\"251\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cwv-skalen.png 854w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cwv-skalen-768x226.png 768w\" sizes=\"(max-width: 854px) 100vw, 854px\" \/><\/p>\n<p>Viele der Faktoren, die Largest Contentful Paint beeinflussen, haben auch auf First Input Delay und zum Teil sogar auf Cumulative Shift Auswirkungen.<\/p>\n<p>Normalerweise ist LCP der erste Baustein der Core Web Vitals (Ladevorgang &gt; Interaktivit\u00e4t &gt; Visuelle Stabilit\u00e4t), doch wir befassen uns zuerst mit First Input Delay und Interaction to Next Paint. Der Grund daf\u00fcr ist ein g\u00e4ngiges Problem beim Ladevorgang, das in der Regel den gr\u00f6\u00dften Effekt auf diese Messwerte hat.<\/p>\n<p>Grunds\u00e4tzlich gilt jedoch, dass alle drei Core Web Vitals in Verbindung zueinander stehen. Optimiert man LCP, hat das zum Beispiel oft auch positive Auswirkungen auf FID und CLS.<\/p>\n<p><strong>Und um Googles Core Web Vitals Test zu bestehen, m\u00fcssen alle drei Messwerte im gr\u00fcnen Bereich sein.<\/strong><\/p>\n<p>Lass uns also den ersten Teil der Core Web Vitals betrachten.<\/p>\n<h2 id='content-first-input-delay-fid'><strong>First Input Delay (FID)<\/strong><\/h2>\n<p>Bei First Input Delay geht es um die Reaktionszeit Deiner Seite. Genauer gesagt gibt er die Dauer an, bis Deine Seite auf die erste \u201eAktion\u201c eines Nutzers reagiert.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3595 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/first-input-delay-seobility.png\" alt=\"first input delay\" width=\"1000\" height=\"672\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/first-input-delay-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/first-input-delay-seobility-768x516.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p><strong>Was z\u00e4hlt bei der Messung von FID als Aktion?<\/strong><\/p>\n<ul>\n<li>Klicken oder Tippen auf einen Button<\/li>\n<li>Klicken eines Links<\/li>\n<li>\u00d6ffnen eines Men\u00fcs<\/li>\n<li>Klicken auf ein Formularfeld<\/li>\n<\/ul>\n<p><strong>Was z\u00e4hlt nicht?<\/strong><\/p>\n<p>Fortlaufende Aktionen wie Scrollen oder Zoomen.<\/p>\n<p>Ganz oben auf der Seobility Startseite (in der mobilen Ansicht) siehst Du zwei Elemente, die Nutzer mit gro\u00dfer Wahrscheinlichkeit zuerst anklicken:<\/p>\n<ol>\n<li>Ein Hamburger-Men\u00fc-Icon (mobiles Men\u00fc)<\/li>\n<li>Einen Button zur kostenlosen Registrierung<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6928 contentimage\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/seobility-startseite.png\" alt=\"Seobility Startseite\" width=\"396\" height=\"543\" \/><\/p>\n<p>Beide befinden sich gut sichtbar \u201eabove the fold\u201c. Und wenn wir bei der Conversion-Optimierung alles richtig gemacht haben, sollte der darauffolgende Button zum kostenlosen Testen eines der ersten Elemente sein, das Nutzer anklicken.<\/p>\n<p>Sehen wir uns als N\u00e4chstes also die Performance unserer Startseite an. FID und die anderen Core Web Vitals k\u00f6nnen mit mehreren Tools gepr\u00fcft werden. Wir verwenden f\u00fcr den Moment jedoch <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=de\" target=\"_blank\" rel=\"noopener\">Googles PageSpeed Insights<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6880 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/first-input-delay.png\" alt=\"First Input Delay\" width=\"857\" height=\"318\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/first-input-delay.png 857w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/first-input-delay-768x285.png 768w\" sizes=\"(max-width: 857px) 100vw, 857px\" \/><\/p>\n<p>Hier k\u00f6nnen wir sehen, dass der First Input Delay f\u00fcr unsere Startseite in den letzten 28 Tagen im Durchschnitt bei 14 ms lag.<\/p>\n<p>Ist das nun gut oder schlecht? Googles Obergrenze f\u00fcr einen guten FID-Wert sind 100 Millisekunden:<\/p>\n<blockquote><p>\u201cTo provide a good user experience, pages should have a FID of less than 100 milliseconds.\u201d<\/p><\/blockquote>\n<p>Das bedeutet, dass Seiten, die erst nach mehr als 100 Millisekunden auf eine Aktion reagieren, laut Google optimierungsbed\u00fcrftig sind.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3607 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/fid-skala.png\" alt=\"Kategorien f\u00fcr FID\" width=\"841\" height=\"244\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/fid-skala.png 841w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/fid-skala-768x223.png 768w\" sizes=\"(max-width: 841px) 100vw, 841px\" \/><\/p>\n<p>Unser Ergebnis ist also ziemlich gut. Es dauert weniger als eine F\u00fcnfzigstel Sekunde, bis unsere Website auf die erste Aktion eines Nutzers reagiert. F\u00fcr menschliche Nutzer f\u00fchlt es sich damit an, als reagiere die Website unmittelbar.<\/p>\n<p><strong><em>Anmerkung:<\/em><\/strong> Du fragst Dich, warum Google einen Wert von 100 Millisekunden festgelegt hat? Dieser gilt schon lange als Grenzwert f\u00fcr Zeitspannen, <a href=\"https:\/\/www.nngroup.com\/articles\/response-times-3-important-limits\/\" target=\"_blank\" rel=\"noopener\">die sich f\u00fcr Nutzer noch als unmittelbar anf\u00fchlen<\/a>. Reaktionszeiten darunter k\u00f6nnen wir gar nicht wahrnehmen.<\/p>\n<h3><strong>Welche Gr\u00fcnde gibt es f\u00fcr First Input Delay Probleme?<\/strong><\/h3>\n<p>Ein Browser liest den Code einer Seite von oben nach unten. Trifft er auf ein externes Skript, insbesondere <a href=\"https:\/\/www.seobility.net\/de\/wiki\/JavaScript\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a>, muss er:<\/p>\n<ol>\n<li>Das Laden anderer Elemente vor\u00fcbergehend pausieren<\/li>\n<li>Nutzerinteraktionen vor\u00fcbergehend deaktivieren, bis er die Datei heruntergeladen und verarbeitet hat<\/li>\n<\/ol>\n<p>Der Grund daf\u00fcr ist, dass ein externes Skript unter Umst\u00e4nden das Verhalten einzelner Elemente auf der Hauptseite ver\u00e4ndern kann.<\/p>\n<p>Du kannst Dir darunter nichts vorstellen? Hier ist ein Beispiel, das Dir mit Sicherheit bekannt vorkommt:<\/p>\n<p>Viele Bildergalerien verwenden JavaScript, um eine Popup Lightbox zu \u00f6ffnen, wenn ein Nutzer eines der Bilder anklickt.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-29454-1\" width=\"640\" height=\"604\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/lightbox-1-1.webm?_=1\" \/><a href=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/lightbox-1-1.webm\">https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/lightbox-1-1.webm<\/a><\/video><\/div>\n<p>Das funktioniert jedoch erst, nachdem die JavaScript-Datei, die die Lightbox bereitstellt, vom Browser heruntergeladen und verarbeitet wurde.<\/p>\n<p>Klicken Nutzer vorher auf das Element, gelangen sie lediglich zur Bild-URL. JavaScript ver\u00e4ndert also, wie sich der Link verh\u00e4lt, indem es den Nutzer nicht mehr auf eine neue Seite f\u00fchrt, sondern stattdessen eine Lightbox \u00f6ffnet.<\/p>\n<p>St\u00f6\u00dft ein Browser auf eine externe JS Datei, denkt er daher: \u201eAm besten pr\u00fcfe ich erstmal, ob diese JavaScript Datei die Funktionalit\u00e4t der Seite \u00e4ndert, ehe ich weiter mache. Alles andere stoppen!\u201c<\/p>\n<p>Dieses Verhalten nennt sich \u201e<a href=\"https:\/\/web.dev\/render-blocking-resources\/\" target=\"_blank\" rel=\"noopener\">Render-Blocking<\/a>\u201c, denn die JavaScript-Datei blockiert das Rendering.<\/p>\n<p>Falls die FID-Werte Deiner Website nicht im gr\u00fcnen Bereich sind, ist dieser Vorgang mit gro\u00dfer Wahrscheinlichkeit der Grund daf\u00fcr.<\/p>\n<h3><strong>So vermeidest Du, dass JavaScript Deine Seite blockiert<\/strong><\/h3>\n<p>Die gute Nachricht ist, dass Du das Render-Blocking durch JavaScript-Dateien auf Deiner Seite relativ leicht verhindern kannst.<\/p>\n<p>Daf\u00fcr musst Du nur eines der folgenden zwei Attribute in Deinen Script-Tags integrieren:<\/p>\n<ol>\n<li>\u201eDefer\u201c<\/li>\n<li>\u201easync\u201c<\/li>\n<\/ol>\n<p>Welches davon Du verwenden solltest, h\u00e4ngt von der Art des Skripts ab.<\/p>\n<h4><strong>Option 1: Ladevorgang einer JavaScript-Datei mit dem Defer-Attribut aufschieben<\/strong><\/h4>\n<p><strong>Ideal f\u00fcr:<\/strong> Skripte, die die Funktionalit\u00e4t Deiner Seite ver\u00e4ndern, oder die in einer bestimmten Reihenfolge geladen werden m\u00fcssen.<\/p>\n<pre>&lt;script src=\"yourscript.js\" defer&gt;&lt;\/script&gt;<\/pre>\n<p>Das Defer-Attribut gibt dem Browser die Anweisung, nicht zu warten, bis das Skript geladen ist und die Seite w\u00e4hrenddessen zu \u201eblockieren\u201c, sondern es einfach im Hintergrund zu laden, w\u00e4hrend der Rest der Seite gerendert wird.<\/p>\n<p>Warum die Reihenfolge dabei wichtig ist? Weil Skripte mit dem Defer-Attribut in der Reihenfolge ausgef\u00fchrt werden, in der sie im HTML-Code einer Seite erscheinen.<\/p>\n<p>Verwendest Du zum Beispiel eine Custom jQuery Funktion, dann solltest Du sicherstellen, dass die jQuery Bibliothek vor Deinem Custom Skript geladen ist:<\/p>\n<pre>&lt;script src=\"jquery.js\" defer&gt;&lt;\/script&gt;&lt;script src=\"customquery.js\" defer&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Ansonsten kann das Skript nicht ausgef\u00fchrt werden!<\/p>\n<h4><strong>Option 2: JavaScript asynchron laden<\/strong><\/h4>\n<p><strong>Ideal f\u00fcr:<\/strong> Externe Skripte, die die Funktionalit\u00e4t Deiner Seite nicht beeinflussen und demnach nicht in einer bestimmten Reihenfolge geladen werden m\u00fcssen.<\/p>\n<pre>&lt;script src=\"externalscript.js\" async&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>\u00c4hnlich wie mit dem Defer-Attribut werden die Skripte im Hintergrund geladen, w\u00e4hrend der Rest der Seite gerendert wird.<\/p>\n<p>Unterschiedlich ist hier jedoch, dass Skripte mit dem Async-Attribut in keiner bestimmten Reihenfolge ausgef\u00fchrt werden, sondern bereits, sobald das jeweilige Skript geladen ist.<\/p>\n<p>Analytics und Ads-Skripte sowie Tracking Pixel k\u00f6nnen in der Regel problemlos asynchron geladen werden, da sie weder auf andere Bibliotheken zugreifen m\u00fcssen, noch die Funktionalit\u00e4t Deiner Seite im Allgemeinen beeinflussen.<\/p>\n<p><em>Weitere Informationen zum Async- und Defer-Attribut findest Du <\/em><a href=\"https:\/\/www.codepalm.de\/post\/javascript-wordpress-nachladen\/\" target=\"_blank\" rel=\"noopener\"><em>hier<\/em><\/a><em>.<\/em><\/p>\n<h3><strong>So findest und korrigierst Du Skripte, die das Rendering blockieren<\/strong><\/h3>\n<p>In Googles PageSpeed Insights erh\u00e4ltst Du einen ersten \u00dcberblick \u00fcber alle Skripte, die im Moment Deine Seite blockieren.<\/p>\n<p>Um dies zu veranschaulichen haben wir eine <a href=\"https:\/\/phpstack-180999-1583396.cloudwaysapps.com\/default.php\" target=\"_blank\" rel=\"noopener\">einfache Testseite<\/a> erstellt, die drei Skripte aufruft, welche das Rendering blockieren (darunter ein lokales und zwei externe Skripte).<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3608 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/skripts-beispiel.png\" alt=\"Testseite mit JavaScript\" width=\"831\" height=\"162\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/skripts-beispiel.png 831w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/skripts-beispiel-768x150.png 768w\" sizes=\"(max-width: 831px) 100vw, 831px\" \/><\/p>\n<p>Pr\u00fcfen wir die Seite nun in PageSpeed Insights, sehen wir, dass die Skripte das Laden der eigentlichen Seite 1,13 Sekunden lang verhindern.<\/p>\n<p><em>PageSpeed Insights &gt; Empfehlungen &gt; Ressourcen beseitigen, die das Rendering blockieren<\/em><\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6881 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/ressourcen-beseitigen.png\" alt=\"Ressourcen die das Rendering blockieren\" width=\"859\" height=\"407\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/ressourcen-beseitigen.png 859w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/ressourcen-beseitigen-768x364.png 768w\" sizes=\"(max-width: 859px) 100vw, 859px\" \/><\/p>\n<p>Nun f\u00fcgen wir f\u00fcr das lokale Skript das Defer-Attribut und f\u00fcr die externen Skripte das Async-Attribut hinzu.<\/p>\n<p><a href=\"https:\/\/phpstack-180999-1583396.cloudwaysapps.com\/optimized.php\" target=\"_blank\" rel=\"noopener\">Hier ist die neue Seite<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3611 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/skripts-beispiel-2.png\" alt=\"neue Testseite\" width=\"859\" height=\"157\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/skripts-beispiel-2.png 859w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/skripts-beispiel-2-768x140.png 768w\" sizes=\"(max-width: 859px) 100vw, 859px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6883 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/nicht-verwendetes-javascript.png\" alt=\"neues Ergebnis in PageSpeed Insights\" width=\"858\" height=\"129\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/nicht-verwendetes-javascript.png 858w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/nicht-verwendetes-javascript-768x115.png 768w\" sizes=\"(max-width: 858px) 100vw, 858px\" \/><\/p>\n<p>Das war doch ganz einfach, oder?<\/p>\n<p>An eine Sache solltest Du jedoch denken\u2026<\/p>\n<h4><strong>Vorsicht beim Verschieben von Skripten, die die UX beeinflussen<\/strong><\/h4>\n<p>Bei den Core Web Vitals geht es haupts\u00e4chlich darum, die User Experience zu verbessern. Darum sollten wir keine \u00c4nderungen vornehmen, die sich negativ darauf auswirken k\u00f6nnen.<\/p>\n<p>Erinnerst Du Dich an unseren gro\u00dfen Button f\u00fcr die kostenlose Registrierung?<\/p>\n<p>Nehmen wir mal an, dass ein Klick darauf ein Pop-Up-Fenster \u00f6ffnet, anstatt den Nutzer zur n\u00e4chsten Seite zu bringen.<\/p>\n<p>Zudem wissen wir bereits, dass Nutzer den Button oft als erste Aktion auf unserer Startseite anklicken.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6928 contentimage\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/seobility-startseite.png\" alt=\"Seobility Startseite\" width=\"396\" height=\"543\" \/><\/p>\n<p>Was passiert aber, wenn wir die Ausf\u00fchrung der JavaScript-Datei, die das Pop-Up aufruft, verschieben?<\/p>\n<p>In diesem Fall klicken Nutzer den Button vielleicht schon, ehe das Skript geladen ist, woraufhin gar nichts geschieht. F\u00fcr Besucher der Website ist das eine frustrierende Erfahrung.<\/p>\n<p>Gibt es daf\u00fcr eine andere L\u00f6sung?<\/p>\n<h4><strong>Wichtige JavaScripts beim Laden priorisieren<\/strong><\/h4>\n<p>Das Laden dieses Skripts sollte hier Vorrang haben, auch wenn es das Rendering f\u00fcr einige Millisekunden blockiert.<\/p>\n<p>Warum wir uns so entscheiden? Weil das Skript hier grundlegend wichtig f\u00fcr den \u201eabove the fold\u201c Inhalt ist.<\/p>\n<p>Im Idealfall implementieren wir das Pop-Up-Skript direkt im HTML-Code der Seite und sparen dem Browser so ein wenig Zeit, da er keine externe JavaScript-Datei herunterladen muss.<\/p>\n<p>Ist das nicht m\u00f6glich, dann sollten wir das Skript in eine separate Datei auslagern und sofort laden.<\/p>\n<p>Zusammengefasst kann man also sagen: Ist ein Skript f\u00fcr die Funktionalit\u00e4t Deines \u201eabove the fold\u201c Contents unverzichtbar, dann solltest Du Dir das Aufschieben dieses Skripts sehr gut \u00fcberlegen.<\/p>\n<p>F\u00fcr alle Skripte, die nicht essentiell sind, gilt hingegen: Mit \u201eDefer\u201c und &#8222;Async&#8220; ist das Problem schnell behoben.<\/p>\n<h2 id='content-interaction-to-next-paint-inp'><strong>Interaction to Next Paint (INP)<\/strong><\/h2>\n<p>Interaction to Next Paint (INP) ist ein Messwert, der die allgemeine Reaktionszeit einer Seite misst und ab dem 12. M\u00e4rz 2024 First Input Delay ersetzen soll.<\/p>\n<p>INP misst die Reaktionszeit (qualifizierter) Nutzerinteraktionen, w\u00e4hrend ein User auf einer Seite ist. Der Wert zeigt die l\u00e4ngste Interaktion an und ignoriert dabei oft die Ausrei\u00dfer.<\/p>\n<p>Das bedeutet, dass INP sich auf alle Interaktionen konzentriert, w\u00e4hrend FID auf die erste Interaktion beschr\u00e4nkt ist. Dadurch ist INP eine verl\u00e4sslicherer Wert f\u00fcr die allgemeine Reaktionszeit.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6884 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/allgemeine-Reaktionszeit.png\" alt=\"allgemeine Reaktionszeit\" width=\"1000\" height=\"672\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/allgemeine-Reaktionszeit.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/allgemeine-Reaktionszeit-768x516.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p><strong>Welche Vorg\u00e4nge flie\u00dfen in INP ein?<\/strong><\/p>\n<ul>\n<li>Maus-Klicks<\/li>\n<li>Tippen \u00fcber einen Touchscreen<\/li>\n<li>Dr\u00fccken einer Taste auf der Tastatur (mechanisch oder auf dem Bildschirm)<\/li>\n<\/ul>\n<p><strong>Welche nicht?<\/strong><\/p>\n<p>Kontinuierliche Vorg\u00e4nge wie Scrollen oder Zoomen flie\u00dfen nicht in den INP-Wert ein.<\/p>\n<p>Im Hinblick auf Seitenelemente spielt f\u00fcr den INP-Wert alles, was klickbar ist, (unter anderem CTAs, Hamburger-, Akkordeon- und Dropdown-Men\u00fcs) eine Rolle.<\/p>\n<p>Auf unserer Homepage gibt es beispielsweise einige m\u00f6gliche Interaktionen, die den INP beeinflussen k\u00f6nnen.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6885 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/interaktionen-startseite.png\" alt=\"Interaktionsm\u00f6glichkeiten auf der Seobility Startseite\" width=\"800\" height=\"574\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/interaktionen-startseite.png 800w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/interaktionen-startseite-768x551.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Und das sogar, bevor man weiter nach unten gescrollt hat!<\/p>\n<p>Jeder Klick auf eines dieser Elemente kann den INP-Wert beeinflussen. Allerdings sind hier die \u00fcblichen Verd\u00e4chtigen h\u00f6chstwahrscheinlich das Dropdown-Men\u00fc in unserer Hauptnavigation und der \u201eBrauchst Du Hilfe?\u201d-Button rechts unten, \u00fcber den sich ein Popup mit unseren Kontaktdaten \u00f6ffnet.<\/p>\n<p>Bevor wir allerdings tiefer in dieses Thema eintauchen, sollten wir einen Blick auf den Wert werfen, den uns PageSpeed Insights anzeigt.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6886 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/inp-pagespeed-insights.png\" alt=\"inp-pagespeed-insights\" width=\"880\" height=\"475\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/inp-pagespeed-insights.png 880w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/inp-pagespeed-insights-768x415.png 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>Wie du siehst, hat unsere Homepage einen durchschnittlichen INP-Wert von 140 ms. Das gilt als guter Wert, obwohl er nicht weit weg von der 200ms-Marke liegt, bei der Google Verbesserungen empfiehlt.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6887 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Google-Verbesserungen-empfiehlt.png\" alt=\"Google Verbesserungen empfiehlt\" width=\"830\" height=\"193\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Google-Verbesserungen-empfiehlt.png 830w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Google-Verbesserungen-empfiehlt-768x179.png 768w\" sizes=\"(max-width: 830px) 100vw, 830px\" \/><\/p>\n<p><a href=\"https:\/\/web.dev\/inp\/\" target=\"_blank\" rel=\"noopener\">Google \u00e4u\u00dfert sich dazu wie folgt:<\/a><\/p>\n<blockquote><p>\u201eTo ensure you&#8217;re delivering user experiences with good responsiveness, a good threshold to measure is the 75th percentile of page loads recorded in the field, segmented across mobile and desktop devices:<\/p>\n<ul>\n<li>An INP below or at 200 milliseconds means that your page has good responsiveness.<\/li>\n<li>An INP above 200 milliseconds and below or at 500 milliseconds means that your page&#8217;s responsiveness needs improvement.<\/li>\n<li>An INP above 500 milliseconds means that your page has poor responsiveness.\u201d<\/li>\n<\/ul>\n<\/blockquote>\n<p>[<em>\u201eUm sicherzustellen, dass Du eine User Experience mit guter Reaktionszeit lieferst, ist ein guter Schwellenwert das 75. Perzentil der Seitenladevorg\u00e4nge, die im Feld aufgezeichnet wurden, segmentiert nach mobilen und Desktop-Ger\u00e4ten:<\/em><\/p>\n<ul>\n<li><em>Bei einem INP bei oder unter 200 Millisekunden hat Deine Seite eine gute Reaktionszeit. <\/em><\/li>\n<li><em>Bei einem INP \u00fcber 200 Millisekunden und bei oder unter 500 Millisekunden solltest Du die Reaktionszeit Deiner Seite verbessern.<\/em><\/li>\n<li><em>Bei einem INP \u00fcber 500 Millisekunden hat Deine Seite eine schlechte Reaktionszeit.\u201d<\/em>]<\/li>\n<\/ul>\n<p>Unser Wert ist also ganz anst\u00e4ndig, obwohl wir ihn wahrscheinlich im Blick behalten sollten.<\/p>\n<p><strong>Tipp:<\/strong> Der INP-Wert kann nicht in Form von Labdaten gemessen werden, weshalb Du ihn ausschlie\u00dflich unter den Felddaten findest. Wenn Du in den PageSpeed Insights keine Felddaten f\u00fcr Deine Website hast, r\u00e4t Google dazu, den Wert <a href=\"https:\/\/web.dev\/tbt\/\" target=\"_blank\" rel=\"noopener\">\u201cTotal Blocking Time (TBT)<\/a>\u201d heranzuziehen, da dieser in <a href=\"https:\/\/almanac.httparchive.org\/en\/2022\/performance#inp-and-tbt\" target=\"_blank\" rel=\"noopener\">engem Zusammenhang mit INP<\/a> steht.<\/p>\n<p>Die Total Blocking Time bezeichnet den Zeitraum, f\u00fcr den lange Ladezeiten (\u00fcber 50 ms) die Seite davon abhalten, auf Eingaben des Users zu reagieren. Der Wert sollte idealerweise unter 200 ms liegen.<\/p>\n<p>Du findest Deine TBT in den Labdaten der PageSpeed Insights.<\/p>\n<h3>Wie Du \u00fcber die TBT Ursachen f\u00fcr INP-Probleme finden kannst<\/h3>\n<p>Die PageSpeed Insights bieten Dir eine ganze Reihe an M\u00f6glichkeiten oder Diagnosen, \u00fcber die Du die Ursachen potenzieller INP-Probleme herausfinden kannst. Wir bereits erw\u00e4hnt, wird der INP-Wert nicht in den Labdaten angezeigt, weshalb Google zur Nutzung des TBT r\u00e4t. Dieser steht in engem Zusammenhang mit Interaction to Next Paint.<\/p>\n<p>\u00dcber dem Abschnitt \u201eEmpfehlungen\u201d im PageSpeed Insights-Report kannst Du im Bereich \u201ePr\u00fcfungen anzeigen, die f\u00fcr folgende Messwerte relevant sind\u201d den TBT-Wert ausw\u00e4hlen:<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6888 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/empfehlungen-filtern.png\" alt=\"Pagespeed Insights Empfehlungen filtern\" width=\"857\" height=\"539\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/empfehlungen-filtern.png 857w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/empfehlungen-filtern-768x483.png 768w\" sizes=\"(max-width: 857px) 100vw, 857px\" \/><\/p>\n<p>Nach dem Anklicken werden Dir die wichtigsten Empfehlungen und Diagnosen f\u00fcr Deine Website angezeigt, um diesen Messwert zu verbessern.<\/p>\n<p>Diese Faktoren beeintr\u00e4chtigen Deine INP-Zeit wahrscheinlich am st\u00e4rksten. Deshalb ist es immer gut, sich damit auseinanderzusetzen.<\/p>\n<p>Man sollte allerdings nicht vergessen, dass TBT und INP zwar stark korrelieren, aber trotzdem nicht identisch sind. In manchen F\u00e4llen k\u00f6nnen auch andere Probleme mit Deiner Website hinter einem schlechten INP-Wert stecken. Deshalb solltest Du bei der Optimierung Deiner Website-Performance immer einen ganzheitlichen Blick einnehmen.<\/p>\n<h3>Die drei Interaktionsphasen<\/h3>\n<p>Um zu verstehen, was hinter einem schlechten INP-Wert stecken kann, sollte man die drei Phasen einer Interaktion kennen.<\/p>\n<p>Bei diesen handelt es sich um:<\/p>\n<p><strong>Input Delay<\/strong><\/p>\n<p>Input Delay bezeichnet die Zeit zwischen dem Interaktionsbeginn auf einer Seite (z.B. das Anklicken eines Buttons) und dem Start eines Event Callbacks. Event Callbacks sind Funktionen, die nach einem bestimmten Vorgang ausgef\u00fchrt werden. Wenn eine Seite zum Beispiel einen Button hat, der ein Popup \u00f6ffnet, sagt das St\u00fcck Code dem Browser, dass er nach Klicken des Buttons das Popup anzeigen soll. Dies bezeichnet man als Callback-Funktion.<\/p>\n<p>Input Delay bezeichnet also die Verz\u00f6gerung zwischen einem Vorgang wie einem Mausklick und dem <u>Beginn<\/u> des Ausf\u00fchrens der dazugeh\u00f6rigen Funktion.<\/p>\n<p><strong>Verarbeitungszeit<\/strong><\/p>\n<p>Die Verarbeitungszeit ist die Zeit, die ben\u00f6tigt wird, bis ein Event Callback abgeschlossen ist. Es ist also die Zeit zwischen Beginn und Ende der Funktion. In unserem oberen Beispiel mit dem Popup kann es sein, dass dieser Zeitraum nur Millisekunden umfasst. Allerdings k\u00f6nnen ressourcenintensive Prozesse oder M\u00e4ngel beim Programmieren sehr viel l\u00e4ngere Verarbeitungszeiten zur Folge haben.<\/p>\n<p><strong>Anzeigeverz\u00f6gerung<\/strong><\/p>\n<p>Die Verz\u00f6gerung bei der Anzeige ist die Zeit, die der Browser ben\u00f6tigt, um \u00c4nderungen auf dem Benutzerbildschirm nach Abschluss der Verarbeitung anzuzeigen.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6889 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/interaktion-phasen.png\" alt=\"die drei Phasen einer Interaktion\" width=\"800\" height=\"1200\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/interaktion-phasen.png 800w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/interaktion-phasen-768x1152.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Die Gesamtdauer dieser drei Phasen flie\u00dft in den INP-Wert ein. Nach Anpassung der Ausrei\u00dfer z\u00e4hlt schlie\u00dflich der l\u00e4ngste Zeitraum.<\/p>\n<p>Wenn also die meisten Deiner interaktiven Seitenelemente blitzschnell sind, kann Dein Wert trotzdem schlecht sein, wenn es ein Problem mit einem einzigen Element gibt und dieses regelm\u00e4\u00dfig von Usern genutzt wird.<\/p>\n<p>Wie auch bei FID sind hohe INP-Werte oftmals das Resultat von JavaScript-Problemen, insbesondere von Render-Blocking.<\/p>\n<p>Die f\u00fcr FID vorgeschlagenen Optimierungen sind daher auch f\u00fcr die Behebung von INP Problemen essentiell.<\/p>\n<p>INP misst allerdings alle Interaktionen auf Deiner Seite und nicht nur die erste. Und zus\u00e4tzlich misst INP die Verarbeitungszeit jedes Event Callbacks sowie die Verz\u00f6gerungen beim Anzeigen von Ver\u00e4nderungen auf dem Benutzerbildschirm, w\u00e4hrend FID nur auf den Input Delay (also die 1. Phase der Interaktion) beschr\u00e4nkt ist.<\/p>\n<p>Zwei weitere Ma\u00dfnahmen, die Du also in Betracht ziehen solltest, ist die Optimierung von Event Callbacks und die Minimierung von Verz\u00f6gerungen bei der Anzeige. Mit manchen Tipps aus dem FID-Abschnitt kannst Du auch Deine Verarbeitungszeiten optimieren, aber sie werden \u00fcberwiegend den Input Delay-Wert verbessern.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6891 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/dev-Artikel-ueber-INP.png\" alt=\"dev Artikel \u00fcber INP\" width=\"806\" height=\"363\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/dev-Artikel-ueber-INP.png 806w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/dev-Artikel-ueber-INP-768x346.png 768w\" sizes=\"(max-width: 806px) 100vw, 806px\" \/><br \/>\n<small>Bildquelle: <a href=\"https:\/\/web.dev\/inp\/\" target=\"_blank\" rel=\"noopener\">web.dev Artikel \u00fcber INP<\/a><\/small><\/p>\n<h3>Tipps zur Verbesserung der Verarbeitungszeit und Minimierung von Anzeigeverz\u00f6gerungen<\/h3>\n<p>Du kannst ein paar relativ simple Ma\u00dfnahmen ergreifen, um Deine Verarbeitungszeit und Anzeigeverz\u00f6gerung zu verk\u00fcrzen. Und das Gute daran ist, dass diese Ma\u00dfnahmen auch andere PageSpeed-Messwerte verbessern k\u00f6nnen.<\/p>\n<p>Ohne zu technisch zu werden und mit Fachbegriffen um uns zu werfen, haben wir hier ein paar simple Tipps f\u00fcr Dich:<\/p>\n<h4><strong>Entferne unn\u00f6tige Inhalte\/Features\/Plugins\u00a0 <\/strong><\/h4>\n<p>Unn\u00f6tige Inhalte, Bilder, Styles und Animation sowie aktive, aber nicht ben\u00f6tigte Plug-ins k\u00f6nnen die Verz\u00f6gerung bei der Anzeige und Deine allgemeinen Ladezeiten in die H\u00f6he schie\u00dfen lassen. Hierdurch werden Deiner Seite mehr Elemente als n\u00f6tig hinzugef\u00fcgt, was sie umfangreicher macht. Dadurch brauchen die Seite oder Ver\u00e4nderungen darauf mehr Zeit, um zu laden. Generell gilt: Je weniger Elemente Deine Seite hat und je kleiner Deine Seite ist, desto schneller k\u00f6nnen Ver\u00e4nderungen angezeigt werden.<\/p>\n<p>Es kann also von gro\u00dfem Nutzen sein, unn\u00f6tige Elemente, Animationen, Bilder oder andere Inhalte von Deiner Seite zu entfernen, sofern diese keine gro\u00dfe Rolle f\u00fcr das Design oder die Optimierung Deiner Website spielen.<\/p>\n<p>Man muss immer abw\u00e4gen und Kompromisse eingehen. Wahrscheinlich ist es keine allzu gute Idee, alle Features Deines gew\u00e4hlten Themes zu entfernen oder zu deaktivieren oder Plugins zu l\u00f6schen, die Deine Seite m\u00f6glicherweise braucht. Die meisten WordPress-Websites haben allerdings zumindest ein paar Elemente und Features, die die Website unn\u00f6tigerweise langsamer machen.<\/p>\n<h4>Nutze wo m\u00f6glich Lazy Loading und Pagination (unter Ber\u00fccksichtigung der UX)<\/h4>\n<p>Lazy Loading hei\u00dft, dass nicht alles sofort geladen wird, sondern nur bestimmte Inhalte, wenn diese auch wirklich vom User gebraucht werden. Das verringert den initialen Ladeaufwand und Seiten k\u00f6nnen schneller angezeigt werden.<\/p>\n<p>Dieses Verfahren wird h\u00e4ufig beim Laden von Bildern angewandt, da die Dateigr\u00f6\u00dfe im Vergleich zum Code recht gro\u00df ist.<\/p>\n<p>Lazy Loading l\u00e4sst sich bei den meisten CMS ziemlich einfach implementieren. Such Dir ganz einfach ein seri\u00f6ses <a href=\"https:\/\/quadlayers.com\/best-lazy-load-plugins-for-wordpress\/\" target=\"_blank\" rel=\"noopener\">Lazy-Loading-Plugin<\/a> und nach ein paar simplen Konfigurationen kannst Du Deine Bilder \u00fcber das Lazy-Loading-Verfahren laden.<\/p>\n<p><strong>Tipp<\/strong>: Wenn Du unsicher bist, wende Lazy Loading nur auf Inhalte an, die nicht relevant f\u00fcr Deine SEO-Strategie sind. Lass zum Beispiel die Finger von Texten auf Deiner Homepage, da ansonsten Crawling und Indexierung durch Suchmaschinen beeintr\u00e4chtigt werden k\u00f6nnen.<\/p>\n<p>Mithilfe von Wasserfalldiagrammen, wie z.B. in GTMetrics, kannst Du feststellen, welche Ressourcen den gr\u00f6\u00dften Ladeaufwand verursachen und pr\u00fcfen, ob hier Lazy-Loading Sinn machen k\u00f6nnte.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6893 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Sinn-machen-koennte.png\" alt=\"Sinn machen k\u00f6nnte\" width=\"1289\" height=\"749\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Sinn-machen-koennte.png 1289w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Sinn-machen-koennte-768x446.png 768w\" sizes=\"(max-width: 1289px) 100vw, 1289px\" \/><\/p>\n<h4><strong>Minimiere JavaScript-Dateien<\/strong><\/h4>\n<p>Generell geh\u00f6rt das Minimieren von JavaScript zu den Best Practices und kann mit den meisten Page-Speed-\/Caching-Plugins in WordPress mit einem Mausklick erledigt werden. So werden die Dateien schlanker, was dazu f\u00fchren kann, dass diese im Vergleich zu JavaScript-Dateien, die nicht verkleinert sind, (ein bisschen) schneller verarbeitet werden k\u00f6nnen.<\/p>\n<p>Es ist eher selten, dass solche Plugins Schaden auf Deiner Website anrichten. Wenn das aber der Fall ist, kannst Du ein anderes Plugin ausprobieren, oder herausfinden, welches Script Probleme bei der Verkleinerung ausl\u00f6st, und es ausschlie\u00dfen.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6894 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Probleme-bei-der-Verkleinerung-ausloest.png\" alt=\"Probleme bei der Verkleinerung ausl\u00f6st\" width=\"1168\" height=\"1201\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Probleme-bei-der-Verkleinerung-ausloest.png 1168w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Probleme-bei-der-Verkleinerung-ausloest-768x790.png 768w\" sizes=\"(max-width: 1168px) 100vw, 1168px\" \/><\/p>\n<h4>Verwende Brotli- oder GZIP-Komprimierung<\/h4>\n<p>Die Komprimierung Deiner Seiten kann ebenfalls dazu beitragen, die Ausf\u00fchrungszeiten von Javascript und die Seitengeschwindigkeit im Allgemeinen zu verbessern. Mit (den meisten) Page Speed Plugins oder durch ein paar manuelle \u00c4nderungen kann man das relativ einfach umsetzen. Hier findest Du eine kurze Anleitung zur <a href=\"https:\/\/antonyagnel.com\/enable-brotli-compression\/\" target=\"_blank\" rel=\"noopener\">Brotli-Komprimierung f\u00fcr WordPress<\/a> und hier eine zur <a href=\"https:\/\/kinsta.com\/de\/blog\/gzip-komprimierung-aktivieren\/\" target=\"_blank\" rel=\"noopener\">GZIP-Komprimierung<\/a>.<\/p>\n<h4>Verwende leichtgewichtige und gut-optimierte Themes und Plugins<\/h4>\n<p>Auch wenn Dir das bei aktuellen INP-Problemen nicht weiterhelfen wird, solltest Du diesen Punkt beachten, wenn Du ein neues Plugin installierst oder ein anderes Theme ausw\u00e4hlst.<\/p>\n<p>W\u00e4hle bekannte Themes und Plugins mit guten Bewertungen. Pr\u00fcfe, wenn m\u00f6glich, welchen Einfluss die Nutzung auf den PageSpeed haben kann. Daf\u00fcr kannst Du vor Aktivierung eines Plug-ins oder \u00c4nderung eines Themes einen PageSpeed Insights Test machen. So wei\u00dft Du, ob es Auswirkungen auf die Performance Deiner Seite geben kann, bevor Du die \u00c4nderungen vornimmst.<\/p>\n<p>Durch die bewusste Wahl eines leichtgewichtigen Plug-ins und Themes mit gut optimiertem JavaScript-Code sorgst Du daf\u00fcr, dass Deine Website schnell l\u00e4uft und reagiert.<\/p>\n<p>Du bist Dir bei der Wahl Deines Themes unsicher? In diesem Beitrag von WP-Rocket findest Du <a href=\"https:\/\/wp-rocket.me\/blog\/fastest-wordpress-themes\/\" target=\"_blank\" rel=\"noopener\">zehn der schnellsten WordPress-Themes, die es derzeit am Markt gibt<\/a>.<\/p>\n<h2 id='content-largest-contentful-paint-lcp'><strong>Largest Contentful Paint (LCP)<\/strong><\/h2>\n<p>Als N\u00e4chstes sehen wir uns den zweiten Messwert der Core Web Vitals an: <a href=\"https:\/\/web.dev\/lcp\/\" target=\"_blank\" rel=\"noopener\">Largest Contentful Paint<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6895 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Largest-Contentful-Paint.png\" alt=\"Largest Contentful Paint\" width=\"1000\" height=\"671\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Largest-Contentful-Paint.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Largest-Contentful-Paint-768x515.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Die gute Nachricht ist, dass diese Kennzahl einfacher zu verstehen ist. Largest Contentful Paint misst, wie lange es dauert, bis das gr\u00f6\u00dfte \u201c<a href=\"https:\/\/www.seobility.net\/de\/wiki\/Above_the_fold\" target=\"_blank\" rel=\"noopener\">above the fold<\/a>\u201d Element komplett gerendert ist.<\/p>\n<p>Zu den Elementen, die unter LCP fallen k\u00f6nnen, geh\u00f6ren:<\/p>\n<ul>\n<li>Bilder<\/li>\n<li>Videos<\/li>\n<li>Container mit Hintergrundbildern<\/li>\n<li>Textelemente, wie \u00dcberschriften, Abs\u00e4tze etc.<\/li>\n<\/ul>\n<p>Als LCP wird jeweils das Element betrachtet, das above the fold den meisten Platz einnimmt.<\/p>\n<p>In unserem SEO Audit Guide beispielsweise ist die \u00dcberschrift das LCP Element\u2026<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6896 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/seo-audit-lcp.png\" alt=\"LCP Element unseres SEO Audit Blogartikels\" width=\"389\" height=\"847\" \/><\/p>\n<p>\u2026 w\u00e4hrend in unserem Meta Description Guide das Beitragsbild mehr Platz einnimmt, da die \u00dcberschrift k\u00fcrzer ausf\u00e4llt.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6897 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/meta-description-lcp.png\" alt=\"LCP-Element unseres Meta Description Blogartikels\" width=\"393\" height=\"843\" \/><\/p>\n<p>Keine Sorge, Du musst hier nicht selbst mit dem Lineal nachmessen.<\/p>\n<p>Im Gegensatz zu FID erscheint Largest Contentful Paint sowohl in den Feld- als auch in den Labdaten.<\/p>\n<p>Gib einfach eine Seite in Googles PageSpeed Insights ein und Dir wird angezeigt, welches das Largest Contentful Paint-Element ist.<\/p>\n<p><em>PageSpeed Insights &gt; Diagnose &gt; Largest Contentful Paint-Element<\/em><\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6899 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lcp-element-hinweis-1.png\" alt=\"PageSpeed Insights zeigt das LCP-Element an\" width=\"841\" height=\"428\" \/><\/p>\n<p>Die Messung der LCP-Dauer beginnt mit dem Zeitpunkt, an dem ein Nutzer Deine URL eingibt, und endet, sobald das LCP-Element komplett geladen ist.<\/p>\n<p>Sehen wir uns das einmal f\u00fcr unseren Meta Description Blogartikel an.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6900 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lcp-messwert.png\" alt=\"LCP Wert in Pagespeed Insights\" width=\"855\" height=\"227\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lcp-messwert.png 855w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lcp-messwert-768x204.png 768w\" sizes=\"(max-width: 855px) 100vw, 855px\" \/><\/p>\n<p>Das sieht nicht gut aus! Mit einem Wert von 8,1 Sekunden f\u00fcr Largest Contentful Paint f\u00e4llt diese Seite ganz klar in den roten Bereich.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6901 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Largest-Contentful-Paint-faellt-diese.png\" alt=\"Largest Contentful Paint f\u00e4llt diese\" width=\"578\" height=\"444\" \/><\/p>\n<p>Hier kannst Du sehen, wie Google Seiten einstuft:<\/p>\n<ol>\n<li>Ein LCP-Wert unter 2,5 Sekunden gilt als gut<\/li>\n<li>Ein LCP-Wert zwischen 2,5 und 4 Sekunden f\u00e4llt unter verbesserungsw\u00fcrdig<\/li>\n<li>Ein LCP-Wert \u00fcber 4 Sekunden ist schlecht<\/li>\n<\/ol>\n<p>Doch diese Auswertung allein ist noch kein Grund zur Sorge\u2026<\/p>\n<p>Vielleicht hast Du bereits bemerkt, dass es sich hier um Labdaten handelt? Wie schon erw\u00e4hnt, wird LCP jedoch auch basierend auf realen Nutzerdaten angegeben.<\/p>\n<p>Wie also sehen die LCP-Felddaten aus?<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6902 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lcp-felddaten.png\" alt=\"LCP Wert in den Felddaten\" width=\"852\" height=\"246\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lcp-felddaten.png 852w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lcp-felddaten-768x222.png 768w\" sizes=\"(max-width: 852px) 100vw, 852px\" \/><\/p>\n<p>Dieser Wert ist um einiges besser. Um auf der sicheren Seite zu sein, sollten wir den LCP-Wert aber optimieren.<\/p>\n<h3><strong>So verbesserst Du den Largest Contentful Paint<\/strong><\/h3>\n<p>Wie k\u00f6nnen wir also den LCP-Wert verbessern? Die Antwort darauf kannst Du vielleicht schon erraten: Ein wichtiger Schritt ist die Optimierung Deiner Seitenladegeschwindigkeit. In unserem <a href=\"https:\/\/www.seobility.net\/de\/blog\/page-speed-optimierung\/\" target=\"_blank\" rel=\"noopener\">Leitfaden zur Page Speed Optimierung<\/a> findest Du alles, was Du dazu wissen musst.<\/p>\n<p>In diesem Abschnitt \u00fcber die Verbesserung Deines LCP-Wertes m\u00f6chten wir Dir stattdessen zeigen, wie Du langsame Seiten mit Seobility findest, und uns einige Faktoren ansehen, die Deinen LCP-Wert beeinflussen.<\/p>\n<h3><strong>Langsame Seiten mit Seobility finden<\/strong><\/h3>\n<p>Seobility misst f\u00fcr jede Seite Deiner Website die Server-Antwortzeit, welche ein wichtiger Teil der gesamten Ladedauer ist.<\/p>\n<p>Dabei bewerten wir:<\/p>\n<ul>\n<li>eine Antwortzeit unter 0,5 Sekunden als gut,<\/li>\n<li>eine Antwortzeit zwischen 0,5 und 1 Sekunde als optimierungsbed\u00fcrftig,<\/li>\n<li>und eine Antwortzeit \u00fcber 1 Sekunde als langsam.<\/li>\n<\/ul>\n<p>Nat\u00fcrlich gilt zudem: Je schneller, desto besser!<\/p>\n<p>Um langsame Seiten auf Deiner Website ausfindig zu machen, ben\u00f6tigst Du einen Seobility Account. Du hast Dich noch nicht registriert? Dann empfehlen wir Dir, unseren <a href=\"https:\/\/www.seobility.net\/de\/preise\/\" target=\"_blank\" rel=\"noopener\">Premium Account 14 Tage kostenlos zu testen<\/a>. Damit kannst Du bis zu 25.000 Seiten crawlen.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6904 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/seobility-pricing.png\" alt=\"Seobility 14 Tage kostenlos testen\" width=\"1057\" height=\"730\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/seobility-pricing.png 1057w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/seobility-pricing-768x530.png 768w\" sizes=\"(max-width: 1057px) 100vw, 1057px\" \/><\/p>\n<p>Der n\u00e4chste Schritt ist, ein neues Projekt anzulegen und das Crawling zu starten. Klicke dazu einfach auf den Button \u201eProjekt anlegen\u201c im Dashboard. Gib anschlie\u00dfend die URL ein, mit der Du beginnen m\u00f6chtest, lege einen Projektnamen fest und klicke auf \u201eProjekt anlegen und Crawling beginnen\u201c.<\/p>\n<p><em>Seobility &gt; Dashboard &gt; Neues Projekt<\/em><\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6905 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Der-Seobility-Crawler-macht.png\" alt=\"Der Seobility Crawler macht\" width=\"1080\" height=\"664\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Der-Seobility-Crawler-macht.png 1080w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Der-Seobility-Crawler-macht-768x472.png 768w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/p>\n<p>Der Seobility Crawler macht sich nun auf Deiner Website an die Arbeit. Das Ergebnis zur Antwortzeit findest Du im \u201eTechnik &amp; Meta\u201c Bereich unter \u201eOnpage\u201c, in der Analyse \u201eVerteilung der Antwortzeiten\u201c.<\/p>\n<p><em>Seobility &gt; Dashboard &gt; Onpage &gt; Technik &amp; Meta &gt; Verteilung der Antwortzeiten<\/em><\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6906 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/antwortzeiten-verteilung.png\" alt=\"Verteilung der Antwortzeiten\" width=\"526\" height=\"478\" \/><\/p>\n<p>Im obigen Beispiel sehen wir, dass 6 Seiten als langsam und 16 als mittelm\u00e4\u00dfig eingestuft werden. Mit einem Klick auf die Zahl gelangen wir zu einer Auflistung der langsamen Seiten, sowie:<\/p>\n<ol>\n<li>ihrer Antwortzeit, und<\/li>\n<li>dem Verh\u00e4ltnis ihrer Antwortzeit zum Durchschnitt der Website<\/li>\n<\/ol>\n<p>In unserem Fall sind die gefundenen Seiten etwa 5-10-mal langsamer als der Durchschnitt aller Seiten der Website. Wir sollten sie uns darum genauer ansehen und die Ursache f\u00fcr das schlechte Ergebnis finden.<\/p>\n<h3><strong>Zwei Tipps f\u00fcr die Optimierung des Largest Contentful Paint<\/strong><\/h3>\n<p>Bei der Optimierung des Largest Contentful Paint haben wir den gro\u00dfen Vorteil, dass wir genau wissen, welches das LCP-Element ist. Somit k\u00f6nnen wir uns darauf konzentrieren, den Ladevorgang f\u00fcr dieses einzelne Element zu optimieren.<\/p>\n<p>Genau genommen k\u00f6nnten wir das Largest Contentful Paint Element sogar austauschen. Ist das LCP-Element zum Beispiel das Beitragsbild, dann k\u00f6nnten wir die Gr\u00f6\u00dfe der \u00dcberschrift anpassen. Sobald der Textblock mehr Platz einnimmt, wird er das neue LCP-Element.<\/p>\n<p>Grunds\u00e4tzlich gilt jedoch, dass wir neben solchen Tricks und \u201cHacks\u201d haupts\u00e4chlich daran arbeiten sollten, dass alles, was sich \u201eabove the fold\u201c befindet, so schnell wie m\u00f6glich geladen wird.<\/p>\n<p>Hier sind zwei Tipps:<\/p>\n<h4><strong>1. Binde \u201eCritical Path\u201c CSS direkt im HTML-Dokument ein + lade nicht essenzielle CSS asynchron<\/strong><\/h4>\n<p>Wie JavaScript blockiert auch CSS grunds\u00e4tzlich das Rendering.<\/p>\n<p>Verlinkst Du also regul\u00e4r im Head-Element zu einer CSS-Datei, dann muss ein Browser die Stylesheets erst herunterladen und verarbeiten, ehe er Inhalte anzeigen kann.<\/p>\n<pre>&lt;head&gt;\r\n&lt;link rel=\"stylesheet\" href=\"yourstylesheet.css\"&gt;\r\n&lt;\/head&gt;\r\n<\/pre>\n<p>Dieser Vorgang beeinflusst nat\u00fcrlich den FCP-Wert, doch zum Gl\u00fcck kannst Du dieses Problem einfach umgehen.<\/p>\n<p>Dazu m\u00fcssen wir den Ladevorgang folgenderma\u00dfen aufteilen:<\/p>\n<ol>\n<li>Lade die Stylesheets, die f\u00fcr das Rendering des \u201eabove the fold\u201c Inhalts wichtig sind, als Inline CSS.<\/li>\n<li>Lade die restlichen Stylesheets asynchron und vermeide damit, dass das Rendering blockiert wird.<\/li>\n<\/ol>\n<p>Als Erstes m\u00fcssen wir bestimmen, welche CSS-Regeln wir f\u00fcr den above the fold Inhalt ben\u00f6tigen. Praktischerweise gibt es ein Tool, das uns diese Arbeit abnimmt.<\/p>\n<ol>\n<li>Gehe auf https:\/\/www.sitelocity.com\/critical-path-css-generator<\/li>\n<li>Gib die URL ein, f\u00fcr die Du Critical Path CSS erstellen willst<\/li>\n<li>Klicke auf \u201eGenerate Critical Path CSS\u201c<\/li>\n<li>Kopiere den CSS Inhalt des Kastens<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3625 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/critical-path-css-generator.png\" alt=\"Critical Path CSS Generator\" width=\"905\" height=\"676\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/critical-path-css-generator.png 905w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/critical-path-css-generator-768x574.png 768w\" sizes=\"(max-width: 905px) 100vw, 905px\" \/><\/p>\n<p>F\u00fcge das Critical Path CSS dann im HTML Head-Element Deiner Seite ein. Nun werden alle CSS-Regeln sofort geladen, die ben\u00f6tigt werden, um den \u201eabove the fold\u201c Inhalt anzuzeigen.<\/p>\n<p>Anschlie\u00dfend musst Du den Link zum CSS-Stylesheet durch folgenden Code ersetzen:<\/p>\n<pre>&lt;link rel=\"preload\" href=\"yourstylesheet.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\"&gt;\r\n&lt;noscript&gt;&lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;&lt;\/noscript&gt;\r\n<\/pre>\n<p>Damit wird nicht-essentielles CSS asynchron geladen. Au\u00dferdem enth\u00e4lt der &lt;noscript&gt;-Tag eine Alternative f\u00fcr Browser, die JavaScript nicht ausf\u00fchren.<\/p>\n<p><strong>Beachte:<\/strong> Die meisten guten <a href=\"https:\/\/www.seobility.net\/de\/wiki\/Caching\" target=\"_blank\" rel=\"noopener\">Caching <\/a>Plugins \u00fcbernehmen dies f\u00fcr Dich.<\/p>\n<p>Falls Du zum Beispiel <a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noopener\">WP Rocket<\/a> nutzt, musst Du lediglich \u201eOptimize CSS delivery\u201c im Abschnitt \u201eFile Optimization\u201c ausw\u00e4hlen\u2026<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3626 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/optimize-css-delivery.png\" alt=\"WP Rocket\" width=\"1024\" height=\"617\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/optimize-css-delivery.png 1024w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/optimize-css-delivery-768x463.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>\u2026und damit hast Du die Arbeit erledigt.<\/p>\n<p>Du willst mehr \u00fcber die manuelle L\u00f6sung lesen? <a href=\"https:\/\/web.dev\/defer-non-critical-css\/\" target=\"_blank\" rel=\"noopener\">Hier<\/a> findest Du einen web.dev Guide von Google.<\/p>\n<h4><strong>2. Optimiere Deine Beitragsbilder<\/strong><\/h4>\n<p>Auf Blogseiten ist das Beitragsbild in der Regel das LCP-Element, weswegen wir sicherstellen sollten, dass dieses so schnell wie m\u00f6glich l\u00e4dt.<\/p>\n<p>Hier sind einige Ansatzpunkte f\u00fcr die Optimierung Deiner Bilder mit Links zu weiteren Informationen und Tools:<\/p>\n<ol>\n<li>Verwende srcset, um alternative Bilder passend zur Viewport-Gr\u00f6\u00dfe anzuzeigen (<a href=\"https:\/\/www.mediaevent.de\/html\/srcset.html\" target=\"_blank\" rel=\"noopener\">Anleitung<\/a>)<\/li>\n<li>Komprimiere Deine Bilder (<a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noopener\">imagify<\/a> ist ideal f\u00fcr WordPress)<\/li>\n<li>M\u00f6glicherweise kommt f\u00fcr Dich das WebP-Format in Betracht, das Du zum Beispiel mit Imagify erstellen kannst (hier erf\u00e4hrst Du, <a href=\"https:\/\/web.dev\/serve-images-webp\/\" target=\"_blank\" rel=\"noopener\">was es genau ist<\/a>)<\/li>\n<li>Nutze ein <a href=\"https:\/\/www.seobility.net\/de\/wiki\/content-delivery-network-cdn\/\" target=\"_blank\" rel=\"noopener\">CDN<\/a>, um Deine Bilder auszuliefern (<a href=\"https:\/\/web.dev\/image-cdns\/\" target=\"_blank\" rel=\"noopener\">web.dev Guide<\/a>)<\/li>\n<\/ol>\n<h2 id='content-cumulative-layout-shift-cls'><strong>Cumulative Layout Shift (CLS)<\/strong><\/h2>\n<p><a href=\"https:\/\/web.dev\/cls\/\" target=\"_blank\" rel=\"noopener\">Cumulative Layout Shift<\/a> misst die Layout-Stabilit\u00e4t einer Webseite. Jedes Mal, wenn sich ein Element auf einer Seite unbeabsichtigt (also nicht durch eine Aktion des Nutzers bedingt) bewegt, erh\u00f6ht dies den CLS-Wert.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3596 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cumulative-layout-shift-seobility.png\" alt=\"cumulative layout shift\" width=\"1000\" height=\"681\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cumulative-layout-shift-seobility.png 1000w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cumulative-layout-shift-seobility-768x523.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Layout Shifts k\u00f6nnen f\u00fcr Nutzer \u00e4u\u00dferst frustrierend sein.<\/p>\n<p>Der folgende Mitschnitt zeigt die Startseite einer schottischen Zeitung w\u00e4hrend eines 5-sek\u00fcndigen Ladevorgangs.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-29454-2\" width=\"640\" height=\"338\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls.webm?_=2\" \/><a href=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls.webm\">https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls.webm<\/a><\/video><\/div>\n<p>&nbsp;<\/p>\n<p>Dir ist sicher nicht entgangen, wie die Navigation nach oben und unten springt, w\u00e4hrend die Werbeanzeigen geladen werden.<\/p>\n<p>Diese Einzelbilder des Ladevorgangs zeigen deutlich, wie sich das Layout immer wieder ver\u00e4ndert, ehe wir eine stabile Version zu sehen bekommen.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3627 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/layout-verschiebung.png\" alt=\"Layout Verschiebung\" width=\"751\" height=\"430\" \/><\/p>\n<p>Im letzten Bild nimmt eine Werbeanzeige die Position ein, an der zu Anfang die Navigation zu sehen war. Was also passiert, wenn Nutzer die Navigation anklicken, w\u00e4hrend sich das Layout noch verschiebt? Genau, mit gro\u00dfer Wahrscheinlichkeit klicken sie stattdessen auf die Anzeige und gelangen zu einer anderen Seite!<\/p>\n<p>Dieses Beispiel macht deutlich, wie \u00e4rgerlich Layout Shifts f\u00fcr Nutzer sind. Aus diesem Grund will Google, dass Du sie weitestgehend vermeidest.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-3249 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls-google.png\" alt=\"cumulative layout shift\" width=\"817\" height=\"233\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls-google.png 817w, https:\/\/www.seobility.net\/wp-content\/uploads\/2020\/11\/cls-google-768x219.png 768w\" sizes=\"(max-width: 817px) 100vw, 817px\" \/><\/p>\n<p>Die genaue Berechnung des CLS-Werts einer Seite ist kompliziert und f\u00fcr Dich nicht unbedingt relevant, weswegen wir das Thema an dieser Stelle nicht n\u00e4her behandeln. Falls Du trotzdem mehr dar\u00fcber wissen m\u00f6chtest, <a href=\"https:\/\/web.dev\/cls\/#layout-shift-score\" target=\"_blank\" rel=\"noopener\">findest Du hier alle Details<\/a>.<\/p>\n<p>Uns reicht im Moment zu wissen, dass wir einen CLS-Wert unter 0,1 erzielen wollen.<\/p>\n<h3>Wo siehst Du den CLS-Wert Deiner Seite?<\/h3>\n<p>Cumulative Layout Shift kann sowohl in der Theorie wie auch basierend auf echten Nutzerdaten gemessen werden und erscheint daher in den Lab- und Felddaten, wenn Du eine Seite in den PageSpeed Insights pr\u00fcfst.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6911 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/cls-felddaten.png\" alt=\"CLS in den Felddaten\" width=\"882\" height=\"477\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/cls-felddaten.png 882w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/cls-felddaten-768x415.png 768w\" sizes=\"(max-width: 882px) 100vw, 882px\" \/><\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6912 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/cls-labdaten.png\" alt=\"CLS in den Labdaten\" width=\"880\" height=\"789\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/cls-labdaten.png 880w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/cls-labdaten-768x689.png 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/p>\n<h3>Welche Ursachen haben Layout Shifts? (Und wie korrigiert man sie?)<\/h3>\n<p>F\u00fcr Layout Shifts gibt es unterschiedliche Gr\u00fcnde. Auf die wichtigsten davon gehen wir weiter unten ein.<\/p>\n<p>Die gute Nachricht ist, dass Dir Google genau anzeigt, welche Seitenelemente zum CLS-Wert beitragen.<\/p>\n<p>Wenn Du Deine Seite in den PageSpeed Insights pr\u00fcfst, findest Du dort unter Diagnose einen Abschnitt namens \u201eUmfangreiche Layoutverschiebungen vermeiden\u201c.<\/p>\n<p>F\u00fcr die Seobility Startseite listet Google drei Elemente mit Optimierungsbedarf auf:<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6913 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/cls-elemente.png\" alt=\"Elemente die zum CLS beitragen\" width=\"864\" height=\"669\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/cls-elemente.png 864w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/cls-elemente-768x595.png 768w\" sizes=\"(max-width: 864px) 100vw, 864px\" \/><\/p>\n<p>Unser CLS ist sehr niedrig, aber das ist nicht immer der Fall. Zu den h\u00e4ufigsten Gr\u00fcnden f\u00fcr einen hohen CLS geh\u00f6ren:<\/p>\n<ul>\n<li>Dynamisch eingef\u00fcgte Inhalte wie Werbung oder iframes<\/li>\n<li>Animationen<\/li>\n<li>Laden von Web-Fonts<\/li>\n<li>Banner, Cookie-Benachrichtigungen und Popups<\/li>\n<li>Bilder ohne width\/height Attribute<\/li>\n<\/ul>\n<p>Es kann quasi alles sein, was zur Folge hat, dass sich das Layout bewegt, nachdem es erstmals angezeigt wurde. Wir werden uns ein paar davon im folgenden Abschnitt etwas genauer ansehen.<\/p>\n<h4><strong>1. Stelle sicher, dass Texte w\u00e4hrend des Webfont-Ladevorgangs sichtbar bleiben<\/strong><\/h4>\n<p>Zahlreiche Websites einschlie\u00dflich unserer verwenden individuelle Schriften. Google bietet zum Beispiel <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\">eine gro\u00dfe Auswahl an Schriften<\/a>, mit denen Websites nicht nur ansprechender gestaltet werden k\u00f6nnen, sondern auch die Lesbarkeit verbessert werden kann.<\/p>\n<p>Das Problem dabei: Diese speziellen Schriften m\u00fcssen erst heruntergeladen werden, ehe ein Browser sie anzeigen kann.<\/p>\n<p>Bis dieser Vorgang abgeschlossen ist:<\/p>\n<ol>\n<li>sehen Nutzer keinen Text<\/li>\n<li>wei\u00df der Browser nicht, wie viel Platz die Textelemente einnehmen werden, was beim Laden zu Layout Shifts f\u00fchren kann.<\/li>\n<\/ol>\n<p>Mit der <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/CSS\/Tutorials\/Typographie\/Schriftformatierung\/font-display\" target=\"_blank\" rel=\"noopener\">CSS-Funktion font-display<\/a> k\u00f6nnen wir diese Probleme minimieren, indem wir einfach eine Systemschrift verwenden, bis die individuelle Schrift der Seite geladen ist.<\/p>\n<p>Falls Du diese L\u00f6sung noch nicht verwendest, wird sie Dir unter \u201eDiagnose\u201c in den PageSpeed Insights angezeigt.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3630 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/diagnose-webfont.png\" alt=\"Diagnose zum Webfont-Ladevorgang\" width=\"924\" height=\"416\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/diagnose-webfont.png 924w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/diagnose-webfont-768x346.png 768w\" sizes=\"(max-width: 924px) 100vw, 924px\" \/><\/p>\n<p>Du verwendest eine der Google Fonts? Dann ist die L\u00f6sung ganz einfach. Setze einfach den Zusatz \u201e&amp;display=swap\u201c ans Ende der Google Font Stylesheet URL.<\/p>\n<pre>&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap\" rel=\"stylesheet\"&gt;<\/pre>\n<p>Inzwischen f\u00fcgt Google diesen Zusatz sogar automatisch hinzu, wenn Du den Code zum Einbetten einer Schrift aus der Google Bibliothek kopierst.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3631 size-full\" style=\"float: none;\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/font-code.png\" alt=\"Google passt den Code f\u00fcr Fonts automatisch an\" width=\"471\" height=\"373\" \/><\/p>\n<h4><strong>2. Lass Platz f\u00fcr Werbeanzeigen im Layout<\/strong><\/h4>\n<p>Individuelle Schriftarten sorgen in der Regel immer f\u00fcr kleine Layout-Verschiebungen, die Nutzern jedoch meistens nicht weiter auffallen. Anders sieht es hingegen mit Werbeanzeigen aus, die das Layout Deiner Seite ziemlich durcheinander bringen k\u00f6nnen, wie das Beispiel der News-Website zu Beginn dieses Abschnitts zeigt.<\/p>\n<p>Diesem Problem kannst Du vorbeugen:<\/p>\n<ol>\n<li>falls Du wei\u00dft, welche Gr\u00f6\u00dfe die Anzeigen haben, die Dein Werbenetzwerk ausspielt, und<\/li>\n<li>Du sie manuell bestimmten Bereichen zuweist.<\/li>\n<\/ol>\n<p>Mit den automatischen Anzeigen von Googles AdSense klappt dies leider nicht, da die Automatisierung speziell dazu da ist, <a href=\"https:\/\/support.google.com\/adsense\/answer\/9261805?hl=de\" target=\"_blank\" rel=\"noopener\">Anzeigen an unterschiedlichen Stellen zu testen<\/a> und den Umsatz so zu maximieren. Das bedeutet, dass Du nie genau wei\u00dft, wo die Anzeigen erscheinen, wenn Nutzer Deine Seite aufrufen.*<\/p>\n<p>Lass uns trotzdem f\u00fcr den Moment davon ausgehen, dass Du die Gr\u00f6\u00dfe und Position der Anzeigen kennst.<\/p>\n<p>In diesem Fall kannst Du Layout-Verschiebungen vorbeugen, indem Du einfach eine minimale H\u00f6he und Breite f\u00fcr Deinen Ad Container festlegst. Die Werte h\u00e4ngen dabei von den Gr\u00f6\u00dfen der Anzeigen ab, die Du ausspielst.<\/p>\n<pre>&lt;div id=\"ad-slot1\" style=\"min-width: 300px; min-height: 250px;\"&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>Mit <a href=\"https:\/\/www.seobility.net\/de\/wiki\/Media_Queries\" target=\"_blank\" rel=\"noopener\">Media Queries<\/a> kannst Du anschlie\u00dfend die minimale H\u00f6he und Breite passend zur Bildschirmgr\u00f6\u00dfe der Nutzer anpassen.<\/p>\n<pre>@media screen and (max-width: 960px) {\r\n#ad-slot1 {\r\nmin-height: 100px;\r\n}\r\n}<\/pre>\n<p>Eine ausf\u00fchrliche Anleitung findest Du <a href=\"https:\/\/developers.google.com\/doubleclick-gpt\/guides\/minimize-layout-shift\" target=\"_blank\" rel=\"noopener\">hier<\/a>.<\/p>\n<p><em>*Du kennst eine L\u00f6sung f\u00fcr das Problem mit den automatisierten Werbeanzeigen? Wir w\u00fcrden uns freuen, wenn Du sie in den Kommentaren mit uns teilst!<\/em><\/p>\n<h4><strong>3. Stelle sicher, dass alle Bilder ein \u201cwidth\u201d und \u201cheight\u201d Attribut haben<\/strong><\/h4>\n<p>Die meisten Websites haben ein responsives Layout, in dem Bilder automatisch f\u00fcr die Bildschirmgr\u00f6\u00dfe eines jeden Nutzers angepasst werden. Mit dem <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Tutorials\/Bilder_im_Internet\/responsive_Bilder\" target=\"_blank\" rel=\"noopener\">srcset-Attribut<\/a> k\u00f6nnen Browser Bilder in unterschiedlichen Gr\u00f6\u00dfen, zum Beispiel in einer kleinen, mittleren und gro\u00dfen Version passend zum Bildschirm anzeigen.<\/p>\n<p>Trotzdem ist es wichtig, die \u201cwidth\u201d (Breite) und \u201cheight\u201d (H\u00f6he) eines Bildes im\u00a0 Tag festzulegen.<\/p>\n<p>Warum diese Information nicht fehlen darf? Weil der Browser ohne die Attribute den Platz, den er f\u00fcr das Bild reservieren muss, erst berechnen kann, sobald das Bild komplett geladen ist. Und das f\u00fchrt wiederum zu Layout-Verschiebungen.<\/p>\n<p>Darum solltest Du immer Gr\u00f6\u00dfenattribute f\u00fcr Deine Bilder festlegen, besonders f\u00fcr Elemente above the fold wie zum Beispiel das Logo Deiner Website.<\/p>\n<h2 id='content-wie-und-wo-du-die-core-web-vitals-deiner-website-pruefen-kannst'><strong>Wie (und wo) Du die Core Web Vitals Deiner Website pr\u00fcfen kannst<\/strong><\/h2>\n<p>In diesem Guide haben wir uns bisher auf <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=de\" target=\"_blank\" rel=\"noopener\">Googles PageSpeed Insights<\/a> konzentriert, weil es das Tool<\/p>\n<ol>\n<li>schon lange gibt, und<\/li>\n<li>sich die meisten Webmaster\/SEOs damit auskennen.<\/li>\n<\/ol>\n<p>Doch es gibt noch <a href=\"https:\/\/web.dev\/vitals-tools\/\" target=\"_blank\" rel=\"noopener\">viele andere Tools<\/a>, mit denen Du die Core Web Vitals Deiner Website oder einzelner Seiten pr\u00fcfen kannst:<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignleft wp-image-3632 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cwv-tools.png\" alt=\"Tools, mit denen Du Deine Core Web Vitals pr\u00fcfen kannst\" width=\"884\" height=\"557\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cwv-tools.png 884w, https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/cwv-tools-768x484.png 768w\" sizes=\"(max-width: 884px) 100vw, 884px\" \/><\/p>\n<p>Sehen wir uns die verschiedenen Tools einmal kurz an.<\/p>\n<h3><strong>1. Google Search Console<\/strong><\/h3>\n<p>Google berichtet \u00fcber Probleme mit den Core Web Vitals Deiner Website inzwischen in der <a href=\"https:\/\/search.google.com\/search-console\/\" target=\"_blank\" rel=\"noopener\">Google Search Console<\/a> (GSC).<\/p>\n<p>Du findest den Bericht links unter \u201eCore Web Vitals\u201c im Abschnitt \u201eNutzerfreundlichkeit\u201c.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6916 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/core-web-vitals-report.png\" alt=\"Core Web Vitals Report in der Google Search Console\" width=\"1068\" height=\"652\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/core-web-vitals-report.png 1068w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/core-web-vitals-report-768x469.png 768w\" sizes=\"(max-width: 1068px) 100vw, 1068px\" \/><\/p>\n<p>Sehen wir uns das einmal im Detail an.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6917 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/bericht-uebersicht.png\" alt=\"Core Web Vitals Bericht Zusammenfassung\" width=\"935\" height=\"379\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/bericht-uebersicht.png 935w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/bericht-uebersicht-768x311.png 768w\" sizes=\"(max-width: 935px) 100vw, 935px\" \/><\/p>\n<p>Wenn Du auf \u201eBericht \u00f6ffnen\u201c klickst, siehst Du alle Probleme.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6918 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/unzulaengliche-urls.png\" alt=\"Warum URLs als unzul\u00e4nglich gelten\" width=\"933\" height=\"458\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/unzulaengliche-urls.png 933w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/unzulaengliche-urls-768x377.png 768w\" sizes=\"(max-width: 933px) 100vw, 933px\" \/><\/p>\n<p>Klicke auf eines der Probleme und Du siehst Beispielseiten, die davon betroffen sind<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6919 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/betroffene-urls.png\" alt=\"betroffene URLs\" width=\"936\" height=\"714\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/betroffene-urls.png 936w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/betroffene-urls-768x586.png 768w\" sizes=\"(max-width: 936px) 100vw, 936px\" \/><\/p>\n<p>Google gruppiert hier Seiten mit \u00e4hnlichen Problemen und zeigt Dir die Gesamtzahl unter \u201c\u00c4hnliche URLs\u201d an. F\u00fcr weitere Details m\u00fcssen wir also auf eine der Beispielseiten klicken.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6921 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/urls-gruppe.png\" alt=\"URLs in dieser Gruppe\" width=\"1187\" height=\"732\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/urls-gruppe.png 1187w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/urls-gruppe-768x474.png 768w\" sizes=\"(max-width: 1187px) 100vw, 1187px\" \/><\/p>\n<p>Die weiteren URLs siehst Du rechts in der Seitenleiste.<\/p>\n<h3><strong>2. Web Vitals Chrome Erweiterung<\/strong><\/h3>\n<p>Wie vorher schon erw\u00e4hnt, kannst Du den First Input Delay auch manuell pr\u00fcfen. Bedenke dabei, dass dieser Test jedoch von Deinem eigenen Computer und Netzwerk (sowie Deiner ganz pers\u00f6nlichen Reaktionszeit) abh\u00e4ngt, und damit nicht so verl\u00e4sslich ist wie die gesammelten Felddaten.<\/p>\n<p>Wenn Du den Test dennoch durchf\u00fchren willst, gehst Du dabei folgenderma\u00dfen vor.<\/p>\n<p>Als Erstes musst Du die <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma?hl=de\" target=\"_blank\" rel=\"noopener\">Web Vitals Chrome Erweiterung<\/a> installieren.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6922 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/web-vitals.png\" alt=\"web vitals\" width=\"520\" height=\"128\" \/><\/p>\n<p>Sobald die Installation abgeschlossen ist, kannst Du mit einem Klick auf die Erweiterung die Core Web Vitals f\u00fcr jede beliebige Seite sehen.<\/p>\n<p>W\u00e4hrend Du das Ganze ausprobierst, solltest Du f\u00fcr \u201eDisplay HUD overlay\u201c in den Einstellungen ein H\u00e4kchen setzen. Damit werden Dir f\u00fcr jede Seite automatisch CWV-Werte angezeigt, ohne dass Du erst auf die Erweiterung klicken musst.<\/p>\n<p>Hier siehst Du, was die Erweiterung f\u00fcr die Google Startseite anzeigt.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6923 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Google-Die-Suchmaschine-hat.png\" alt=\"Google! Die Suchmaschine hat\" width=\"1324\" height=\"550\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Google-Die-Suchmaschine-hat.png 1324w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/Google-Die-Suchmaschine-hat-768x319.png 768w\" sizes=\"(max-width: 1324px) 100vw, 1324px\" \/><\/p>\n<p>Nicht schlecht, Google! Die Suchmaschine hat nat\u00fcrlich ein ideales Ergebnis.<\/p>\n<h3><strong>3. Google Lighthouse (Chrome Dev Tools)<\/strong><\/h3>\n<p>Mit <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\" target=\"_blank\" rel=\"noopener\">Google Lighthouse<\/a> in den Chrome Dev Tools kannst Du Labdaten f\u00fcr Largest Contentful Paint und Cumulative Layout Shift sehen.<\/p>\n<p>Klicke F12 auf Deiner Tastatur w\u00e4hrend Du Googles Chrome Browser verwendest und w\u00e4hle den Lighthouse Tab aus, um zu den Chrome Dev Tools zu gelangen.<\/p>\n<p><img decoding=\"async\" class=\"contentimage alignnone wp-image-6924 size-full\" src=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lighthouse.png\" alt=\"Google Lighthouse\" width=\"1564\" height=\"712\" srcset=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lighthouse.png 1564w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lighthouse-768x350.png 768w, https:\/\/www.seobility.net\/wp-content\/uploads\/2023\/07\/lighthouse-1536x699.png 1536w\" sizes=\"(max-width: 1564px) 100vw, 1564px\" \/><\/p>\n<h3><strong>4. Google PageSpeed Insights<\/strong><\/h3>\n<p>Nochmal zur Erinnerung \u2013 mit Googles PageSpeed Insights erh\u00e4ltst Du:<\/p>\n<ol>\n<li>Labdaten zu LCP und CLS, aber nicht FID<\/li>\n<li>Felddaten zu allen drei Core Web Vitals (falls ausreichend Daten zur Verf\u00fcgung stehen)<\/li>\n<\/ol>\n<p>Damit hast Du einen umfassenden Bericht, weswegen wir PageSpeed Insights f\u00fcr die Beispiele in diesem Guide verwenden.<\/p>\n<h3><strong>5. Chrome User Experience Report<\/strong><\/h3>\n<p>Technisch Begabte k\u00f6nnen CWV-Daten auch direkt in der Chrome User Experience Report API einsehen.<\/p>\n<p><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/api\/reference\" target=\"_blank\" rel=\"noopener\">In diesem Guide<\/a> erf\u00e4hrst Du, wie Du dabei vorgehst.<\/p>\n<h2 id='content-jetzt-bist-du-ideal-auf-die-optimierung-deiner-core-web-vitals-vorbereitet'><strong>Jetzt bist Du ideal auf die Optimierung Deiner Core Web Vitals vorbereitet<\/strong><\/h2>\n<p>Damit bist Du am Ende unseres Core Web Vitals Guides angelangt.<\/p>\n<p>Auch wenn der direkte Einfluss aufs Ranking unter SEO-Profis immer noch hitzig diskutiert wird, sind sie zweifelsohne ein wichtiger Messwert, den man in die Optimierung einbeziehen sollte.<\/p>\n<p>Google hat die Bedeutung der Nutzerfreundlichkeit bisher vehement vorangetrieben, daher werden Websites mit schlechter Page Experience wahrscheinlich einen Abfall an Suchmaschinen-Traffic verzeichnen.<\/p>\n<p>Im Umkehrschluss bedeutet das f\u00fcr Seiten mit ausgezeichneter User Experience voraussichtlich einen sp\u00fcrbaren Boost.<\/p>\n<p>Wir wissen, dass dieses Thema ziemlich komplex ist. Hinterlasse uns darum gerne einen Kommentar mit Deinen Fragen zu den Core Web Vitals und wir beantworten sie so schnell wie m\u00f6glich.<\/p>\n<p>Viel Erfolg beim Optimieren Deiner Core Web Vitals!<\/p>\n<p><script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"author\": {\n    \"@type\": \"Person\",\n    \"name\": \"David McSweeney\",\n    \"url\": \"https:\/\/uk.linkedin.com\/in\/david-mcsweeney-79840154\"\n  }\n  }\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Beitrag zuletzt aktualisiert am 1. Februar 2024. Die Core Web Vitals sind Messwerte, mit denen Google die Qualit\u00e4t der User Experience (UX) bzw. Nutzererfahrung einer Website realit\u00e4tsnah bewertet. Wie der Name \u201eCore\u201d Web Vitals verr\u00e4t, erachtet Google diese Messwerte als entscheidend daf\u00fcr. Au\u00dferdem hat Google explizit betont, dass sie einen direkten Einfluss auf Deine Suchmaschinen-Rankings [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":18180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[47,48,116],"tags":[],"class_list":["post-29454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-onpage-seo","category-seo","category-technical-seo"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Core Web Vitals: Alles was Du dar\u00fcber wissen musst - Seobility<\/title>\n<meta name=\"description\" content=\"Was hat es mit den Core Web Vitals auf sich? Alles, was Du \u00fcber diesen Google Rankingfaktor wissen solltest, steht in diesem Guide!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Core Web Vitals: Alles was Du dar\u00fcber wissen musst - Seobility\" \/>\n<meta property=\"og:description\" content=\"Was hat es mit den Core Web Vitals auf sich? Alles, was Du \u00fcber diesen Google Rankingfaktor wissen solltest, steht in diesem Guide!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Seobility\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/seobility.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-02T12:40:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-25T13:39:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-updated-fb-ln-de.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"David McSweeney\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-updated-twitter-de.png\" \/>\n<meta name=\"twitter:creator\" content=\"@seobility_net\" \/>\n<meta name=\"twitter:site\" content=\"@seobility_net\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David McSweeney\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"44 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/\"},\"author\":{\"name\":\"David McSweeney\",\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/#\\\/schema\\\/person\\\/a65c7088ca82f92a48616f34cec32e25\"},\"headline\":\"Core Web Vitals: Alles, was Du dar\u00fcber wissen musst\",\"datePublished\":\"2023-08-02T12:40:48+00:00\",\"dateModified\":\"2025-07-25T13:39:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/\"},\"wordCount\":7906,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.seobility.net\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/core-web-vitals-header.jpg\",\"articleSection\":[\"Onpage SEO\",\"SEO allgemein\",\"Technical SEO\"],\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/\",\"url\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/\",\"name\":\"Core Web Vitals: Alles was Du dar\u00fcber wissen musst - Seobility\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.seobility.net\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/core-web-vitals-header.jpg\",\"datePublished\":\"2023-08-02T12:40:48+00:00\",\"dateModified\":\"2025-07-25T13:39:28+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/#\\\/schema\\\/person\\\/a65c7088ca82f92a48616f34cec32e25\"},\"description\":\"Was hat es mit den Core Web Vitals auf sich? Alles, was Du \u00fcber diesen Google Rankingfaktor wissen solltest, steht in diesem Guide!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.seobility.net\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/core-web-vitals-header.jpg\",\"contentUrl\":\"https:\\\/\\\/www.seobility.net\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/core-web-vitals-header.jpg\",\"width\":1200,\"height\":627},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/core-web-vitals-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Core Web Vitals: Alles, was Du dar\u00fcber wissen musst\",\"item\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/wp-json\\\/wp\\\/v2\\\/posts\\\/29454\\\/\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/\",\"name\":\"Seobility\",\"description\":\"Online SEO Software &amp; Tools For Better Rankings\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/#\\\/schema\\\/person\\\/a65c7088ca82f92a48616f34cec32e25\",\"name\":\"David McSweeney\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/www.seobility.net\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/davidmc.jpg\",\"url\":\"https:\\\/\\\/www.seobility.net\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/davidmc.jpg\",\"contentUrl\":\"https:\\\/\\\/www.seobility.net\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/davidmc.jpg\",\"caption\":\"David McSweeney\"},\"description\":\"David combines 20+ years of experience in SEO with the passion for teaching people how to optimize their websites the right way. Unsurprisingly he loves SEO and writing. That's why David focuses on the particularly advanced SEO topics on the Seobility blog.\",\"url\":\"https:\\\/\\\/www.seobility.net\\\/de\\\/blog\\\/author\\\/david-mcsweeney\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Core Web Vitals: Alles was Du dar\u00fcber wissen musst - Seobility","description":"Was hat es mit den Core Web Vitals auf sich? Alles, was Du \u00fcber diesen Google Rankingfaktor wissen solltest, steht in diesem Guide!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/","og_locale":"de_DE","og_type":"article","og_title":"Core Web Vitals: Alles was Du dar\u00fcber wissen musst - Seobility","og_description":"Was hat es mit den Core Web Vitals auf sich? Alles, was Du \u00fcber diesen Google Rankingfaktor wissen solltest, steht in diesem Guide!","og_url":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/","og_site_name":"Seobility","article_publisher":"https:\/\/www.facebook.com\/seobility.net\/","article_published_time":"2023-08-02T12:40:48+00:00","article_modified_time":"2025-07-25T13:39:28+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-updated-fb-ln-de.png","type":"image\/png"}],"author":"David McSweeney","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-updated-twitter-de.png","twitter_creator":"@seobility_net","twitter_site":"@seobility_net","twitter_misc":{"Verfasst von":"David McSweeney","Gesch\u00e4tzte Lesezeit":"44 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/#article","isPartOf":{"@id":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/"},"author":{"name":"David McSweeney","@id":"https:\/\/www.seobility.net\/de\/#\/schema\/person\/a65c7088ca82f92a48616f34cec32e25"},"headline":"Core Web Vitals: Alles, was Du dar\u00fcber wissen musst","datePublished":"2023-08-02T12:40:48+00:00","dateModified":"2025-07-25T13:39:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/"},"wordCount":7906,"commentCount":0,"image":{"@id":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg","articleSection":["Onpage SEO","SEO allgemein","Technical SEO"],"inLanguage":"de-DE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/","url":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/","name":"Core Web Vitals: Alles was Du dar\u00fcber wissen musst - Seobility","isPartOf":{"@id":"https:\/\/www.seobility.net\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg","datePublished":"2023-08-02T12:40:48+00:00","dateModified":"2025-07-25T13:39:28+00:00","author":{"@id":"https:\/\/www.seobility.net\/de\/#\/schema\/person\/a65c7088ca82f92a48616f34cec32e25"},"description":"Was hat es mit den Core Web Vitals auf sich? Alles, was Du \u00fcber diesen Google Rankingfaktor wissen solltest, steht in diesem Guide!","breadcrumb":{"@id":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/#primaryimage","url":"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg","contentUrl":"https:\/\/www.seobility.net\/wp-content\/uploads\/2021\/01\/core-web-vitals-header.jpg","width":1200,"height":627},{"@type":"BreadcrumbList","@id":"https:\/\/www.seobility.net\/de\/blog\/core-web-vitals-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.seobility.net\/de\/"},{"@type":"ListItem","position":2,"name":"Core Web Vitals: Alles, was Du dar\u00fcber wissen musst","item":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/posts\/29454\/"}]},{"@type":"WebSite","@id":"https:\/\/www.seobility.net\/de\/#website","url":"https:\/\/www.seobility.net\/de\/","name":"Seobility","description":"Online SEO Software &amp; Tools For Better Rankings","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.seobility.net\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/www.seobility.net\/de\/#\/schema\/person\/a65c7088ca82f92a48616f34cec32e25","name":"David McSweeney","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/davidmc.jpg","url":"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/davidmc.jpg","contentUrl":"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/davidmc.jpg","caption":"David McSweeney"},"description":"David combines 20+ years of experience in SEO with the passion for teaching people how to optimize their websites the right way. Unsurprisingly he loves SEO and writing. That's why David focuses on the particularly advanced SEO topics on the Seobility blog.","url":"https:\/\/www.seobility.net\/de\/blog\/author\/david-mcsweeney\/"}]}},"_links":{"self":[{"href":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/posts\/29454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/comments?post=29454"}],"version-history":[{"count":0,"href":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/posts\/29454\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/media\/18180"}],"wp:attachment":[{"href":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/media?parent=29454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/categories?post=29454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.seobility.net\/de\/wp-json\/wp\/v2\/tags?post=29454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}