Interaction to Next Paint (INP) monitoring and improvements

[thetwopct]

What is INP

INP - Interaction to Next Paint - is a new Core Web Vital coming in March 2024

INP measures how quickly a webpage reacts to user interactions.

An ‘interaction’ refers to any action a user takes on a webpage, like clicking a button, tapping on a touchscreen, or pressing a key.

'Next Paint’ denotes the next visual update of the UI following the interaction.

i.e. if a user clicks a button, INP measures the time it takes for the page to respond to that click visually.

INP focuses on three main types of user interactions:

• Mouse clicks
• Taps on a touchscreen
• Key presses

It does not include:

• Hovering
• Scrolling

How to reduce it

Minimize JavaScript execution

Keep your JavaScript execution time to a minimum. Heavy JavaScript tasks can block the main thread and delay the response to user input.

Give feedback to user

If you need to do for instance heavy JavaScript processing in response to user input, consider updating the UI before starting the CPU task - i.e. show a spinner.

Break up Long Tasks

Split large JavaScript tasks into several smaller tasks. This keeps the main thread free more often and reduces input delay.

Keep Event Handlers Lightweight

Try to keep the code in your event handlers as light as possible. Heavy computations can increase processing time and lead to higher INP.

Use Web Workers

Web Workers allow you to run JavaScript in the background on a separate thread. This can free up the main thread and reduce processing time.

Use GPU Acceleration

Transitions and animations that can be handled by the GPU should be. This can make rendering more efficient and reduce presentation delay.

Optimize Images

High-resolution images can slow down the rendering of the website.

Utilize Content-Visibility for Off-Screen Elements

By applying content-visibility: auto; to off-screen elements, you instruct the browser to skip rendering of those elements until they’re needed.

Use requestIdleCallback

You can use the requestIdleCallback function to schedule non-essential work to run when the browser is idle. This helps to keep the main thread free.

Using Content-Visibility

Off-screen content within a content-visibility: auto property remains in the document object model and the accessibility tree. This allows improving page performance with content-visibility: auto without negatively impacting accessibility.

---

Based on the CNCF.io site and how it works, I feel like the 3 main focus areas should be:

1. Minimize JavaScript execution
2. Using Content-Visibility
3. Optimize Images

1) Minimize JavaScript execution

We have implemented Flying Scripts to delay the loading of heavy tracking scripts until after the page and UI has loaded.

This works pretty well to reduce INP and keep pages loading very fast without impacting tracking.

We disable Flying Scripts on pages matching the following patterns:

• certification
• about/contact
• telco-news-signup
• credits/sponsor
• kubeweekly
• wisdom-of-the-cloud
• get-cto-summit-report

This correlates with some reported INP page issues ("certification"):

The certification pages (and others mentioned above) use a Hubspot form above the fold, so they need to prioritise HubSpot script loading otherwise there is large CLS issues. Even prioritising the script loading there is a delay with layout:

Other tasks:

• Can we double check that all scripts loaded via Google Tag Manager are needed and needed on all pages?

2) Using Content-Visibility

Content-Visibility allows for sections of the page to be "lazy loaded" and helps render times of the page. I've implemented this on a few pages of the site already.

Issues with Content-Visibility

Since styles for off-screen content are not rendered, elements intentionally hidden with display: none or visibility: hidden will still appear in the accessibility tree. If you don't want an element to appear in the accessibility tree, use aria-hidden="true".

• Monitor and experiment with content-visibility on specific pages where INP is high (home page)

3) Optimise Images

Our images are already mostly well optimised. Images we cannot optimise are typically hosted outside the cncf.io website - i.e. pictures of "People" are pulled in from GitHub.

The images we do have could be further optimised by implementing webP versions of them. We have previously discussed this as a task - #599 - and it may well be worth testing it out. I believe we had issues with webP before - on LF events? - but I would hope by now any issues with the plugin / pantheon have been resolved.

• Implement webP image formats for uploads

Update: We have applied webp manually to some images

Monitoring results

Deploying JS optimisations, page optimisations and content-visibility experiments, our INP scores have improved already:

[cjyabraham]

Regarding GTM, we are loading GAnalytics UA and GA4 properties. Soon we will be able to take down the UA tag.

There is also some kind of Zoominfo tag that LF Marketing installed. I am inquiring about it...

[cjyabraham]

Reply from Chip: "ZoomInfo is a sales tool. This was deployed to support Mike Woster’s team. It gives them sales intelligence on who is visiting the site"

[thetwopct]

Our INP is passing, so I think the work we did on this early on was worth it. Will keep monitoring but will class this as done for now.