Performance.now() returned for its 5th edition this year, taking a break due to COVID in between. The event showcased exciting developments and insights in users, Core Web Vitals and APIs.
The two-day, single-tracked conference featured a wealth of amazing talks. Among them was ours, presented by Karlijn and Erwin. We delved into INP cases, covering their history, purpose, associated toolsets, and implementation process.
In this blog post, you'll find the slides and links to resources for further exploration. If you'd like to connect with us directly, our contact details are available on the "About Us" page.
Performance now() 2025 slides
Process to debug INP flowchart
Summarized and as shown during the talk, this is a rough flowchart of how I use LoAF data in RUM:
Alternative, read up on using your RUM LoAF data for INP debugging purposes.
Resources
Resources used for the slides and during the presentation are as following:
Web Almanac
This year, our RUMvision datasets were used in the HTTP Archive's Web Almanac 2024. You will find charts based on RUMvision data for both the LCP and INP metrics.
In general, here are links for reference as used in our slidedeck:
- Good INP by device
almanac.httparchive.org/en/2024/performance#interaction-to-next-paint-inp - INP sub-parts by percentile (from RUMvision)
almanac.httparchive.org/en/2024/performance#inp-subparts - Mobile INP by script category (from RUMvision)
almanac.httparchive.org/en/2024/performance#long-animations-frames
Cases
Resources used on slides related to cases are as following:
- Taboola 36% INP improvement
web.dev/case-studies/taboola-inp - Third party ditching moment.js
github.com/w3c/long-animation-frames#value-to-end-users--publishers
momentjs.com/docs/#/-project-status/ - CPU vs GPU animations
web.dev/articles/animations-guide - Optimizing long tasks
web.dev/articles/optimize-long-tasks#scheduler-dot-yield - yieldToMain by Jacob Groß
kurtextrem.de/posts/improve-inp#exit-event-handlers-yieldunlessurgent - Annotations landed in the Performance panel
developer.chrome.com/blog/devtools-annotations - Third party JavaScript book cover
manning.com/books/third-party-javascript - Speculation Rules in Hyvä 1.3.7
hyva.io/blog/product/using-speculation-rules-for-instant-page-loads.html - Google Publisher Tag
threadYield
developers.google.com/publisher-tag/reference#googletag.config.PageSettingsConfig.threadYield
Community & support
Community and support related shout-outs:
- W3C RUM Community Group
w3.org/community/rumcg/ - Share your performance tool, technique or research
calendar.perfplanet.com/contribute/ - Proposal: asynchronous event listeners
github.com/whatwg/dom/issues/1308 - vote for proposal to get CWV into Interop 2025
github.com/web-platform-tests/interop/issues/894
Other resources
- Interactions video on hotel site
youtube.com/embed/MJ_pnKlMO0A - INP replacing FID (March 12 2024)
web.dev/blog/inp-cwv-march-12 - INP data from RUMvision on perf planet
calendar.perfplanet.com/2023/inp-performance-analysis-rumvision-data/ - INP attribution: LoadState
rumvision.com/help-center/filters/metric/load-state/
github.com/GoogleChrome/web-vitals#loadstate - INP and defining the threshold
web.dev/articles/defining-core-web-vitals-thresholds#inp - Live action photo from Robin's talk in 2023:
youtube.com/watch?v=MV034VqHv5Q - Google I/O: New field insights for debugging INP
io.google/2024/explore/ba446093-0036-410b-ba1e-f9016ec21899/ - What has the highest correlation with INP?
rumvision.com/blog/how-device-capabilities-might-impact-your-site-speed/ - navigator.deviceMemory
developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API - web.dev INP & TBT articles
web.dev/articles/inp#whats_in_an_interaction
web.dev/articles/inp#how-to-measure-inp
web.dev/articles/tbt#how_to_improve_tbt - developer.chrome.com & INP debugging
Whiskers: developer.chrome.com/blog/new-in-devtools-121#interactions
Performance Panel: developer.chrome.com/docs/devtools/performance/overview
LoAF: developer.chrome.com/docs/web-platform/long-animation-frames#loaf-entry - LoAF invokerType
rumvision.com/help-center/filters/metric/loaf/#loaf-invoker
developer.mozilla.org/en-US/docs/Web/API/PerformanceScriptTiming/invokerType - INP + LoAF = `git blame`
rumvision.com/help-center/monitoring/dashboard/third-parties/
Final slide
Links on the final slide are as following:
- Karlijn Löwik on LinkedIn
linkedin.com/in/karlijn-lowik - Erwin Hofman on LinkedIn
linkedin.com/in/erwinhofman - RUMvision LinkedIn company page
linkedin.com/company/rumvision - RUMvision demo
rumvision.com/demo
Tweets
Some existing and deleted tweets were used in our slides:
- Stoyan Stefanov tweet
x.com/stoyanstefanov/status/1852778955817755105 - Addy Osmani (deleted) tweet
web.archive.org/web/20210828024054/https://twitter.com/addyosmani/status/1304676118822174721 - Mateusz Krzeszowiak tweet
x.com/krzksz/status/1854927029688303684
Removed resources
Other resources that we used when working on our slide deck but which we ended up removing for timing reasons:
- Comparing CrUX amongst competitors
rumvision.com/tools/core-web-vitals-compare-competitors/ - Web perf summit cartoon
x.com/jaffathecake/status/1149264880974913536 - Inequality gap
infrequently.org/2024/01/performance-inequality-gap-2024/ - Introducing web vitals essential metrics
blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html - Google's "Speed update" in 2018
developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search - PageSpeed Insights release notes
developers.google.com/speed/docs/insights/release_notes - "In the loop" by Jake Archibald
youtu.be/cCOL7MC4Pl0?t=508 - CrUX data reports
httparchive.org/reports/chrome-ux-report - Extensibility API (for custom tracks)
developer.chrome.com/docs/devtools/performance/extension - Metrics changelog
chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/
Tools
On top of the Google Chrome browser and DevTools, we also used other tools to create our slide deck. These are mentioned below.
- Mentimeter for the (interactive) presentation
mentimeter.com - Carbon for styled code
carbon.now.sh - Canva for styling adjustments
canva.com - Pexels for intro image
pexels.com/photo/houses-near-body-of-water-2056155/ - Imfglip for memes
imgflip.com/
![Core Web Vitals and SEO - are they a ranking factor or not? [updated november 2024+ FAQ]](https://www.rumvision.com/file/upload/img/blog/thumb.do-core-web-vitals-impact-seo.png)
