--- title: "Blog" description: "Read about the background of our monitoring solution, new features and case studies" canonical: "https://www.rumvision.com/blog/performance-now-2024/" --- Breadcrumbs: [Home](https://www.rumvision.com/?format=md) > Blog # Performance now() 2024 In 2024 we weren't only the sponsor but were also speaking at a sold out Performance.now() conference. Performance.now() returned for its 5th edition [this year](https://perfnow.nl/2024/), 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](https://www.rumvision.com/about-us/?format=md#p-8341). ## Performance now() 2025 video and slides The [video of our talk](https://youtube.com/watch?v=whgZ8PTh82M) can be found on the paid YouTube channel of Web Conferences Amsterdam. The [slides of our talk (PDF, 9.02MB)](https://www.rumvision.com/file/upload/doc/20241115-performance-now.pdf) are free to download. ## 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: [![chart-process-v2.png](https://www.rumvision.com/file/upload/img/blog/chart-process-v2.png)](https://www.rumvision.com/file/upload/img/blog/chart-process-v2.png) Alternative, read up on using your [RUM LoAF data for INP debugging purposes](https://www.rumvision.com/blog/using-your-rum-loaf-data-for-inp-debugging-purposes/?format=md). ## 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](https://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](https://almanac.httparchive.org/en/2024/performance#inp-subparts) - **Mobile INP by script category (from RUMvision)** [almanac.httparchive.org/en/2024/performance#long-animations-frames](http://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](https://web.dev/case-studies/taboola-inp) - **Third party ditching moment.js** [github.com/w3c/long-animation-frames#value-to-end-users--publishers](https://github.com/w3c/long-animation-frames#value-to-end-users--publishers) [momentjs.com/docs/#/-project-status/](https://momentjs.com/docs/#/-project-status/) - **CPU vs GPU animations** [web.dev/articles/animations-guide](https://web.dev/articles/animations-guide) - **Optimizing long tasks** [web.dev/articles/optimize-long-tasks#scheduler-dot-yield](https://web.dev/articles/optimize-long-tasks#scheduler-dot-yield) - **yieldToMain by Jacob Groß** [kurtextrem.de/posts/improve-inp#exit-event-handlers-yieldunlessurgent](https://kurtextrem.de/posts/improve-inp#exit-event-handlers-yieldunlessurgent) - **Annotations landed in the Performance panel** [developer.chrome.com/blog/devtools-annotations](https://developer.chrome.com/blog/devtools-annotations) - **Third party JavaScript book cover** [manning.com/books/third-party-javascript](https://www.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](https://www.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](https://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/](https://www.w3.org/community/rumcg/) - **Share your performance tool, technique or research** [calendar.perfplanet.com/contribute/](https://calendar.perfplanet.com/contribute/) - **Proposal: asynchronous event listeners** [github.com/whatwg/dom/issues/1308](https://github.com/whatwg/dom/issues/1308) - **vote for proposal to get CWV into Interop 2025** [github.com/web-platform-tests/interop/issues/894](https://github.com/web-platform-tests/interop/issues/894) ### Other resources - **Interactions video on hotel site** [youtube.com/embed/MJ\_pnKlMO0A](https://www.youtube.com/embed/MJ_pnKlMO0A) - **INP replacing FID (March 12 2024)** [web.dev/blog/inp-cwv-march-12](https://web.dev/blog/inp-cwv-march-12) - **INP data from RUMvision on perf planet** [calendar.perfplanet.com/2023/inp-performance-analysis-rumvision-data/](https://calendar.perfplanet.com/2023/inp-performance-analysis-rumvision-data/) - **INP attribution: LoadState** [rumvision.com/help-center/filters/metric/load-state/](https://www.rumvision.com/help-center/filters/metric/load-state/?format=md) [github.com/GoogleChrome/web-vitals#loadstate](https://github.com/GoogleChrome/web-vitals#loadstate) - **INP and defining the threshold** [web.dev/articles/defining-core-web-vitals-thresholds#inp](https://web.dev/articles/defining-core-web-vitals-thresholds#inp) - **Live action photo from Robin's talk in 2023:** [youtube.com/watch?v=MV034VqHv5Q](https://www.youtube.com/watch?v=MV034VqHv5Q) - **Google I/O: New field insights for debugging INP** [io.google/2024/explore/ba446093-0036-410b-ba1e-f9016ec21899/](https://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/](https://www.rumvision.com/blog/how-device-capabilities-might-impact-your-site-speed/?format=md) - **navigator.deviceMemory** [developer.mozilla.org/en-US/docs/Web/API/Device\_Memory\_API](https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API) - **web.dev INP & TBT articles** [web.dev/articles/inp#whats\_in\_an\_interaction](https://web.dev/articles/inp#whats_in_an_interaction) [web.dev/articles/inp#how-to-measure-inp](https://web.dev/articles/inp#how-to-measure-inp) [web.dev/articles/tbt#how\_to\_improve\_tbt](https://web.dev/articles/tbt#how_to_improve_tbt) - **developer.chrome.com & INP debugging** Whiskers: [developer.chrome.com/blog/new-in-devtools-121#interactions](https://developer.chrome.com/blog/new-in-devtools-121#interactions) Performance Panel: [developer.chrome.com/docs/devtools/performance/overview](https://developer.chrome.com/docs/devtools/performance/overview) LoAF: [developer.chrome.com/docs/web-platform/long-animation-frames#loaf-entry](https://developer.chrome.com/docs/web-platform/long-animation-frames#loaf-entry) - **LoAF invokerType** [rumvision.com/help-center/filters/metric/loaf/#loaf-invoker](https://www.rumvision.com/help-center/filters/metric/loaf/?format=md#loaf-invoker) [developer.mozilla.org/en-US/docs/Web/API/PerformanceScriptTiming/invokerType](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceScriptTiming/invokerType) - **INP + LoAF = `git blame`** [rumvision.com/help-center/monitoring/dashboard/third-parties/](https://www.rumvision.com/help-center/monitoring/dashboard/third-parties/?format=md) ### Final slide Links on the final slide are as following: - **Karlijn Löwik on LinkedIn** [linkedin.com/in/karlijn-lowik](https://linkedin.com/in/karlijn-lowik/) - **Erwin Hofman on LinkedIn** [linkedin.com/in/erwinhofman](https://linkedin.com/in/erwinhofman) - **RUMvision LinkedIn company page** [linkedin.com/company/rumvision](https://linkedin.com/company/rumvision) - **RUMvision demo** [rumvision.com/demo](https://www.rumvision.com/demo?format=md) ### Tweets Some existing and deleted tweets were used in our slides: - **Stoyan Stefanov tweet** [x.com/stoyanstefanov/status/1852778955817755105](https://x.com/stoyanstefanov/status/1852778955817755105) - **Addy Osmani (deleted) tweet** [web.archive.org/web/20210828024054/https://twitter.com/addyosmani/status/1304676118822174721](https://web.archive.org/web/20210828024054/https://twitter.com/addyosmani/status/1304676118822174721) - **Mateusz Krzeszowiak tweet** [x.com/krzksz/status/1854927029688303684](https://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/](https://www.rumvision.com/tools/core-web-vitals-compare-competitors/?format=md) - **Web perf summit cartoon** [x.com/jaffathecake/status/1149264880974913536](https://x.com/jaffathecake/status/1149264880974913536) - **Inequality gap** [infrequently.org/2024/01/performance-inequality-gap-2024/](https://infrequently.org/2024/01/performance-inequality-gap-2024/) - **Introducing web vitals essential metrics** [blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html](https://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](https://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](https://developers.google.com/speed/docs/insights/release_notes) - **"In the loop" by Jake Archibald** [youtu.be/cCOL7MC4Pl0?t=508](https://youtu.be/cCOL7MC4Pl0?t=508) - **CrUX data reports** [httparchive.org/reports/chrome-ux-report](https://httparchive.org/reports/chrome-ux-report) - **Extensibility API (for custom tracks)** [developer.chrome.com/docs/devtools/performance/extension](https://developer.chrome.com/docs/devtools/performance/extension) - **Metrics changelog** [chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics\_changelog/](https://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](https://www.mentimeter.com/) - **Carbon for styled code** [carbon.now.sh](https://carbon.now.sh/) - **Canva for styling adjustments** [canva.com](https://www.canva.com/) - **Pexels for intro image** [pexels.com/photo/houses-near-body-of-water-2056155/](https://www.pexels.com/photo/houses-near-body-of-water-2056155/) - **Imfglip for memes** [imgflip.com/](https://imgflip.com/)