🇫🇷 dotJS 2026

Web Performance APIs That You (Probably) Never Knew Existed

Responsiveness to user interaction is crucial for modern web apps, and we’ve all heard about many fantastic tools for measuring and optimizing performance.

However, we no longer have to rely entirely on pre-built dashboards to understand performance. Browsers already expose a rich set of native performance APIs that let us go deeper.

In this talk, we’ll explore lesser-known platform primitives for measuring responsiveness and diagnosing bottlenecks. From observers and timing APIs to scheduling primitives and resource hints, through navigation improvements like View Transitions.

Be ready to turn your browser into a performance toolkit and build performance metrics that reflect what your users really care about.

Transcript

1. Bonjour, Paris! 👋 🇫🇷 WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED • SEPTEMBER 18, 2026.
2. WEB PERFORMANCE APIS THAT YOU ( PROBABLY ) NEVER KNEW EXISTED MATHEUS ALBUQUERQUE • @ythecombinator
3. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Preamble
5. THE WEB PLATFORM IN 2008
6. THE WEB PLATFORM IN 2008
7. THE WEB PLATFORM IN 2010
8. THE WEB PLATFORM IN 2012
9. THE WEB PLATFORM IN 2014
11. 🙅🙅🙅
12. #IMHO 🌶 We don’t need another CEO manifesto to tell us what the Web Platform can do.
13. "THE (ABUNDANT) STATE OF THE WEB"
14. #IMHO 🌶 Performance work has a tendency to get complicated very quickly.
15. FIXING WEB PERFORMANCE…
16. FIXING WEB PERFORMANCE…
17. #IMHO 🌶 The modern Web Platform sometimes lets us move backwards on this analogy.
18. FIXING WEB PERFORMANCE…
19. THIS TALK PRESENTS… ↝ PREAMBLE ↝ MEASURING WITH THE PLATFORM ↝ IMPROVING WITH THE PLATFORM ↝ CLOSING THOUGHTS
20. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Measuring With the Platform
21. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ LAYOUT INSTABILITY
22. LAYOUT INSTABILITY: OVERVIEW ↝ MANY WEBSITES HAVE DOM ELEMENTS SHIFTING AROUND DUE TO CONTENT LOADING ASYNCHRONOUSLY. ↝ THIS API ALLOWS YOU TO: ↝ MEASURE REAL CLS VALUES IN PRODUCTION. ↝ IDENTIFY THE EXACT DOM ELEMENTS RESPONSIBLE FOR LAYOUT INSTABILITY. ↝ IGNORE EXPECTED SHIFTS CAUSED BY USER.
23. LAYOUT INSTABILITY: OVERVIEW const observer new PerformanceObserver((list) for (const entry of list.getEntries()) { if (entry.hadRecentInput) continue; const source entry.sources?.[0]?.node; console.log("Shift:", entry.value, source); } }); observer.observe({ type: "layout-shift", buffered: true, > = = = }); {
24. LAYOUT INSTABILITY: OVERVIEW const observer new PerformanceObserver((list) for (const entry of list.getEntries()) { if (entry.hadRecentInput) continue; const source entry.sources?.[0]?.node; console.log("Shift:", entry.value, source); } }); observer.observe({ type: "layout-shift", buffered: true, > = = = }); {
25. LAYOUT INSTABILITY: OVERVIEW const observer new PerformanceObserver((list) for (const entry of list.getEntries()) { if (entry.hadRecentInput) continue; const source entry.sources?.[0]?.node; console.log("Shift:", entry.value, source); } }); observer.observe({ type: "layout-shift", buffered: true, > = = = }); {
26. LAYOUT INSTABILITY: IDEAS ↝ DETECT INSTABILITY INTRODUCED BY THIRD-PARTY EMBEDS OR PERSONALIZATION. ↝ DETECT IMAGES OR IFRAMES LOADING WITHOUT A RESERVED SPACE. ↝ DETECT LAYOUT SHIFTS CAUSED BY WEB-FONT SWAPS.
27. LAYOUT INSTABILITY: IDEAS
28. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED LONG ANIMATION FRAMES
29. LONG ANIMATION FRAMES: OVERVIEW ↝ DETECT UPDATES THAT TAKE MORE THAN 50 MS. ↝ CAPTURE WORK ACROSS JAVASCRIPT + RENDERING, NOT JUST SCRIPT EXECUTION. ↝ ATTRIBUTE SLOW FRAMES TO THE SCRIPTS AND PHASES CONSUMING TIME. ↝ USEFUL FOR UNDERSTANDING JANK, RESPONSIVENESS ISSUES, AND INP REGRESSIONS.
30. LONG ANIMATION FRAMES: OVERVIEW const observer new PerformanceObserver((list) { for (const entry of list.getEntries()) { console.log("Duration:", entry.duration); console.log("Blocking:", entry.blockingDuration); console.log("Scripts:", entry.scripts); } }); observer.observe({ type: "long-anim ation-frame", buffered: true, > = = });
31. LONG ANIMATION FRAMES: OVERVIEW const observer new PerformanceObserver((list) { for (const entry of list.getEntries()) { console.log("Duration:", entry.duration); console.log("Blocking:", entry.blockingDuration); console.log("Scripts:", entry.scripts); } }); observer.observe({ type: "long-anim ation-frame", buffered: true, > = = });
32. LONG ANIMATION FRAMES: OVERVIEW const observer new PerformanceObserver((list) { for (const entry of list.getEntries()) { console.log("Duration:", entry.duration); console.log("Blocking:", entry.blockingDuration); console.log("Scripts:", entry.scripts); } }); observer.observe({ type: "long-anim ation-frame", buffered: true, > = = });
33. LONG ANIMATION FRAMES: IDEAS DETECT: ↝ INP REGRESSIONS. ↝ RENDERING PIPELINE BOTTLENECKS. ↝ ANIMATION FRAME DROPS. ↝ SLOW CSS/LAYOUT RECALCULATIONS. ↝ SCRIPTS FORCING EXPENSIVE STYLE/LAYOUT.
34. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SELF PROFILING
35. SELF PROFILING: OVERVIEW ↝ RUNS A SAMPLING PROFILER ON REAL USERS' DEVICES. ↝ PERIODICALLY SNAPSHOTS THE CURRENT JAVASCRIPT CALL STACK. ↝ FINDS STATISTICALLY FREQUENT HOT PATHS WITHOUT INSTRUMENTING EVERY FUNCTION. ↝ LOWER OVERHEAD THAN TRACING EVERY FUNCTION ENTRY/EXIT.
36. SELF PROFILING: OVERVIEW const profiler new Profiler({ sampleInterval: 10, maxBufferSize: 10000 }); await doWork(); const profile await profiler.stop(); = = console.log(profile.samples);
37. SELF PROFILING: IDEAS ↝ PROFILE THIRD-PARTY SCRIPT EXECUTION TIME. ↝ DETECT HOT LOOPS IN DATA PROCESSING PIPELINES. ↝ PROFILE HYDRATION BOTTLENECKS. ↝ DETECT REGRESSIONS AFTER FEATURE ROLLOUT.
38. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED MEMORY USAGE
39. MEMORY USAGE: OVERVIEW ↝ ESTIMATE HOW MUCH MEMORY YOUR PAGE IS USING IN THE BROWSER. ↝ BREAK USAGE DOWN ACROSS JAVASCRIPT, DOM, AND OTHER BROWSER-MANAGED RESOURCES. ↝ TRACK MEMORY GROWTH OVER TIME TO SPOT POTENTIAL LEAKS. ↝ USEFUL FOR LONG-LIVED APPS WHERE PERFORMANCE DEGRADES GRADUALLY.
40. MEMORY USAGE: OVERVIEW const memory await performance.measureUserAgentSpecificMemory(); console.log("Estimated bytes:", memory.bytes); for (const entry of memory.breakdown) { console.log(entry.types, entry.bytes); = }
42. MEMORY USAGE: LEAKS #1 const obj { a: new Array(1000), b: new Array(2000) }; setInterval(() { console.log(obj.a); > = = }, 1000);
43. MEMORY USAGE: LEAKS #2 document.body.removeChild(el); window.addEventListener("click", () console.log(el); > = }); {
44. MEMORY USAGE: LEAKS ↝ FORGETTING TO UNREGISTER AN EVENT LISTENER. ↝ ACCIDENTALLY CAPTURING OBJECTS FROM AN IFRAME. ↝ NOT CLOSING A WORKER. ↝ ACCUMULATING OBJECTS IN ARRAYS. ↝ AND MUCH MORE!
45. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED COMPUTE PRESSURE
46. COMPUTE PRESSURE: OVERVIEW ↝ OBSERVE WHEN THE USER’S DEVICE IS UNDER SIGNIFICANT CPU PRESSURE. ↝ EXPOSES COARSE PRESSURE STATES INSTEAD OF RAW HARDWARE UTILIZATION. ↝ LETS APPS ADAPT WORKLOAD AND VISUAL QUALITY DYNAMICALLY. ↝ USEFUL FOR EXPENSIVE RENDERING, ANIMATIONS, WEBGL, AND BACKGROUND PROCESSING.
47. COMPUTE PRESSURE: OVERVIEW const observer const record new PressureObserver((records) records.at(-1); if (record?.state === "critical") { reduceRenderingQuality(); } }); observer.observe("cpu", { sampleInterval: 2000, > = = = }); {
48. COMPUTE PRESSURE: OVERVIEW const observer const record new PressureObserver((records) records.at(-1); if (record?.state === "critical") { reduceRenderingQuality(); } }); observer.observe("cpu", { sampleInterval: 2000, > = = = }); {
49. COMPUTE PRESSURE: OVERVIEW const observer const record new PressureObserver((records) records.at(-1); if (record?.state === "critical") { reduceRenderingQuality(); } }); observer.observe("cpu", { sampleInterval: 2000, > = = = }); {
50. COMPUTE PRESSURE: IDEAS ↝ LOWER CANVAS RESOLUTION DYNAMICALLY. ↝ PAUSE BACKGROUND DATA PROCESSING PIPELINES. ↝ SWITCH FROM REAL-TIME UPDATES TO BATCHED ONES. ↝ DROP FRAME RATE IN WEBGL SCENES. ↝ REDUCE ANIMATION QUALITY WHEN CPU PRESSURE RISES.
51. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Improving With the Platform
52. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED PRECONNECT
53. PRECONNECT: OVERVIEW ↝ IT ALLOWS THE BROWSER TO SET UP EARLY CONNECTIONS BEFORE THE REQUEST IS ACTUALLY SENT TO THE SERVER. THIS INCLUDES: ↝ TLS NEGOTIATIONS ↝ TCP HANDSHAKES ↝ REDUCES CONNECTION SETUP LATENCY.
54. PRECONNECT: OVERVIEW <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://api.example.com">
55. PRECONNECT: IDEAS 100MS 200MS 300MS 400MS 500MS 600MS 700MS HTML CSS FONT 1 FONT 2 FONTS START LOADING FONTS RENDERED
56. PRECONNECT: IDEAS 100MS 200MS 300MS 400MS 500MS 600MS HTML CSS FONT 1 FONT 1 FONT 2 FONT 2 FONTS START LOADING FONTS RENDERED 700MS
57. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SPECULATION RULES
58. SPECULATION RULES: OVERVIEW ↝ A MODERN AND MORE EXPRESSIVE REPLACEMENT FOR OLDER PRERENDER TECHNIQUES. ↝ DESIGNED TO IMPROVE PERFORMANCE FOR FUTURE DOCUMENT NAVIGATIONS. ↝ PREFETCH/PRERENDER DOCUMENTS AHEAD OF CLICKS. ↝ TARGETS FUTURE DOCUMENT NAVIGATIONS, ESPECIALLY MPAS.
59. SPECULATION RULES: OVERVIEW <script type="speculationrules"> { "prefetch": [ { "urls": ["/checkout"] } ], "prerender": [ { "where": { "href_matches": "/product/ " } } ] } * </script>
60. SPECULATION RULES: IDEAS ↝ PREFETCH /DASHBOARD AFTER LOGIN SUCCESS. ↝ PREFETCH /CHECKOUT AFTER CART INTERACTION. ↝ PREFETCH TOP RESULT LINKS IN THE VIEWPORT. ↝ PRERENDER LIKELY NEXT SETTINGS TAB.
61. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED PRIORITY HINTS
62. PRIORITY HINTS: OVERVIEW ↝ TELL THE BROWSER WHAT MATTERS FIRST. ↝ INFLUENCE DEFAULT FETCH HEURISTICS WHEN NEEDED. ↝ OPTIMIZE LCP RESOURCES EXPLICITLY.
63. Increase the priority of the LCP image <img src="image.jpg" fetchpriority="high" /> Lower the priority of above-the-fold images <ul class="carousel"> <img src="img/carousel-1.jpg" fetchpriority="high" /> <img src="img/carousel-2.jpg" fetchpriority="low" /> <img src="img/carousel-3.jpg" fetchpriority="low" /> </ul> Reprioritize scripts <script src="async_but_important.js" async fetchpriority="high"></script> > - - > - - > - - - - - - - - ! ! <script src="blocking_but_unimportant.js" fetchpriority="low"></script> ! < < < PRIORITY HINTS: OVERVIEW
64. Increase the priority of the LCP image <img src="image.jpg" fetchpriority="high" /> Lower the priority of above-the-fold images <ul class="carousel"> <img src="img/carousel-1.jpg" fetchpriority="high" /> <img src="img/carousel-2.jpg" fetchpriority="low" /> <img src="img/carousel-3.jpg" fetchpriority="low" /> </ul> Reprioritize scripts <script src="async_but_important.js" async fetchpriority="high"></script> > - - > - - > - - - - - - - - ! ! <script src="blocking_but_unimportant.js" fetchpriority="low"></script> ! < < < PRIORITY HINTS: OVERVIEW
65. Important validation data const user await fetch("/user"); Less important content data = = / const relatedPosts / / / PRIORITY HINTS: OVERVIEW await fetch("/posts/suggested", { priority: "low" });
66. Important validation data const user await fetch("/user"); Less important content data = = / const relatedPosts / / / PRIORITY HINTS: OVERVIEW await fetch("/posts/suggested", { priority: "low" });
67. PRIORITY HINTS: IDEAS ↝ BOOST HERO IMAGE PRIORITY. ↝ DEPRIORITIZE RECOMMENDATION PANELS. ↝ DEPRIORITIZE BELOW-FOLD IMAGES.
68. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED NATIVE LAZY LOADING
69. NATIVE LAZY LOADING: OVERVIEW WITH ZERO JAVASCRIPT, YOU CAN… ↝ DEFER IMAGE AND IFRAME DOWNLOADS AUTOMATICALLY. ↝ LET THE BROWSER DECIDE OPTIMAL FETCH TIMING. ↝ REMOVE OFF-SCREEN CONTENT FROM THE CRITICAL RENDERING PATH.
70. NATIVE LAZY LOADING: OVERVIEW <img src="/gallery-1.jpg" loading="lazy" width="800" height="600" /> <iframe src="https://maps.example.com" loading="lazy" width="600" height="400"> </iframe>
71. NATIVE LAZY LOADING: OVERVIEW <img src="/gallery-1.jpg" loading="lazy" width="800" height="600" /> <iframe src="https://maps.example.com" loading="lazy" width="600" height="400"> </iframe>
72. NATIVE LAZY LOADING: IDEAS ↝ PRODUCT GALLERY IMAGES. ↝ EMBEDDED PLAYERS, MAPS AND CHAT WIDGETS. ↝ DASHBOARDS BELOW THE FOLD.
73. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SCHEDULE TASKS
74. SCHEDULE TASKS: OVERVIEW ↝ SCHEDULE TASKS WITH EXPLICIT PRIORITY. ↝ COORDINATE WITH THE BROWSER RENDERING PIPELINE. ↝ REPLACE setTimeout( , 0) HACKS. ↝ SUPPORTS CANCELLATION VIA SIGNALS. . . . ↝ WORKS IN WORKERS TOO.
75. SCHEDULE TASKS: OVERVIEW scheduler.postTask(renderCriticalUI, { priority: "user-blocking" }); scheduler.postTask(loadSidebarData, { priority: "background" });
76. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED YIELDING
77. YIELDING: OVERVIEW ↝ SPLIT LONG TASKS SAFELY. ↝ RETURN CONTROL TO THE BROWSER MID-EXECUTION. ↝ AVOID BLOCKING INPUT AND RENDERING. ↝ REPLACE MANUAL CHUNKING LOOPS.
78. YIELDING: OVERVIEW async function processLargeDataset(data) { processFirstHalf(data); await scheduler.yield(); processSecondHalf(data); }
79. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SMOOTH NAVIGATION
80. #protip 📝 Actual Performance ≠ Perceived Performance
81. ACTUAL PERF ≠ PERCEIVED PERF
82. SMOOTH NAVIGATION: OVERVIEW
83. SMOOTH NAVIGATION: OVERVIEW SAME-DOCUMENT • SPA document.startViewTransition(async () CROSS-DOCUMENT • MPA { @view-transition { await updateTheCurrentDocument(); navigation: auto; > } = });
84. #win 🏆 No need to force an MPA to become an SPA just to get continuity.
85. SMOOTH NAVIGATION: MPAs
86. SMOOTH NAVIGATION: ECOSYSTEM CHROME SAFARI
87. SMOOTH NAVIGATION: ECOSYSTEM
88. SMOOTH NAVIGATION: ECOSYSTEM
89. SMOOTH NAVIGATION: ECOSYSTEM
91. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Closing Thoughts
92. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED #1 Core Web Vitals are a better starting point than a nish line. fi — IN THE BLINK OF AN EYE • TIM KADLEC , 2024
93. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Existing RUM tools are #2 great—until scale, cost, or product-speci c questions force you to measure things fi yourself.
94. COST SCALES WITH TRAFFIC VOLUME
95. VENDORS CAN’T MEASURE YOUR “READY”
96. VENDORS CAN’T MEASURE YOUR “READY”
97. VENDORS CAN’T MEASURE YOUR “READY” TIME UNTIL THE… ↝ SCROLL EFFECTS WORK. ↝ APP RESPONDS TO CLICKS. ↝ MOST MEANINGFUL VIDEOS/ANIMATIONS RUN. ↝ PRIMARY FEATURE SHOWS UP/IS INTERACTIVE. ↝ COOKIE BANNER SHOWS UP.
98. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED AI agents can write JS. But engineers who #3 understand scheduling, rendering, and other fundamentals can decide what should be optimized.
99. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED There's probably a business case for #4 making your app faster. But web performance is about more than “just” business.
100. MORE THAN “JUST” BUSINESS!
101. THAT’S ALL, FOLKS! MERCI! 👋 🇫🇷 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator