FID to INP: Mastering the New Core Web Vitals Metric

@schachin
Kristine Schachinger
Kristine Schachinger | @schachin
Meet The New Core Web Vital.
Happy Birthday INP (Interaction to Next Paint)!

@schachin
Happy
Happy Birthday INP!
March 12th

@schachin
Core Web Vitals.
Bye FID. Hello INP.

@schachin
What are the Core Web Vitals?
Core Web Vitals are a measurement.
They evaluate key metrics Google associates with positive user
experience.

@schachin
Core Web Vitals were added to better evaluate
the quality of a webpage's user experience

@schachin
What WERE the Core Web Vitals?
https://web.dev/articles/vitals

@schachin
What are the Core Web Vitals - NOT?
Core Web Vitals are NOT the full measure
of how a page loads or the time it takes to load it.
It is about the user experience,
or user perception of that experience and the page.

@schachin
CWVs are meant to measure these user interactions.

@schachin
CRuX (RUM) Data vs Lab Data.
https://web.dev/articles/user-centric-performance-metrics#defining_metrics

@schachin
CrUX Reports vs Lab Data.
To measure CWVs, you want to use real user data.
This data is called RUM data (Real Time User Monitoring)
And Google displays these in a CrUX report
(Chrome User Experience) in such tools as
Google Search Console, Lighthouse, or Page Speed Insights.

@schachin
https://developer.chrome.com/docs/crux/methodology#user-eligibility
How is Data Collected?
“CrUX is the official dataset of the Web Vitals program. All user-
centric Core Web Vitals metrics are represented.
CrUX data is collected from real browsers around the world
based on certain browser options which determine user eligibility**.
A set of dimensions and metrics are collected which allow site
owners to determine how users experience their sites.”
** https://developer.chrome.com/docs/crux/methodology#user-eligibility

@schachin
CrUX Reports vs Lab Data.
You can use Lab Data, which means the pages were tested in a test
environment. When you do this make sure to
set the test environment to Fast 4G on a Nexus 5X phone.
If you use this setting, your site should never be too slow
for the user in the wild.

@schachin
Why does it matter?

@schachin
Why does it matter – ranking signals?

@schachin
Why does it matter – ranking signals?
Are the Core Web Vitals a Ranking Signal?
Maybe? Maybe not?
Most likely, but it is not a big one.

@schachin
USERS!
You Do It For Users.
+ Want users to stay on your site.
+ Return to your site
+ Convert on your site
The users' experience with your site and how your site reacts to user
interactions matters to your business because users that experience slow site
or sites that frustrate them will cause users to leave.

@schachin
USERS!
• 53% of online shoppers expect e-commerce pages to load in 3 seconds or less
• 21% of consumers say slow-loading pages are their main source of dissatisfaction
--- when shopping online.
• Half of customers will abandon their shopping carts if pages don’t load fast enough
• Businesses with slow-loading pages leave a negative impression on 45% of customers

@schachin
What is the INP Metric?
(Interaction to Next Paint)

@schachin
Why Remove the FID Metric?

@schachin
Bye FID.
FID is..
“FID measures the time from when a user first interacts with a
page (that is, when they click a link, tap on a button, or use a
custom, JavaScript-powered control) to the time when the
browser is actually able to begin processing event handlers in
response to that interaction.
What is a good FID score?
To provide a good user experience, sites should strive to have a
First Input Delay of 100 milliseconds or less. To ensure you're
hitting this target for most of your users, a good threshold to
measure is the 75th percentile of page loads, segmented
across mobile and desktop devices.”
https://web.dev/articles/fid

@schachin
What does the INP measure?

@schachin
FID INP instead measures all parts of all interactions throughout the page's lifecycle, making it a more reliable indicator of overall responsiveness than FID.
Bye FID. Hello INP.
https://web.dev/articles/inp#whats_in_an_interaction
FID (First Input Delay)
measures first interactions.
INP (Interaction to Next Paint )
measures interactions
throughout the user journey.
INP instead measures all parts of all interactions throughout the
page's lifecycle, making it a more reliable indicator of overall
responsiveness than FID.

@schachin
What is an interaction?

@schachin
FID
measures interactions throughout the user journey.
But ONLY these ones.
• Clicking with a mouse.
• Tapping on a device with a touchscreen.
• Pressing a key on either a physical or onscreen keyboard.

@schachin
FID
Interactions can consist of multiple events.
__________
For instance, a keystroke includes the following:
+ keydown, keypress, & keyup events
+ tap interactions include pointerup & pointerdown events.
The event with the longest duration within the interaction is chosen as the
interaction's latency.
___________
This also applies to iframes.
It does NOT apply to JavaScript.

@schachin
FID
INP
(Interaction to Next Paint )
Can be made up of
multiple interaction
events.

@schachin
FID
INP is calculated when the user leaves the page
resulting in a single value representative of
the page's overall responsiveness throughout its lifecycle.
A low INP means that a page is reliably responsive to user input
[Good INP = Less than 200 ms]

@schachin
FID
FID https://web.dev/articles/inp
Key point: Hovering and scrolling DOES NOT factor into INP.
BUT
+ scrolling with the keyboard
(space bar, page up, page down, and so forth) involves a keystroke
-- can trigger other events that INP does measure.
NOTE: Any resulting scrolling isn't factored into the INP calculation.

@schachin
FID
No INP?
What if no INP value is reported?
It's possible for a page to return no INP value.
Why?
• The page loaded, but the user never interacted with it.
• The page loaded, but the user interacted with it using gestures that weren't measured,
• such as scrolling or hovering over elements.
• The page is being accessed by a bot, such as a search crawler or headless browser
• that hasn't been scripted to interact with the page.

@schachin
Poor vs Good INP
FID https://web.dev/articles/inp

@schachin
FID
Bye FID. Hello INP.
SUMMARY of INP
Interaction to Next Paint (INP) is
+ a pending Core Web Vital metric
+ that assesses a page's overall responsiveness to user interactions
+ by observing the latency of all qualifying interactions
+ that occur throughout the lifespan of a user's visit to a page.
The final INP value is the longest interaction observed (sometimes ignoring outliers).
Metrics.
Must have a Next Paint of 200 milliseconds or less.
A good threshold to measure is the 75th percentile of page loads across mobile and desktop

@schachin
How to fix an INP Issue!

@schachin
FID
Bye FID. Hello INP.
How to Diagnose an INP Issue.
• Identify the cause of poor INP:
• Gather data to diagnose and improve website's INP.
• Locate slow interactions in the field:
• Utilize Real User Monitoring (RUM)
• or Chrome User Experience Report (CrUX)
• to identify specific interactions causing poor INP.
• Diagnose slow interactions in the lab:
• Test interactions in controlled environments to pinpoint performance issues.
• Optimize interactions:
• Improve input delay, processing time, and presentation delay to minimize total
interaction latency.

@schachin
FID https://web.dev/articles/find-slow-interactions-in-the-field
Bye FID. Hello INP.
https://web.dev/articles/find-slow-interactions-in-the-field
How to Fix an INP Issue.

@schachin
Helpful Links.
Learn Core Web Vitals
An initiative to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
+ https://web.dev/explore/learn-core-web-vitals
Getting Started with Measuring Web Vitals
An initiative to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
+ https://web.dev/articles/vitals-measurement-getting-started
Our top Core Web Vitals recommendations for 2023
This is from 2023, so INP is not here, but it is great information for the other two metrics.
A collection of the best practices that the Chrome DevRel team believes are the most effective ways to improve Core Web Vitals performance in 2023.
+ https://web.dev/blog/top-cwv-2023
Creating a CrUX Dashboard on Looker
+ https://developer.chrome.com/docs/crux/guides/looker-studio-dashboard

@schachin

@schachin
Kristine Schachinger | @schachin
Meet The New Core Web Vital
Happy Birthday INP!

FID to INP: Mastering the New Core Web Vitals Metric

Recommended

Recommended

More Related Content

Similar to FID to INP: Mastering the New Core Web Vitals Metric

Similar to FID to INP: Mastering the New Core Web Vitals Metric (20)

More from Anton Shulke

More from Anton Shulke (20)

Recently uploaded

Recently uploaded (20)

FID to INP: Mastering the New Core Web Vitals Metric

Editor's Notes