{"id":45151,"date":"2023-09-06T11:40:07","date_gmt":"2023-09-06T10:40:07","guid":{"rendered":"https:\/\/seo-marketing.koeln\/web-vitals\/"},"modified":"2026-05-14T09:36:18","modified_gmt":"2026-05-14T08:36:18","slug":"web-vitals","status":"publish","type":"post","link":"https:\/\/seo-marketing.koeln\/en\/web-vitals\/","title":{"rendered":"Web Vitals"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Web Vitals &#8211; Google&#8217;s factors for the user experience<\/h2>\n\n<p>The <strong>Core Web Vitals<\/strong> are a series of specific factors that Google classifies as decisive for the user experience of a website.<\/p>\n\n<p>They are made up of three specific measurements:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Loading time (Largest Contentful Paint)<\/li>\n\n\n\n<li>Interactivity (First Input Delay)<\/li>\n\n\n\n<li>Visual stability (Cumulative Layout Shift)<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">What are Core Web Vitals?<\/h2>\n\n<p>In short, Core Web Vitals are a subset of factors that Google uses to evaluate the &#8220;Page Experience&#8221;. They are Google&#8217;s way of objectively evaluating the overall UX of your site. <\/p>\n\n<h2 class=\"wp-block-heading\">The initiative at a glance<\/h2>\n\n<p>Web Vitals is a Google initiative. Its aim is to provide standardized guidance for quality signals. These are essential for a great user experience on the internet.  <\/p>\n\n<p>Over the years, Google has released many tools to measure performance. Some developers are experts at using them. Others, however, have found the plethora of tools and metrics confusing.  <\/p>\n\n<p>The good news: website owners don&#8217;t have to be performance gurus. The Web Vitals initiative simplifies the landscape. It helps webmasters focus on the metrics that matter most.  <\/p>\n\n<h2 class=\"wp-block-heading\">The three key figures<\/h2>\n\n<p>Core Web Vitals apply to all websites. They should be measured by every website owner and appear in all Google tools. Each metric represents a specific facet of the user experience.  <\/p>\n\n<p>The current set focuses on three aspects: <strong>Loading time, interactivity and visual stability.<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">1st Largest Contentful Paint (LCP)<\/h3>\n\n<p>This measures the charging power. It is about when the main content is charged. <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Target:<\/strong> The LCP should occur within <strong>2.5 seconds<\/strong>.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">2. first input delay (FID)<\/h3>\n\n<p>This measures interactivity. It is about how quickly the page responds to user input. <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Target:<\/strong> The page should have an FID of less than <strong>100 milliseconds<\/strong>.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">3. cumulative layout shift (CLS)<\/h3>\n\n<p>This measures visual stability. It checks whether elements shift unexpectedly during loading. <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Target:<\/strong> The page should have a CLS of less than <strong>0.1.<\/strong> <\/li>\n<\/ul>\n\n<p><strong>The threshold:<\/strong> Google uses the <strong>75th percentile<\/strong> to ensure that you meet the targets. This means that if 75% of your page views (mobile and desktop) reach the targets, the test is considered passed. <\/p>\n\n<h2 class=\"wp-block-heading\">How do you measure Core Web Vitals?<\/h2>\n\n<p>Since Google considers these values to be the backbone of the user experience, the company provides various tools. Here are three ways to measure it: <\/p>\n\n<h3 class=\"wp-block-heading\">1st Chrome User Experience Report (CrUX)<\/h3>\n\n<p>Google collects anonymized data from real users. This is called &#8220;field data&#8221;. <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Advantage:<\/strong> You don&#8217;t have to set anything up. Google already has the data. <\/li>\n\n\n\n<li><strong>tools:<\/strong> PageSpeed Insights uses this database.<\/li>\n\n\n\n<li><strong>Disadvantage:<\/strong> The analysis is not very detailed. It often does not help to accurately diagnose specific problems on a single subpage. <\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">2. use of JavaScript<\/h3>\n\n<p>You can use JavaScript to measure the values directly.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Library:<\/strong> Google offers a web vitals library with ready-made APIs.<\/li>\n\n\n\n<li><strong>Browser extension:<\/strong> The &#8220;Web Vitals&#8221; extension is available in the Chrome Web Store. This allows you to see the values directly in the browser without having to write code. <\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">3. lab tools<\/h3>\n\n<p>Lab tools simulate a page view under controlled conditions.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Use:<\/strong> Particularly helpful before a website goes live (pre-launch).<\/li>\n\n\n\n<li><strong>Important:<\/strong> Do not neglect the field data (real users). The experience of a real user is influenced by factors such as network conditions or slow devices. Use lab tools for development and field data for monitoring.  <\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Web Vitals &#8211; Google&#8217;s factors for the user experience of a website.<\/p>\n","protected":false},"author":4,"featured_media":34009,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[304],"tags":[],"class_list":["post-45151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lexicon"],"_links":{"self":[{"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/posts\/45151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/comments?post=45151"}],"version-history":[{"count":1,"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/posts\/45151\/revisions"}],"predecessor-version":[{"id":45153,"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/posts\/45151\/revisions\/45153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/media\/34009"}],"wp:attachment":[{"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/media?parent=45151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/categories?post=45151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seo-marketing.koeln\/en\/wp-json\/wp\/v2\/tags?post=45151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}