Mastering Google Core Web Vitals: Fix Input Delay for Optimal Site Performance

Improving Core Web Vitals - Team of web developers in an office working together using computers.

In May, Google announced that a change was coming to Core Web Vitals (CWV), which measures website performance. They’re turning to Interaction to Next Paint (INP), believing that this metric is more comprehensive in measuring responsiveness. This presents a better way to see how users actually experience a page than First Input Delay (FID). Understanding how the new metric works is important for website owners and developers as Core Web Vitals is now a factor in Google’s SEO ranking algorithm. This means that the better a site scores, the higher the site will appear on search engines.

In July, Google issued email notices through the Google Search Console to site owners whose websites had low INP scores. This, in turn, understandably caused concern. While website owners and developers have several months to improve their INP scores and relevance is still the main criterion for search engine rankings, reducing the delays that users experience when accessing your page is certainly a part of providing the best user experience possible.

Understanding Interaction to Next Paint (INP)

INP assesses the overall responsiveness of a website to user interactions. It analyzes how long of a delay a user experiences when they click or tap something on the site or input information on the keyboard and the browser’s next frame is presented. There are a number of variables in the capabilities of devices that users access the site with. That is why it is often difficult to define good responsiveness versus bad responsiveness. However, as a general rule, if a site receives an INP score of 200 milliseconds or less, it shows more responsiveness than a site that has a higher INP score. INP scores over 500 milliseconds show poor responsiveness.

INP is a more thorough metric than FID. It considers all page interactions on a website, while FID only considers the first-page interaction. 

In some cases, it is possible that no INP value will be reported. This can occur for a number of reasons, including that the user simply opened a page but never interacted with it, or the user interacted in ways not reported by the metric, such as hovering or scrolling. INP’s score comes from a sample of the single longest interactions that a user encounters when visiting the site.

Identifying INP Issues

Field data as well as lab data can help identify INP issues. Field data from Real User Monitoring (RUM) is obtained by monitoring users on a page and measuring its performance for each of those users. This is a great place to start when identifying INP issues. It shows how the website will respond when accessed from actual devices, the network conditions of the device, and the users’ geographic locations.

Websites that qualify for inclusion in the Chrome User Experience Report (CrUX) can obtain field data from INP through PageSpeed Insights. Unfortunately, CrUX provides limited information. It allows the user to identify that a problem exists but not to fully determine exactly what the problem is.

Once you have field data indicating an INP problem, lab data can be used to control a page load using a predefined set of conditions tailored to a specific device and network. Without field data, lab data can still be used to identify INP issues. You can follow common user flows, test interactions, and interact with the page while loading to uncover slow interactions.

Analyzing and Prioritizing INP Issues

Website owners and developers can analyze INP issues through the Core Web Vitals report. They can visit this report page and search for their website (property). It will also offer two reports—one for mobile devices and one for desktops. Select the report that features low INP values, open the report, and scroll down to find INP information. If you received an email from Google about INP issues, you can also click on the link provided. Study the affected pages and their metrics in order to begin addressing the issues.

FREE PERFORMANCE CHECKLIST Your site performance checklist to help you assess your website health   

Fixing INP Issues

One of the simplest ways to improve your INP scores is by optimizing your main thread work. Some of the most common reasons for websites being slow to respond is to reduce the number of third-party fonts and plug-ins that can cause significant delays in page load. JavaScript files can misfire, and this is another cause of significant delays in response to user interactions. Additionally, large images can also be the cause of poor INP scores.

Interactivity can be improved by mitigating main thread blocking through the optimization of critical rendering path and render-blocking resources and utilizing web workers or asynchronous processing to offload non-critical tasks. You can also alleviate INP problems by employing code splitting or lazy loading techniques to offload non-critical tasks to prioritize critical components.

Testing and Monitoring

Continuous testing and monitoring of your website is crucial to improving INP values. RUM analytics tools can be valuable in this process as they already support Core Web Vitals. However, if you do not have these tools at your disposal, it is possible to obtain the information you need through a traditional analytics tool by defining and measuring custom metrics or events, computing the value of the metric in your frontend JavaScript code, and sending the metric value to your analytics backend. However, it is important to avoid summing up a range of values for a performance method by calculating an average, as averages fail to represent any single user’s interaction.

Additional Resources and Tools

There are many resources and tools available to help you improve your INP values. These include:

Search Engine Journal also offers a free ebook. This provides a comprehensive look at Core Web Vitals and how to measure them.

INP’s Impact on Website Owners and Developers

In spite of the negativity over Google’s ever changing SEO algorithm and the concern of “failing” Google’s assessment, there are some positives to INP. It allows site owners and developers to have the ability to identify issues slowing down the interactivity of the site. Thus, making for a more positive user experience. It builds on the limitations of FID, allowing for information about input delay at the user’s first interaction, but also delays in processing time and visual feedback after the browser receives user input.For more information about Core Web Vitals, INP, and page speed optimization, our team at Ndevr can assist. We can assist in ensuring your website offers your users the best experience possible. Contact us by calling 719-286-3387, sending us an email at contact@ndevr.io, or filling out our online contact form.

Newsletter Signup

Share