{"id":144546,"date":"2023-05-19T13:00:05","date_gmt":"2023-05-19T13:00:05","guid":{"rendered":"https:\/\/www.searchenginewatch.com\/?p=144546"},"modified":"2023-05-19T13:00:05","modified_gmt":"2023-05-19T13:00:05","slug":"optimize-googles-new-interaction-to-next-paint-metric","status":"publish","type":"post","link":"https:\/\/searchenginewatch.com\/2023\/05\/19\/optimize-googles-new-interaction-to-next-paint-metric\/","title":{"rendered":"Optimize Google\u2019s new Interaction to Next Paint metric"},"content":{"rendered":"<div class=\"well\">\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-144552\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/Shutterstock_2171919093.png\" alt=\"\" width=\"728\" height=\"233\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/Shutterstock_2171919093.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/Shutterstock_2171919093-300x96.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/Shutterstock_2171919093-768x246.png 768w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/h3>\n<h3>30-second summary:<\/h3>\n<ul>\n<li>Good page speed and user experience help your site stand out in search results<\/li>\n<li>The Interaction to Next Paint metric is replacing First Input Delay<\/li>\n<li>You can improve make your site respond faster to user input by reducing CPU processing times<\/li>\n<\/ul>\n<\/div>\n<p>The Core Web Vitals are a set of metrics that Google has defined to measure how good a website\u2019s user experience is. They first became a ranking signal in 2021.<\/p>\n<p>While the metric definitions <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/refs\/heads\/main\/docs\/speed\/metrics_changelog\/README.md\" target=\"_blank\" rel=\"noopener\">have been tweaked over time<\/a>, the introduction of the Interaction to Next Paint metric is the biggest change since the launch of the Core Web Vitals initiative.<\/p>\n<h2>What is Interaction to Next Paint (INP)?<\/h2>\n<p><a href=\"https:\/\/www.debugbear.com\/docs\/metrics\/interaction-to-next-paint?utm_campaign=sew3\" target=\"_blank\" rel=\"noopener\">Interaction to Next Paint<\/a> is a metric that evaluates how quickly your website responds to user interaction. It measures how much time elapses between the user input, like a button click, and the next time the page content refreshes (the \u201cnext paint\u201d).<\/p>\n<p>To rank better in Google this interaction delay should be less than 200 milliseconds. This ensures that the website feels responsive to users.<\/p>\n<h2>How are the Core Web Vitals changing?<\/h2>\n<p>Google has announced that Interaction to Next Paint <a href=\"https:\/\/web.dev\/inp-cwv\/\" target=\"_blank\" rel=\"noopener\">will become one of the three Core Web Vitals<\/a> metrics in March 2024. At that point a website that responds to user input too slowly could do worse in search result rankings.<\/p>\n<p>INP will replace the current <a href=\"https:\/\/web.dev\/fid\/\" target=\"_blank\" rel=\"noopener\">First Input Delay<\/a> (FID) metric. While FID also measures responsiveness, it is more limited as it only looks at the first user interaction. It also only measures the delay until the input event starts being handled, rather than waiting until the user can see the result.<\/p>\n<p>Currently only <a href=\"https:\/\/httparchive.org\/reports\/chrome-ux-report#cruxFastInp\" target=\"_blank\" rel=\"noopener\">64.9% of mobile websites<\/a> do well on the Interaction to Next Paint metric and it will be harder to get a good INP score than a good First Input Delay score.<\/p>\n<h2>How can I measure the Interaction to Next Paint metric on my website?<\/h2>\n<p>Run a <a href=\"https:\/\/www.debugbear.com\/test\/website-speed?utm_campaign=sew3\" target=\"_blank\" rel=\"noopener\">website speed test<\/a> to see how fast your website loads and how quickly it responds to user input.<\/p>\n<p>Open the \u201cWeb Vitals\u201d tab once your test is complete. You can see the Interaction to Next Paint metric at the bottom of the page.<\/p>\n<p>In this case only 38% of users have a good INP experience.<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-144548\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image2.png\" alt=\"\" width=\"701\" height=\"280\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image2.png 701w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image2-300x120.png 300w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><\/p>\n<h2>How can I optimize Interaction to Next Paint?<\/h2>\n<p>Interaction delays happen when the browser needs to perform a lot of CPU processing before it can update the page. This can happen for two reasons:<\/p>\n<ul>\n<li>Ongoing background tasks prevent the user input from being handled<\/li>\n<li>Handling the user input itself is taking a lot of time<\/li>\n<\/ul>\n<p>Background tasks often happen during the initial page load, but can happen later on as well. They are often caused by third party code embedded on the website.<\/p>\n<p>Responding to a user interaction can require a lot of processing. If that can\u2019t be optimized you can consider showing a spinner to provide visual feedback until the processing task is complete.<\/p>\n<p>Running JavaScript code is the most common type of processing, but complex visual updates can also take a long time.<\/p>\n<h3>Use Chrome DevTools to analyze performance<\/h3>\n<p>The Chrome DevTools <a href=\"https:\/\/www.debugbear.com\/blog\/devtools-performance?utm_campaign=sew3\" target=\"_blank\" rel=\"noopener\">performance profiler<\/a> shows what tasks are taking a long time and should be optimized. Start a recording, click on an element on the page, and then click on the longest bars in the visualization.<\/p>\n<p>This allows you to identify whether the code comes from a third party or from your own website. You can also dive deeper to see how the task can be sped up.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-144549\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image3.png\" alt=\"\" width=\"667\" height=\"549\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image3.png 667w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image3-300x247.png 300w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/p>\n<h3>Check the Total Blocking Time metric to identify background tasks<\/h3>\n<p>The <a href=\"https:\/\/web.dev\/tbt\/\" target=\"_blank\" rel=\"noopener\">Total Blocking Time<\/a> metric tracks how often there are background CPU tasks that could block other code from running. If the user interacts with the page while a task is already in progress then the browser first completes that task before handling the input event.<\/p>\n<p>You can use tools like <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\" target=\"_blank\" rel=\"noopener\">Google Lighthouse<\/a> to see how this metric can be optimized.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-144550\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image4.png\" alt=\"\" width=\"728\" height=\"456\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image4.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image4-300x188.png 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<p>If processing-heavy tasks on your website are part of your core website code you\u2019ll need to work with your development team to optimize these. For third parties you can review whether the script is still needed, or contact customer support of the vendor to see if it\u2019s possible to optimize the code.<\/p>\n<h2>Monitor Interaction to Next Paint<\/h2>\n<p>Want to keep track of how you\u2019re doing on INP and other Core Web Vitals? DebugBear can <a href=\"https:\/\/www.debugbear.com\/?utm_campaign=sew3\" target=\"_blank\" rel=\"noopener\">keep track of your website speed<\/a> and help you optimize it.<\/p>\n<p>Start a free 14-day trial today and deliver a better user experience.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-144551\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image1.png\" alt=\"\" width=\"728\" height=\"332\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image1.png 728w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image1-300x137.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/image1-768x350.png 768w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/p>\n<h2>Conclusion<\/h2>\n<p>The Interaction to Next Paint metric represents the biggest change to Google\u2019s Core Web Vitals since they were originally announced. INP addresses the deficiencies of the previous First Input Delay metric and provides a better representation of how users experience a website.<\/p>\n<p>Check how your website does on the Interaction to Next Paint metric before the ranking change is rolled out in 2024. That way you\u2019ll have plenty of time to identify optimizations and make your website faster.<\/p>\n<p><a href=\"https:\/\/www.debugbear.com\/?utm_campaign=sew1\" target=\"_blank\" rel=\"noopener\">Try DebugBear with a free 14-day trial.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interaction to Next Paint is becoming one of the Core Web Vitals metrics that impact Google rankings. Learn what this change means and how you can optimize your website<\/p>\n","protected":false},"author":1092,"featured_media":144552,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,27893,28129,5],"tags":[28090,37,22],"content_type":[],"class_list":["post-144546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","category-digital-marketing","category-market-research","category-seo","tag-core-web-vitals-cwv","tag-google","tag-seo"],"acf":{"tad_independentcommercial":"Commercial","tad_content_format":"Native Article"},"post_info":{"name":"idris.nagri@blenheimchalcot.com idris.nagri@blenheimchalcot.com","title":"","thumbnail_url":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2023\/05\/Shutterstock_2171919093.png","category":"Analytics","timeago":"3y"},"_links":{"self":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/144546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/users\/1092"}],"replies":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/comments?post=144546"}],"version-history":[{"count":0,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/144546\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media\/144552"}],"wp:attachment":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media?parent=144546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/categories?post=144546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/tags?post=144546"},{"taxonomy":"content_type","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/content_type?post=144546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}