{"id":7103,"date":"2023-05-18T13:11:09","date_gmt":"2023-05-18T11:11:09","guid":{"rendered":"http:\/\/blog.bart.sk\/en\/?p=7103"},"modified":"2024-01-25T14:04:46","modified_gmt":"2024-01-25T13:04:46","slug":"google-announced-new-metric-core-web-vitals-mean-developers","status":"publish","type":"post","link":"https:\/\/blog.bart.sk\/en\/google-announced-new-metric-core-web-vitals-mean-developers\/","title":{"rendered":"Google Has Announced a New Metric for Core Web Vitals. What does this mean for developers?"},"content":{"rendered":"

In June 2020, Google Chrome team unveiled a revolutionary way to measure website quality \u2013 Web Vitals. You could have read about this groundbreaking news on our <\/b>blog<\/b><\/a>, for example. This measurement is based on three metrics and Google mainly evaluates the website speed based on those. Since their introduction, my colleagues have been monitoring these parameters on every project we manage. That’s why we didn’t miss that from May 2024, one metric from the trio will be replaced by a novelty \u2013 the INP.<\/b><\/p>\n

The name of the new metric stands for Interaction to Next Paint.<\/b> It will become a fixed part of Core Web Vitals in May 2024 and aims to better evaluate the quality of the user experience of a website.\u00a0<\/span><\/p>\n

According to the information available, the INP will replace the now used First Input Delay (FID) metric.<\/b> It measures the time it takes for a user to make the first interaction on a page. The word “first” is the key word in this sentence. FID doesn’t take into account other interactions and how long they last.\u00a0<\/span><\/p>\n

That’s why the INP was created. <\/span>It focuses on all interactions and measures the overall response over the lifetime of the site.<\/b> Thus, the INP provides a more comprehensive picture of the response time to any user actions. According to Google, its value should be within 200 milliseconds.<\/span><\/p>\n

\"\"<\/a><\/p>\n

What do developers have to do?<\/b><\/h2>\n

When organically ranking pages in search, Google takes into account a number of factors \u2013 content, location, traffic, number of orders, as well as Core Web Vitals values.<\/b> That’s why it’s important to monitor and take care of them. But there’s nothing to be afraid of. If a website has so far been achieving an excellent FID score, it’s very likely that the INP will also be in green values.\u00a0<\/span><\/p>\n

And if not, Google has introduced <\/span>a practical guide for developers<\/span><\/a> to improve this metric step by step. <\/span>The basis is the minification of scripts, the reduction of the DOM tree of the page or the division of longer-lasting tasks into several separate tasks.\u00a0<\/b><\/p>\n

Improving the INP is a long-term process that requires patience and effort.<\/b> It’s important to identify problems with slow interactions, optimise them and retest them. The result should be a web interface that provides users with a fast and seamless interaction and improves the overall experience of browsing the website.<\/span><\/p>\n

Pro tip at the end \u2013 How to check the Core Web Vitals of your web?
\n<\/b><\/h2>\n

Option 1<\/strong><\/h3>\n
    \n
  1. Open your website in the developer console in Chrome<\/span><\/li>\n
  2. Click on 3 dots<\/span><\/li>\n
  3. More Tools<\/span><\/li>\n
  4. Rendering<\/span><\/li>\n
  5. Turn on Core Web Vitals in the list<\/span><\/li>\n<\/ol>\n

    \"\"<\/a><\/p>\n

    You will then see a black rectangle in the upper right corner of the page with all three metrics<\/b> and their color-coded values. <\/span><\/p>\n

    \"\"<\/a><\/p>\n

    Option\u00a02<\/strong><\/h3>\n
      \n
    1. Use the available extension at https:\/\/github.com\/GoogleChrome\/web-vitals-extension<\/a> and you will obtain even more information in the following format:
      \n      \"\"<\/a><\/li>\n
    2. Through settings – right-click on the plugin icon – you can further customize the display as per your preferences.
      \n      \"\"<\/a><\/li>\n<\/ol>\n

      Ideal Core Web Vitals values to recap:<\/b><\/p>\n

      \"\"<\/a><\/p>\n

      Enjoy the optimization!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"In June 2020, Google Chrome team unveiled a revolutionary way to measure website quality \u2013 Web Vitals. You…","protected":false},"author":39,"featured_media":7104,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":""},"categories":[199],"tags":[422,423,59,424,425],"_links":{"self":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7103"}],"collection":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/comments?post=7103"}],"version-history":[{"count":2,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7103\/revisions"}],"predecessor-version":[{"id":7328,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7103\/revisions\/7328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media\/7104"}],"wp:attachment":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media?parent=7103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/categories?post=7103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/tags?post=7103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}