{"id":21653,"date":"2024-02-20T12:34:01","date_gmt":"2024-02-20T12:34:01","guid":{"rendered":"https:\/\/afreeurl.com\/?p=21653"},"modified":"2024-02-20T12:34:04","modified_gmt":"2024-02-20T12:34:04","slug":"how-to-improve-and-control-interaction-with-next-paint","status":"publish","type":"post","link":"https:\/\/afreeurl.com\/?p=21653","title":{"rendered":"How to improve and control interaction with Next Paint"},"content":{"rendered":"

<\/p>\n

Google has announced that the new Interaction with Next Paint<\/a> (INP) will become one of the three Core Web Vitals<\/a> metrics on March 12, 2024. Replaces the old one First input delay metric<\/a>.<\/p>\n

This is the biggest change to web vitals since Google first introduced them as a ranking factor in 2021.<\/p>\n

What is the interaction with Next Paint?<\/h2>\n

The three Core Web Vitals metrics each measure a different aspect of the experience users have on your website. INP evaluates how quickly your website responds to user interactions.<\/p>\n

For example, if a visitor clicks a button on your website and the page’s updated content takes a second to display, this represents a poor user experience.<\/p>\n

Interaction with Next Paint measures how much time passes between user interaction and the next time the browser can refresh the content on the screen. The more CPU processing required to handle the interaction and display the new content, the worse the INP score.<\/p>\n

\"Evaluation<\/p>\n

Does engagement with the following affect Google rankings?<\/h2>\n

Google has confirmed that the Core Web Vitals are a ranking factor<\/a>. This means that if your site performs worse in the INP score, it may rank higher than competitors that do well in all three vital web metrics.<\/p>\n

For a good score, the INP must be less than 200 milliseconds.<\/strong> A delay of more than 500 milliseconds is considered poor. Your SEO is gradually affected as the INP worsens between the Good and Poor thresholds.<\/p>\n

How does Google know how quickly your website responds to user interactions? This data is collected from actual Chrome users as part of the Chrome User Experience Report (CrUX)<\/a>.<\/p>\n

\"Interaction<\/p>\n

How to test interaction with Next Paint on your website<\/h2>\n

Want to find out how your website is doing with the INP metric and other web vitals? run to Core Web Vitals free trial<\/a> on your website is a quick way to check. Just enter the URL of a page and wait for the test result.<\/p>\n

Actual user interaction data with Next Paint can be found at Vital Web<\/strong> tab The 25-week trend lets you know if the page is getting better or worse over time.<\/p>\n

The data shown here comes from Google’s CrUX report.<\/p>\n

\"Google<\/p>\n

For a broader view of the different groups of pages on your website, you can also check Core Web Vitals tab in Google Search Console<\/a>. Here you will see how many pages are affected by INP issues or otherwise not pass the Core Web Vitals assessment<\/a>.<\/p>\n

\"Interaction<\/p>\n

Unfortunately, the data provided by Google is not very nuanced, and due to the page grouping mechanism, you may not be able to tell which specific pages are affected by slow interaction with the next Paint.<\/p>\n

Google CrUX data is also aggregated for 28 days. This means you will have to wait several weeks to see the impact of the optimizations.<\/p>\n

For a more detailed view, a dedicated real user Core Web Vitals monitoring tool<\/a> how DebugBear can help. This way, you get detailed Core Web Vitals across your entire website, updated as soon as a change is made.<\/p>\n

\"DebugBear<\/p>\n

How to speed up interactions and improve INP?<\/h2>\n

To improve INP scores on your website, you need to know what CPU processing is involved in a user interaction. INP can be divided into three components:<\/p>\n

Input Lag: Background tasks that prevent the browser from handling an interaction until the tasks have completed Processing Time: Running code that handles user interaction and schedules updates to the user interface Delay presentation: After scheduled UI updates, the browser must update the page layout and present the new content<\/p>\n

The performance tab in Chrome DevTools it shows how long page interactions took and what was responsible for CPU processing<\/a>.<\/p>\n

\"INP<\/p>\n

The data in DevTools Performance Tab<\/a> it can be hard to read, so you’ll usually want a developer involved. But it provides an explanation for every millisecond the browser spends while handling the event.<\/p>\n

For example, you may find that:<\/p>\n

Third-party code is running in the background and slowing down interactions. The JavaScript code that your website executes in response to an interaction needs to be optimized. You can schedule CPU tasks more efficiently to reduce the amount of time interactions are blocked.<\/p>\n

Real user monitoring with DebugBear<\/a> it will show you which INP component contributes the most to your website’s poor response.<\/p>\n

\"INP<\/p>\n

You will also often find that interactions take longer during the initial loading process of the website. This is because when a page starts to load, many small tasks run in the background to set up the page, for example loading ads or initializing a form or chat widget.<\/p>\n

DebugBear shows a breakdown of the speed of interactions at different stages and how often interactions occur in those time periods (indicated by the height of the bar).<\/p>\n

\"Failure<\/p>\n

If your website supports the Long Animation Frames API<\/a>you may also see specific JavaScript scripts and functions that cause slow interactions between your visitors.<\/p>\n

\"DebugBear<\/p>\n

How do I know which page interactions are affected by a slow INP?<\/h2>\n

If you want to optimize your code and test the interactions on your website, you need to know which elements users interact with most often on your website and which interactions tend to cause a slow INP.<\/p>\n

This is not data you can get from Google’s CrUX reports, but from a dedicated Core Web Vitals monitoring tool like DebugBear will collect this information for you<\/a>.<\/p>\n

\"Breakdown<\/p>\n

You can filter data by page, device type, and many other factors to better understand how visitors experience your website. DebugBear<\/a> reports can give you specific advice on how to improve your interaction with Next Paint.<\/p>\n

How to control interaction with Next Paint and other Core Web Vitals<\/h2>\n

A real user monitoring (RUM) solution can help you prepare for the new Interaction to Next Paint metric and help you stay on top of your vital life base over time.<\/p>\n

Try DebugBear with one 14 day free trial<\/a>. Continuously measure your vital web data and see which pages will benefit most from optimizations.<\/p>\n

\"DebugBear<\/p>\n

Simply install the DebugBear analysis snippet<\/a> to learn about your visitor experiences. Avoid the 28-day delay that comes with Google’s vital web data and get detailed reports that you can use to provide a better website experience and rank higher on Google.<\/p>\n

\"DebugBear
\n
[ad_2]
\n
Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Google has announced that the new Interaction with Next Paint (INP) will become one of the three Core Web Vitals metrics on March 12, 2024. Replaces the old one First input delay metric. This is the biggest change to web vitals since Google first introduced them as a ranking factor in 2021. What is the interaction with Next Paint? The three Core Web Vitals metrics each measure a different aspect of the experience users have… <\/p>\n","protected":false},"author":1,"featured_media":21654,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-21653","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo-news"],"_links":{"self":[{"href":"https:\/\/afreeurl.com\/index.php?rest_route=\/wp\/v2\/posts\/21653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/afreeurl.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/afreeurl.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/afreeurl.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/afreeurl.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21653"}],"version-history":[{"count":1,"href":"https:\/\/afreeurl.com\/index.php?rest_route=\/wp\/v2\/posts\/21653\/revisions"}],"predecessor-version":[{"id":21655,"href":"https:\/\/afreeurl.com\/index.php?rest_route=\/wp\/v2\/posts\/21653\/revisions\/21655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/afreeurl.com\/index.php?rest_route=\/wp\/v2\/media\/21654"}],"wp:attachment":[{"href":"https:\/\/afreeurl.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/afreeurl.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=21653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/afreeurl.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=21653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}