INP: New Metric for Core Web Vitals!

As of March 2024, we’ll be using INP to measure Core Web Vitals and we’ll be canning FID (First Input Delay). It is experimental and we’ll be going through your sites one by one. This week Google starting sending out notices if your INP wasn’t passing.

What is INP?

INP is Interaction to Next Paint. In other words, it will measure the time between an Interaction (click a button) and the Next Paint (open the popup window).

Getting a “low” score in INP is desirable and will tell Google that your site is interacting quickly with visitors – therefore creating the best user experience.

This is so predictable! When Core Web Vitals started measuring First Input Delay a bunch of hooligans started optimizing the top of the page while sacrificing the rest. As long as “Above the Fold” loaded instantly the FID metric was happy. The problem for them, is that google is no dummy. And now, as a direct result – we have Interaction to Next Paint. Cause what matters is the user experience.

Core Web Vitals is to create a better user experience. So here is how to do that – ethically and collaboratively with Google. You will not find tricks – and you will not have to undo/redo this in 6 months… We will be updating this post as we learn more!

How to measure INP.

We have a lot of moving parts on every single web page, blog post, media page, etc. So which interaction is measured? First, the measurements are per page, not per website. So your homepage may have a different measurement for INP than the blog archive. But which interaction/ button / form / image is measured?

Which interaction is measured?

All of them. They will measure all the interactions from head to toe of the page in question. If you have over 50 interactions on the page, the speed is most often measured at the 98th percentile. If you have under 50 interactions, the slowest interaction is the one that is displayed for measurement. This is known as “98% percentile rule.”

Latency is another word for a measurement of slowness (is slowness a word?). So you’ll see things like this: The latency of that button is … seconds. So when measuring INP you might find the measurement by ‘latency’. The longest latency (the slowest interaction) is the one measured on a site with 50 or less interactions. The longest latency on a busier page, is actually the 98th percentile.

What composes an interaction?

There are three parts to any web page interaction. These parts are Blocking Tasks, Processing Time (which is up to the browser), and Presentation Delay. This affects how much control we have over INP – some ideas for speeding things up visually are below.

What tools are reliable?

The only tool that is setup to provide INP is Pagespeed so far. The reason is that this measurement can only be obtained from field data. Remember when we talked about the difference between field data and lab data?

• Lab data: calculations based on field data
• Field data: data collected from individual users

Field Data is available from the Google CrUX database which is available through BigQuery (which is primarily available to enterprise users) and is the source database for Pagespeed Insights.

With Pagespeed Insights – you can get 28 days of historical data of the 75th percentile score. Once you are armed with what your 75th percentile latency is – you can get to work.

What is a “Passing” INP?

Interaction to Next Paint needs to be under 200ms. (that is 1/5th of a second – that is FAST). We are working on exactly how to get that done. We’ve included some tips below. The only tools so far that are set up for measuring INP is Pagespeed and the BigQuery dashboard.

How to Optimize for INP

Optimizing our pages for speed isn’t that different from before. We prevent blocking scripts, load things asynchronously, encourage fast TTFB to reduce input delay:

• use lazy-loading
• load scripts async and defer whatever you can
• remove unused scripts
• pre-load and load from CDN where possible
• rewrite clunky code
• create easy to load pages: minimal DOM size, not too many huge images, animations, scripts and ads

The second thing we’ve discovered so far is to load something visually while waiting for response from server. For example, while waiting for video to load, load a css animation. While waiting for a form to send, add immediate “Sending form…” message.

The third thing we learned today (thanks to this article)is to render the updated content – not the entire page. This will have a lot to do with your caching and CDN. We’re working with WP-Rocket to find a solution to this for WordPress users.

Conclusion: Interaction to Next Paint

Is this a whole new level of frustration? Perhaps. But if you have put the time and energy into a properly designed site, using the caching and optimization plugins like we’ve recommended (WP Rocket & EWWW.io) you will be mostly there!

I strongly recommend reducing your DOM size, removing as many ads, remove custom fonts, remove shiny wiggly things. Simple pages that load quickly, meet expectations and provide the intended information or service: A+ user experience!