🇬🇧 iJS London 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. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED • MAY 12, 2026. Hello, London! 👋 🇬🇧
2. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED MATHEUS ALBUQUERQUE • @ythecombinator
3. Matheus Albuquerque ↝ 👨💻 STAFF SWE @ MEDALLIA ↝ ⚛ CHAIR @ REACT SUMMIT NYC ↝ ⚡ GOOGLE DEVELOPER EXPERT ↝ 𝕏 YTHECOMBINATOR
4. Preamble WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
6. THE WEB PLATFORM IN 2008
7. THE WEB PLATFORM IN 2008
8. THE WEB PLATFORM IN 2010
9. THE WEB PLATFORM IN 2012
10. THE WEB PLATFORM IN 2014
12. Å
13. FIXING WEB PERFORMANCE…
14. FIXING WEB PERFORMANCE…
15. FIXING WEB PERFORMANCE…
17. ↝ PREAMBLE ↝ MEASURING WITH THE PLATFORM ↝ OPTIMIZING WITH THE PLATFORM ↝ WHY IT MATTERS ↝ CLOSING THOUGHTS THIS TALK PRESENTS…
18. Measuring With the Platform WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
19. MEASURING WITH THE PLATFORM GENERAL STUFF VISIBILITY STATE • INTERSECTION OBSERVER • LAYOUT INSTABILITY PROFILING LONG TASKS • LONG ANIMATION FRAMES • SELF PROFILING • MEMORY USAGE TIMING USER TIMING • EVENT TIMING • RESOURCE TIMING • SERVER TIMING • ELEMENT TIMING SENSORS NETWORK STATUS • BATTERY STATUS • COMPUTE PRESSURE
20. GENERAL STUFF WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
21. VISIBILITY STATE REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
22. PAGE VISIBILITY: OVERVIEW document.hidden; document.visibilityState; document.addEventListener("visibilitychange", () = > { if (document.visibilityState===“hidden") { console.log("This window is hidden") } else { console.log("This window is visible") } })
23. ↝ CANCEL POLLING LOOPS, TIMERS, AND BACKGROUND NETWORK REFRESHES WHEN THE TAB BECOMES HIDDEN. ↝ PAUSE VIDEO, AUDIO, AND ANIMATION LOOPS WHEN THE USER ISN’T ACTIVELY WATCHING THE PAGE. ↝ RESUME PROGRESSIVE DOWNLOADS OR DYNAMIC IMPORTS WHEN THE PAGE BECOMES VISIBLE AGAIN. PAGE VISIBILITY: IDEAS
24. ↝ STOP REFRESHING DASHBOARDS OR LIVE DATA FEEDS WHILE THE TAB IS BACKGROUNDED. ↝ SEND ANALYTICS RELIABLY AT SESSION END WHEN VISIBILITY BECOMES HIDDEN. ↝ SILENCE NOTIFICATIONS OR SOUNDS WHEN THE DEVICE SCREEN LOCKS OR THE TAB LOSES VISIBILITY. PAGE VISIBILITY: IDEAS
25. INTERSECTION OBSERVER: OVERVIEW const onIntersection = (entries) = > { for (const entry of entries) { if (entry.isIntersecting) { console.log(entry); } } }; const observer = new IntersectionObserver(onIntersection); observer.observe(document.querySelector('#target'));
26. ↝ INITIALIZE EXPENSIVE RENDERING PIPELINES (CHARTS, CANVAS, WEBGL) ONLY WHEN NEEDED. ↝ LAZY-LOAD IMAGES, IFRAMES, AND ROUTE BUNDLES WHEN THEY APPROACH THE VIEWPORT. ↝ DELAY LOADING THIRD-PARTY WIDGETS (MAPS, VIDEO EMBEDS, CHAT CLIENTS) UNTIL VISIBLE. ↝ CONTROL MEDIA PLAYBACK DEPENDING ON VISIBILITY. INTERSECTION OBSERVER: IDEAS
27. ↝ RENDER/HYDRATE COMPLEX UI COMPONENTS ONLY WHEN THEY BECOME RELEVANT. ↝ TRIGGER ANALYTICS EVENTS WHEN USERS ACTUALLY SEE IMPORTANT UI SECTIONS. ↝ MEASURE HOW LONG ELEMENTS REMAIN VISIBLE (E.G., AD IMPRESSIONS). INTERSECTION OBSERVER: IDEAS
28. LAYOUT INSTABILITY REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
29. ↝ MANY WEBSITES HAVE DOM ELEMENTS SHIFTING AROUND DUE TO CONTENT LOADING ASYNCHRONOUSLY. ↝ MEASURE REAL CLS VALUES IN PRODUCTION. ↝ IDENTIFY THE EXACT DOM ELEMENTS RESPONSIBLE FOR LAYOUT INSTABILITY. ↝ IGNORE EXPECTED SHIFTS CAUSED BY USER INTERACTION. LAYOUT INSTABILITY: OVERVIEW
30. LAYOUT INSTABILITY: OVERVIEW let cls = 0; new PerformanceObserver((list) = > { for (const entry of list.getEntries()) { if (entry.hadRecentInput) continue; / / ignore expected shifts cls += entry.value; const culprit = entry.sources?.[0]?.node; console.log("Shift:", entry.value); console.log("Element:", culprit); console.log("CLS so far:", cls); } }).observe({ type: "layout-shift", buffered: true });
31. ↝ 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. LAYOUT INSTABILITY: IDEAS
32. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
33. LAYOUT INSTABILITY: FINDING
34. LAYOUT INSTABILITY: FIXING
35. LAYOUT INSTABILITY: FIXING
36. TIMING WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
37. USER TIMING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
38. USER TIMING: OVERVIEW performance.mark("checkout:start"); await submitCheckout(); performance.mark("checkout:end"); performance.measure( "checkout-duration", "checkout:start", "checkout:end" ); console.log( performance.getEntriesByName("checkout-duration")[0].duration );
39. USER TIMING: OVERVIEW
40. ↝ MEASURE ROUTE TRANSITIONS IN AN SPA. ↝ MEASURE API LATENCY (REQUEST → RENDER). ↝ MEASURE THE TIME BETWEEN USER INTENT AND UI CONFIRMATION. ↝ MEASURE HYDRATION FOR ISLANDS/COMPONENTS. ↝ TRACK TIME SPENT INSIDE SUSPENSE FALLBACKS. USER TIMING: IDEAS
41. USER TIMING: TOOLS — USER TIMING AND CUSTOM METRICS • STEVE SOUDERS
42. EVENT TIMING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
43. EVENT TIMING: OVERVIEW new PerformanceObserver(list = > { for (const entry of list.getEntries()) { console.log("Input delay:", entry.processingStart - entry.startTime); console.log("Handler time:", entry.processingEnd - entry.processingStart); console.log("Total latency:", entry.duration); } }).observe({ type: "event", buffered: true });
44. ↝ MEASURE DROPDOWN RESPONSIVENESS. ↝ MEASURE DRAG-AND-DROP LATENCY. ↝ DETECT SLOW SLIDER INTERACTIONS. ↝ DETECT INPUT LAG IN FORMS. ↝ TRACK RESPONSIVENESS REGRESSIONS AFTER RELEASES. EVENT TIMING: IDEAS
45. RESOURCE TIMING WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
46. RESOURCE TIMING: OVERVIEW new PerformanceObserver(list = > { for (const entry of list.getEntries()) { console.log(entry.name); console.log("TTFB:", entry.responseStart - entry.requestStart); console.log("Download:", entry.responseEnd - entry.responseStart); console.log("Cache Hit:" entry.transferSize === 0); } }).observe({ type: "resource", buffered: true });
47. ↝ MEASURE THIRD-PARTY SCRIPTS COST. ↝ MEASURE API ENDPOINT LATENCY. ↝ DETECT SLOW FONT LOADING. ↝ DETECT CACHE MISSES VS CACHE HITS. ↝ DETECT CDN CONFIGURATION ISSUES. RESOURCE TIMING: IDEAS
48. SERVER TIMING WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
49. SERVER TIMING: OVERVIEW Server-Timing: database;dur=123;desc="Database", templating;dur=56;desc="Template processing" const nav = performance.getEntriesByType("navigation")[0]; console.log(nav.serverTiming); SERVER CLIENT
50. SERVER TIMING: OVERVIEW
51. SERVER TIMING: TOOLS
52. ↝ MEASURE DB LATENCY IN THE BROWSER. ↝ DETECT A SLOW AUTH MIDDLEWARE. ↝ DEBUG EDGE-CACHE EFFECTIVENESS. ↝ DETECT TEMPLATE RENDERING BOTTLENECKS. SERVER TIMING: IDEAS
53. ELEMENT TIMING WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
54. ↝ ALLOWS YOU TO MEASURE THE RENDER TIME OF SPECIFIC ELEMENTS. ↝ USEFUL FOR KNOWING WHEN THE LARGEST IMAGE OR TEXT BLOCK WAS PAINTED TO THE SCREEN. ↝ THE BASIS FOR THE LARGEST CONTENTFUL PAINT (LCP) METRIC. ELEMENT TIMING: OVERVIEW
55. ELEMENT TIMING: OVERVIEW <img src="/hero.jpg" elementtiming="hero" /> <script> new PerformanceObserver(list = > { const entry = list.getEntries()[0]; console.log("Hero render:", entry.startTime); }).observe({ type: "element", buffered: true }); </script>
56. ↝ MEASURE HERO IMAGE RENDER TIMING. ↝ MEASURE ABOVE-THE-FOLD READINESS. ↝ TRACK MARKETING CTA VISIBILITY TIMING. ↝ MEASURE WHEN SKELETON LOADERS DISAPPEAR. ↝ REPLACE SYNTHETIC LCP TRACKING WITH PRODUCT- SPECIFIC METRICS. ELEMENT TIMING: IDEAS
57. SENSORS WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
58. NETWORK STATUS WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
59. NETWORK STATUS: OVERVIEW const networkInfo = navigator.connection; navigator.connection.addEventListener('change', onConnectionChange); { effectiveType: "4g", rtt: 200, downlink: 1.65, saveData: false, } API INFORMATION
60. NETWORK STATUS: OVERVIEW API INFORMATION const networkInfo = navigator.connection.addEventListener('change', onConnectionChange); { effectiveType: "4g", rtt: 200, downlink: 1.65, saveData: false, }
61. ↝ DISABLE ROUTE PREFETCHING ON SLOW CONNECTIONS. ↝ SKIP ANALYTICS UPLOADS WHEN RTT IS HIGH. ↝ LOAD LOWER-RESOLUTION ON CONSTRAINED BANDWIDTH. ↝ ADAPT TO SITUATIONS WHEN USERS ARE OFFLINE. ↝ RESPECT DATA SAVING AS A USER PERFORMANCE PREFERENCE SIGNAL. NETWORK STATUS: IDEAS
62. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
63. NETWORK STATUS: IDEAS switch (connectionType) { case "4g": return <Video src={videoSrc} />; case "3g": return <Image src={imageSrc.hiRes} alt={alt} />; default: return <Image src={imageSrc.lowRes} alt={alt} />; }
64. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
65. NETWORK STATUS: IDEAS
66. BATTERY STATUS WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
67. BATTERY STATUS: OVERVIEW const batteryInfo = await navigator.getBattery(); batteryInfo.addEventListener("chargingchange", listener); batteryInfo.addEventListener("chargingtimechange", listener); batteryInfo.addEventListener("dischargingtimechange", listener); batteryInfo.addEventListener("levelchange", listener);
68. ↝ DISABLE BACKGROUND POLLING ON LOW BATTERY. ↝ REDUCE ANIMATION FREQUENCY. ↝ STOP PREFETCHING BUNDLES. ↝ PERSIST UNSAVED DATA BEFORE SHUTDOWN RISK. ↝ SWITCH TO A STATIC MAP RATHER THAN AN INTERACTIVE ONE. BATTERY STATUS: IDEAS
69. COMPUTE PRESSURE WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
70. COMPUTE PRESSURE: OVERVIEW const observer = new PressureObserver(records = > { const state = records[0].state; if (state === "critical") { reduceRenderingQuality(); } }); observer.observe("cpu", { sampleInterval: 2000 });
71. ↝ 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. COMPUTE PRESSURE: IDEAS
72. PROFILING WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
73. LONG TASKS WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
74. LONG TASKS: OVERVIEW new PerformanceObserver((list) = > { for (const entry of list.getEntries()) { console.log("Blocked for:", entry.duration); entry.attribution?.forEach((source) = > { console.log("Source:", source.containerSrc); }); } }).observe({ type: "longtask", buffered: true });
75. LONG TASKS: OVERVIEW
76. LONG TASKS: OVERVIEW
77. DETECT: ↝ HYDRATION BLOCKING THE MAIN THREAD. ↝ LARGE BUNDLE EXECUTION PAUSES. ↝ THIRD-PARTY IFRAME BLOCKING INPUT. ↝ EXPENSIVE LAYOUT RECALCULATIONS. LONG TASKS: IDEAS
78. LONG ANIMATION FRAMES WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
79. LONG ANIMATION FRAMES: OVERVIEW new PerformanceObserver((list) = > { console.log(list.getEntries()); }).observe({ type: "long-animation-frame", buffered: true });
80. DETECT: ↝ INP REGRESSIONS. ↝ RENDERING PIPELINE BOTTLENECKS. ↝ ANIMATION FRAME DROPS. ↝ SLOW CSS/LAYOUT RECALCULATIONS. ↝ SLOW COMPOSITING PHASES. LONG ANIMATION FRAMES: IDEAS
81. SELF PROFILING WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
82. SELF PROFILING: OVERVIEW const profiler = new Profiler({ sampleInterval: 10, maxBufferSize: 10000 }); await doWork(); const profile = await profiler.stop(); console.log(profile.samples);
83. ↝ PROFILE REAL-WORLD HYDRATION BOTTLENECKS. ↝ PROFILE THIRD-PARTY SCRIPT EXECUTION TIME. ↝ DETECT HOT LOOPS IN DATA PROCESSING PIPELINES. ↝ DETECT REGRESSIONS AFTER FEATURE ROLLOUT. SELF PROFILING: IDEAS
84. MEMORY USAGE WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
85. MEMORY USAGE: OVERVIEW const result = await performance.measureUserAgentSpecificMemory(); console.log("Total memory:", result.bytes); result.breakdown.forEach((entry) = > { console.log(entry.types, entry.bytes); });
86. MEMORY USAGE: LEAKS #1 const obj = { a: new Array(1000), b: new Array(2000) }; setInterval(() = > { console.log(obj.a); }, 1000);
87. MEMORY USAGE: LEAKS #2 window.addEventListener("resize", () = > { console.log(obj); });
88. MEMORY USAGE: LEAKS #3 document.body.removeChild(el); window.addEventListener("click", () = > { console.log(el); });
89. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
90. ↝ FORGETTING TO UNREGISTER AN EVENT LISTENER. ↝ ACCIDENTALLY CAPTURING OBJECTS FROM AN IFRAME. ↝ NOT CLOSING A WORKER. ↝ ACCUMULATING OBJECTS IN ARRAYS. ↝ AND MUCH MORE! MEMORY USAGE: LEAKS
91. ↝ DETECT MEMORY LEAKS AFTER ROUTE TRANSITIONS. ↝ DETECT IFRAME MEMORY ISOLATION ISSUES. ↝ DETECT DOM NODE ACCUMULATION REGRESSIONS. ↝ MEASURE SPA CACHE GROWTH OVER TIME. ↝ COMPARE THE MEMORY COST OF FEATURE VARIANTS. MEMORY USAGE: IDEAS
92. PROFILING { name: "same-origin-descendant", entryType: "longtask", startTime: 1023.40999995591, duration: 187.19000002602115, attribution: [ { name: "unknown", entryType: "taskattribution", startTime: 0, duration: 0, containerType: "iframe", containerSrc: "child.html", containerId: "", containerName: "child1" } ] } { bytes: 1000000, breakdown: [ { bytes: 1000000, attribution: [ { url: "https://example.com", scope: "Window", }, ], types: ["JS", "DOM"], }, { bytes: 0, attribution: [], types: [], }, ], } { "frames": [ { "name": "Profiler" }, { "column": 0, "line": 100, "name": "", "resourceId": 0 }, { "name": "set innerHTML" }, { "column": 10, "line": 10, "name": "A", "resourceId": 1 } { "column": 20, "line": 20, "name": "B", "resourceId": 1 } ], "resources": [ "https://example.com/page", "https://example.com/app.js", ], "samples": [ { "stackId": 0, "timestamp": 161.99500000476837 }, { "stackId": 2, "timestamp": 182.43499994277954 }, { "timestamp": 197.43499994277954 }, { "timestamp": 213.32999992370605 }, { "stackId": 3, "timestamp": 228.59999990463257 }, ], "stacks": [ { "frameId": 0 }, { "frameId": 2 }, { "frameId": 3 }, { "frameId": 4, "parentId": 2 } ] }
93. ↝ MAIN-THREAD BLOCKING ↝ WHERE TIME GOES. ↝ FRAME PIPELINE BLOCKING ↝ WHERE FRAMES DROP. ↝ CPU HOTSPOT ATTRIBUTION ↝ WHAT CODE RUNS. ↝ MEMORY HOTSPOT ATTRIBUTION ↝ WHERE MEMORY GROWS. PROFILING
94. AND MORE! WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
95. Improving With the Platform WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
96. IMPROVING WITH THE PLATFORM PREDICT WORK PRECONNECT • SPECULATION RULES SCHEDULE WORK SCHEDULE TASKS • YIELDING PRIORITIZE WORK PRIORITY HINTS • NATIVE LAZY LOADING CONTINUITY WORK PRESERVE NAVIGATION • SMOOTH NAVIGATION
97. PREDICT WORK WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
98. ↝ MANY PERFORMANCE OPTIMIZATIONS CAN BE MADE WHEN WE CAN PREDICT WHAT USERS MIGHT DO. ↝ THERE ARE A SIMPLE BUT EFFECTIVE WAYS FOR DEVELOPERS TO HELP THE BROWSER STAY ONE STEP AHEAD OF THE USER AND KEEP PAGES FAST. PREDICT WORK
99. ↝ PREDICT TAB NAVIGATION IN DASHBOARDS. ↝ PREFETCH THE NEXT ROUTE AFTER LOGIN SUCCESS. ↝ PRECONNECT ANALYTICS ENDPOINTS AFTER CONSENT. ↝ PRERENDER CHECKOUT AFTER CART INTERACTION. ↝ PREFETCH THE NEXT ARTICLE WHEN THE READER SCROLLS 75%. PREDICT WORK: IDEAS
100. PREDICT WORK: IDEAS
101. PRECONNECT WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
102. ↝ IT ALLOWS THE BROWSER TO SET UP EARLY CONNECTIONS BEFORE THE REQUEST IS ACTUALLY SENT TO THE SERVER. THIS INCLUDES: ↝ TLS NEGOTIATIONS ↝ TCP HANDSHAKES ↝ ELIMINATES ROUND-TRIP LATENCY. PRECONNECT: OVERVIEW
103. PRECONNECT: OVERVIEW <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://api.example.com"> <script> fetch("https://api.example.com/user"); </script>
104. PRECONNECT: OVERVIEW 100MS 200MS 300MS 400MS 500MS 600MS 700MS HTML CSS FONT 1 FONT 2 FONTS START LOADING FONTS RENDERED
105. PRECONNECT: OVERVIEW 100MS 200MS 300MS 400MS 500MS 600MS 700MS HTML CSS FONT 1 FONT 2 FONTS START LOADING FONTS RENDERED FONT 1 FONT 2
106. PRECONNECT: ↝ GOOGLE FONTS BEFORE CSS LOADS. ↝ THE API ORIGIN AFTER LOGIN SUCCESS. ↝ THE CDN HOSTING HERO IMAGE. ↝ THE ANALYTICS ENDPOINT AFTER CONSENT. ↝ THE CHECKOUT DOMAIN FROM THE PRODUCT PAGE. PRECONNECT: IDEAS
107. SPECULATION RULES WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
108. ↝ DESIGNED TO IMPROVE PERFORMANCE FOR FUTURE DOCUMENT NAVIGATIONS. ↝ A MODERN AND MORE EXPRESSIVE REPLACEMENT FOR OLDER PRERENDER TECHNIQUES. ↝ PREFETCH/PRERENDER DOCUMENTS AHEAD OF CLICKS. ↝ WORKS BEST FOR MPAS OR ROUTE-LEVEL TRANSITIONS. SPECULATION RULES: OVERVIEW
109. SPECULATION RULES: OVERVIEW <script type="speculationrules"> { "prefetch": [{ "source": "list", "urls": ["/checkout"] }] } </script> <script type="speculationrules"> { "prerender": [{ "where": { "href_matches": "/product/ * " } }] } </script>
110. ↝ PREFETCH /DASHBOARD AFTER LOGIN SUCCESS. ↝ PREFETCH /CHECKOUT AFTER CART INTERACTION. ↝ PREFETCH TOP RESULT LINKS IN THE VIEWPORT. ↝ PRERENDER LIKELY NEXT SETTINGS TAB. SPECULATION RULES: IDEAS
111. PRIORITIZE WORK WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
112. PRIORITY HINTS WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
113. ↝ TELL THE BROWSER WHAT MATTERS FIRST. ↝ OVERRIDE DEFAULT FETCH HEURISTICS WHEN NEEDED. ↝ OPTIMIZE LCP RESOURCES EXPLICITLY. PRIORITY HINTS: OVERVIEW
114. PRIORITY HINTS: OVERVIEW < ! - - 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>
115. PRIORITY HINTS: OVERVIEW < ! - - 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>
116. PRIORITY HINTS: OVERVIEW / / Important validation data const user = await fetch("/user"); / / Less important content data const relatedPosts = await fetch("/posts/suggested", { priority: "low" });
117. PRIORITY HINTS: OVERVIEW / / Important validation data const user = await fetch("/user"); / / Less important content data const relatedPosts = await fetch("/posts/suggested", { priority: "low" });
118. ↝ BOOST HERO IMAGE PRIORITY. ↝ PRIORITIZE ROUTE TRANSITION BUNDLES. ↝ DEPRIORITIZE RECOMMENDATION PANELS. ↝ DEPRIORITIZE BELOW-FOLD IMAGES. ↝ CONTROL HYDRATION FETCH ORDERING. PRIORITY HINTS: IDEAS
119. NATIVE LAZY LOADING WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
120. ↝ ZERO JAVASCRIPT. ↝ DEFER IMAGE AND IFRAME DOWNLOADS AUTOMATICALLY. ↝ LET THE BROWSER DECIDE OPTIMAL FETCH TIMING. ↝ REMOVE OFF-SCREEN CONTENT FROM THE CRITICAL RENDERING PATH. NATIVE LAZY LOADING: OVERVIEW
121. 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>
122. ↝ PRODUCT GALLERY IMAGES. ↝ EMBEDDED YOUTUBE PLAYERS. ↝ MAPS AND CHAT WIDGETS. ↝ ANALYTICS DASHBOARDS BELOW THE FOLD. ↝ ROUTE-LEVEL IFRAMES IN MICRO-FRONTENDS. NATIVE LAZY LOADING: IDEAS
123. “Lazy-loading iframes can lead to 2-3% median data savings, 1-2% FCP reductions, and 2% FID improvements at the 95th percentile.” Chrome team’s research • 2019
124. SCHEDULE WORK WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
125. ↝ NO PRIORITY CONTROL. ↝ NO CANCELLATION SEMANTICS. ↝ NO COORDINATION WITH THE BROWSER SCHEDULER. ↝ NO INPUT RESPONSIVENESS GUARANTEES. ↝ NO WAY TO BREAK LONG TASKS SAFELY. SCHEDULE WORK: CURRENT ISSUES
126. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
127. SCHEDULE TASKS WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
128. ↝ SCHEDULE TASKS WITH EXPLICIT PRIORITY. ↝ COORDINATE WITH THE BROWSER RENDERING PIPELINE. ↝ REPLACE setTimeout( . . . , 0) HACKS. ↝ SUPPORTS CANCELLATION VIA SIGNALS. ↝ WORKS IN WORKERS TOO. SCHEDULE TASKS: OVERVIEW
129. SCHEDULE TASKS: OVERVIEW scheduler.postTask(renderCriticalUI, { priority: "user-blocking" }); scheduler.postTask(loadSidebarData, { priority: "background" });
130. YIELDING WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
131. ↝ SPLIT LONG TASKS SAFELY. ↝ RETURN CONTROL TO THE BROWSER MID-EXECUTION. ↝ CONTINUE LATER WITH THE SAME PRIORITY. ↝ AVOID BLOCKING INPUT AND RENDERING. ↝ REPLACE MANUAL CHUNKING LOOPS. YIELDING: OVERVIEW
132. YIELDING: OVERVIEW async function processLargeDataset(data) { processFirstHalf(data); await scheduler.yield(); processSecondHalf(data); }
133. CONTINUITY WORK WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
134. PRESERVE NAVIGATION WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
135. ↝ RESTORE PAGES INSTANTLY ON BACK/FORWARD NAVIGATION. ↝ KEEP DOM + JAVASCRIPT HEAP ALIVE IN MEMORY. ↝ ELIMINATE RELOAD ENTIRELY. ↝ TURN NAVIGATION INTO RESTORATION. PRESERVE NAVIGATION: OVERVIEW
136. PRESERVE NAVIGATION: OVERVIEW
137. PRESERVE NAVIGATION: MONITOR window.addEventListener('pageshow', (event) = > { if (event.persisted) { console.log('This page was restored from the bfcache.'); } else { console.log('This page was loaded normally.'); } });
138. PRESERVE NAVIGATION: MONITOR window.addEventListener('pagehide', (event) = > { if (event.persisted) { console.log('This page might be entering the bfcache.'); } else { console.log('This page will unload normally and be discarded.'); } });
139. PRESERVE NAVIGATION: MONITOR new PerformanceObserver(list = > { for (const entry of list.getEntries()) { console.log(entry.notRestoredReasons); } }).observe({ type: "navigation", buffered: true });
140. PRESERVE NAVIGATION: ACT
141. SMOOTH NAVIGATION WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
142. SMOOTH NAVIGATION: OVERVIEW
143. ↝ ANIMATE TRANSITIONS BETWEEN DOM STATES. ↝ WORKS ACROSS SPA AND MPA NAVIGATION. ↝ MAINTAINS USER CONTEXT DURING CHANGE. ↝ REDUCES PERCEIVED LATENCY. SMOOTH NAVIGATION: OVERVIEW
144. SMOOTH NAVIGATION: OVERVIEW
145. ↝ ANIMATE LIST → DETAIL NAVIGATION. ↝ SMOOTH DASHBOARD TAB SWITCHING. ↝ PRESERVE ELEMENT CONTINUITY BETWEEN ROUTES. ↝ REDUCE PERCEIVED LAYOUT SHIFT. ↝ MAKE MPAS FEEL LIKE NATIVE APPS. SMOOTH NAVIGATION: IDEAS
147. …AND MUCH MORE!
148. …AND MUCH MORE!
149. ↝ PREAMBLE ↝ MEASURING WITH THE PLATFORM ↝ OPTIMIZING WITH THE PLATFORM ↝ WHY IT MATTERS ↝ CLOSING THOUGHTS THIS TALK PRESENTS…
150. Why It Matters WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
151. DEVICE MIX WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
152. DEVICES: ADOPTION
153. DEVICES: PARSE TIMES — JAVASCRIPT START-UP PERFORMANCE • 2017
154. BANDWIDTH MIX WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
155. BANDWIDTH: TECHNOLOGIES — GSM ASSOCIATION • 2022
156. BANDWIDTH: TECHNOLOGIES — INTERNET SPEEDS BY COUNTRY • WORLD POPULATION REVIEW, 2025
157. — FIXED-BROADBAND INTERNET BASKET • ITU DATAHUB, 2025 PORTUGAL MOZAMBIQUE BANDWIDTH: AFFORDABILITY
158. — USE TOOLS TO MEASURE PERFORMANCE • SAM DUTTON BANDWIDTH: AFFORDABILITY
159. POLITICAL CONTEXT MIX WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
160. POLITICAL CONTEXT: CHINA
161. POLITICAL CONTEXT: CHINA — DECODING THE WEB IN CHINA FOR PEAK WEB PERFORMANCE • JODIE CHAN, 2023
162. EMOTIONS MIX WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
163. Brainwave analysis from the experiment revealed that participants had to concentrate up to 50% more when using websites via the slower connection. — Study conducted by Foviance on behalf of CA • 2011 FRUSTRATION ↝ STRESS
164. Delayed web pages caused a 38% rise in mobile users' heart rates — equivalent to the anxiety of watching a horror movie alone. — Ericsson ConsumerLab • 2015 FRUSTRATION ↝ ANXIETY
165. — UNDERSTANDING EMOTION FOR HAPPY USERS • PHILIP TELLIS, 2020 EVEN PATIENCE IS A LOCAL THING…
166. Closing Thoughts WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
167. #1 Core Web Vitals are a better starting point than a fi nish line. — IN THE BLINK OF AN EYE • TIM KADLEC , 2024 WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
168. #2 Existing RUM tools are great—until scale, cost, or product-speci fi c questions force you to measure things yourself. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
169. COST SCALES WITH TRAFFIC VOLUME
170. VENDORS CAN’T MEASURE YOUR “DOR” Definition of Ready
171. VENDORS CAN’T MEASURE YOUR “DOR”
172. 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. VENDORS CAN’T MEASURE YOUR “DOR”
173. #3 Test on real phones and networks. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
174. #4 Avoid the observer e ff ect. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
175. #5 Always try to correlate behavior analysis with contextual metrics and business outcomes to tell the full story. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
176. #6 There's probably a business case for making your app faster. But web performance is about more than “just” business. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
177. MORE THAN “JUST” BUSINESS!
178. MORE THAN “JUST” BUSINESS!
179. THAT’S ALL, FOLKS! THANKS! 👋 🇬🇧 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator