Interaction to Next Paint (INP)

On March 12th, Google will replace First Input Delay (FID) in Core Web Vitals with Interaction to Next Paint (INP).

Core Web Vitals are currently:

• Largest Contentful Paint (LCP): measures speed
• First Input Delay (FID): measures interactivity
• Cumulative Layout Shift (CLS): measures stability

Google defines targets for each vital to meet a "good" user experience (i.e. P75):

• LCP: < 2.5s
• FID: < 100ms
• CLS: < 0.1

Testing LCP and CLS

You can test a website’s LCP and CLS in Chrome DevTools > Lighthouse by running a performance test. The homepage of my garden performs well on CLS with a score of 0, and LCP is solid at around 1.5 seconds for Lighthouse mobile performance audits. Desktop audits are much more lenient (LCP of ~0.3 seconds).

The audit does diagnose a few improvements I could make, though, mainly around pruning unused JavaScript from the bundle. Before making any granular adjustments, I plan to migrate from the Next.js /pages router to the /app directory. I’d also like to store edison bulb theme preference in a cookie to prevent dark mode flash. I already lazy load my Pagefind search index, so that shouldn’t slow down initial page load, I don’t think.

What about FID?

FID has to be tested in the field with real users, which is still possible to do automatically with PageSpeed Insights. You have to have enough data from opted-in users for a given website, though. If you don’t have enough data, Total Blocking Time (TBT) is a correlated metric that can serve as a proxy.

The TBT (hard to not read that as throwback Thursday) on this garden is speedy at 60ms. That feels right to me intuitively because I most often visit my own website to quickly find something by typing Cmd + K immediately after entering the URL.