🇺🇸 iJS New York 2026 (Sept 30 ⋅ 12:00 pm)

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, and 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. Hello, New York! 👋 🇺🇸 WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED • SEPTEMBER 30, 2026.
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. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Preamble
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
13. 🙅🙅🙅
14. #IMHO 🌶 We don’t need another CEO manifesto to tell us what the Web Platform can do.
15. #IMHO 🌶 Performance work has a tendency to get complicated very quickly.
16. FIXING WEB PERFORMANCE…
17. FIXING WEB PERFORMANCE…
18. #IMHO 🌶 The modern Web Platform sometimes lets us move backwards on this analogy.
19. FIXING WEB PERFORMANCE…
20. THIS TALK PRESENTS… ↝ PREAMBLE ↝ MEASURING WITH THE PLATFORM ↝ IMPROVING WITH THE PLATFORM ↝ CLOSING THOUGHTS
21. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Measuring With the Platform
22. MEASURING WITH THE PLATFORM GENERAL STUFF TIMING VISIBILITY STATE • INTERSECTION OBSERVER • USER TIMING • EVENT TIMING • RESOURCE TIMING • LAYOUT INSTABILITY SERVER TIMING • ELEMENT TIMING PROFILING SENSORS LONG TASKS • LONG ANIMATION FRAMES • SELF NETWORK STATUS • BATTERY STATUS • COMPUTE PROFILING • MEMORY USAGE PRESSURE
23. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED GENERAL STUFF
24. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ VISIBILITY STATE
25. 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") } > = }) {
26. PAGE VISIBILITY: IDEAS ↝ 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.
27. PAGE VISIBILITY: IDEAS ↝ 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.
28. 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'));
29. INTERSECTION OBSERVER: IDEAS ↝ 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.
30. INTERSECTION OBSERVER: IDEAS ↝ 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).
31. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ LAYOUT INSTABILITY
32. 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.
33. 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, > = = = }); {
34. 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, > = = = }); {
35. 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, > = = = }); {
36. 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.
37. LAYOUT INSTABILITY: IDEAS
38. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED TIMING
39. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ USER TIMING
40. 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 );
41. USER TIMING: OVERVIEW
42. USER TIMING: IDEAS ↝ 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.
43. USER TIMING: TOOLS — USER TIMING AND CUSTOM METRICS • STEVE SOUDERS
44. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ EVENT TIMING
45. 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 });
46. EVENT TIMING: IDEAS ↝ MEASURE DROPDOWN RESPONSIVENESS. ↝ MEASURE DRAG-AND-DROP LATENCY. ↝ DETECT SLOW SLIDER INTERACTIONS. ↝ DETECT INPUT LAG IN FORMS. ↝ TRACK RESPONSIVENESS REGRESSIONS AFTER RELEASES.
47. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED RESOURCE TIMING
48. 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 });
49. RESOURCE TIMING: IDEAS ↝ MEASURE THIRD-PARTY SCRIPTS COST. ↝ MEASURE API ENDPOINT LATENCY. ↝ DETECT SLOW FONT LOADING. ↝ DETECT CACHE MISSES VS CACHE HITS. ↝ DETECT CDN CONFIGURATION ISSUES.
50. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SERVER TIMING
51. SERVER TIMING: OVERVIEW SERVER Server-Timing: database;dur=123;desc="Database", templating;dur=56;desc="Template processing" CLIENT const nav performance.getEntriesByType("navigation")[0]; = console.log(nav.serverTiming);
52. SERVER TIMING: OVERVIEW
53. SERVER TIMING: TOOLS
54. SERVER TIMING: IDEAS ↝ MEASURE DB LATENCY IN THE BROWSER. ↝ DETECT A SLOW AUTH MIDDLEWARE. ↝ DEBUG EDGE-CACHE EFFECTIVENESS. ↝ DETECT TEMPLATE RENDERING BOTTLENECKS.
55. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED ELEMENT TIMING
56. ELEMENT TIMING: OVERVIEW ↝ 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.
57. 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>
58. ELEMENT TIMING: IDEAS ↝ 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 PRODUCTSPECIFIC METRICS.
59. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED PROFILING
60. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED LONG TASKS
61. 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 });
62. LONG TASKS: OVERVIEW
63. LONG TASKS: OVERVIEW
64. LONG TASKS: IDEAS DETECT: ↝ HYDRATION BLOCKING THE MAIN THREAD. ↝ LARGE BUNDLE EXECUTION PAUSES. ↝ THIRD-PARTY IFRAME BLOCKING INPUT. ↝ EXPENSIVE LAYOUT RECALCULATIONS.
65. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED LONG ANIMATION FRAMES
66. 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.
67. 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, > = = });
68. 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, > = = });
69. 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, > = = });
70. LONG ANIMATION FRAMES: IDEAS DETECT: ↝ INP REGRESSIONS. ↝ RENDERING PIPELINE BOTTLENECKS. ↝ ANIMATION FRAME DROPS. ↝ SLOW CSS/LAYOUT RECALCULATIONS. ↝ SCRIPTS FORCING EXPENSIVE STYLE/LAYOUT.
71. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SELF PROFILING
72. 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.
73. SELF PROFILING: OVERVIEW const profiler new Profiler({ sampleInterval: 10, maxBufferSize: 10000 }); await doWork(); const profile await profiler.stop(); = = console.log(profile.samples);
74. SELF PROFILING: IDEAS ↝ PROFILE THIRD-PARTY SCRIPT EXECUTION TIME. ↝ DETECT HOT LOOPS IN DATA PROCESSING PIPELINES. ↝ PROFILE HYDRATION BOTTLENECKS. ↝ DETECT REGRESSIONS AFTER FEATURE ROLLOUT.
75. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED MEMORY USAGE
76. 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.
77. 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); = }
79. MEMORY USAGE: LEAKS #1 const obj { a: new Array(1000), b: new Array(2000) }; setInterval(() { console.log(obj.a); > = = }, 1000);
80. MEMORY USAGE: LEAKS #2 document.body.removeChild(el); window.addEventListener("click", () console.log(el); > = }); {
81. 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!
82. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SENSORS
83. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED NETWORK STATUS
84. NETWORK STATUS: OVERVIEW API const networkInfo navigator.connection; navigator.connection.addEventListener('change', onConnectionChange); INFORMATION { effectiveType: "4g", rtt: 200, downlink: 1.65, saveData: false, = }
85. NETWORK STATUS: OVERVIEW API INFORMATION { effectiveType: "4g", rtt: 200, const networkInfo navigator.connection.addEventListener('change', onConnectionChange); downlink: 1.65, saveData: false, = }
86. NETWORK STATUS: IDEAS ↝ 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.
87. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
88. 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} />; }
89. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
90. NETWORK STATUS: IDEAS
91. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED BATTERY STATUS
92. BATTERY STATUS: OVERVIEW const batteryInfo await navigator.getBattery(); batteryInfo.addEventListener("chargingchange", listener); batteryInfo.addEventListener("chargingtimechange", listener); batteryInfo.addEventListener("dischargingtimechange", listener); = batteryInfo.addEventListener("levelchange", listener);
93. BATTERY STATUS: IDEAS ↝ 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.
94. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED COMPUTE PRESSURE
95. 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.
96. COMPUTE PRESSURE: OVERVIEW const observer const record new PressureObserver((records) records.at(-1); if (record?.state === "critical") { reduceRenderingQuality(); } }); observer.observe("cpu", { sampleInterval: 2000, > = = = }); {
97. COMPUTE PRESSURE: OVERVIEW const observer const record new PressureObserver((records) records.at(-1); if (record?.state === "critical") { reduceRenderingQuality(); } }); observer.observe("cpu", { sampleInterval: 2000, > = = = }); {
98. COMPUTE PRESSURE: OVERVIEW const observer const record new PressureObserver((records) records.at(-1); if (record?.state === "critical") { reduceRenderingQuality(); } }); observer.observe("cpu", { sampleInterval: 2000, > = = = }); {
99. 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.
100. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Improving With the Platform
101. IMPROVING WITH THE PLATFORM PREDICT WORK PRIORITIZE WORK PRECONNECT • SPECULATION RULES PRIORITY HINTS • NATIVE LAZY LOADING SCHEDULE WORK CONTINUITY WORK SCHEDULE TASKS • YIELDING PRESERVE NAVIGATION • SMOOTH NAVIGATION
102. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED PREDICT WORK
103. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED PRECONNECT
104. 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.
105. PRECONNECT: OVERVIEW <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://api.example.com">
106. PRECONNECT: IDEAS 100MS 200MS 300MS 400MS 500MS 600MS 700MS HTML CSS FONT 1 FONT 2 FONTS START LOADING FONTS RENDERED
107. PRECONNECT: IDEAS 100MS 200MS 300MS 400MS 500MS 600MS HTML CSS FONT 1 FONT 1 FONT 2 FONT 2 FONTS START LOADING FONTS RENDERED 700MS
108. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SPECULATION RULES
109. 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.
110. SPECULATION RULES: OVERVIEW <script type="speculationrules"> { "prefetch": [ { "urls": ["/checkout"] } ], "prerender": [ { "where": { "href_matches": "/product/ " } } ] } * </script>
111. 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.
112. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED PRIORITIZE WORK
113. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED PRIORITY HINTS
114. PRIORITY HINTS: OVERVIEW ↝ TELL THE BROWSER WHAT MATTERS FIRST. ↝ INFLUENCE DEFAULT FETCH HEURISTICS WHEN NEEDED. ↝ OPTIMIZE LCP RESOURCES EXPLICITLY.
115. 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
116. 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
117. Important validation data const user await fetch("/user"); Less important content data = = / const relatedPosts / / / PRIORITY HINTS: OVERVIEW await fetch("/posts/suggested", { priority: "low" });
118. Important validation data const user await fetch("/user"); Less important content data = = / const relatedPosts / / / PRIORITY HINTS: OVERVIEW await fetch("/posts/suggested", { priority: "low" });
119. PRIORITY HINTS: IDEAS ↝ BOOST HERO IMAGE PRIORITY. ↝ DEPRIORITIZE RECOMMENDATION PANELS. ↝ DEPRIORITIZE BELOW-FOLD IMAGES.
120. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED NATIVE LAZY LOADING
121. 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.
122. 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>
123. 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>
124. NATIVE LAZY LOADING: IDEAS ↝ PRODUCT GALLERY IMAGES. ↝ EMBEDDED PLAYERS, MAPS AND CHAT WIDGETS. ↝ DASHBOARDS BELOW THE FOLD.
125. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SCHEDULE WORK
126. SCHEDULE WORK: CURRENT ISSUES ↝ NO PRIORITY CONTROL. ↝ NO CANCELLATION SEMANTICS. ↝ NO COORDINATION WITH THE BROWSER SCHEDULER. ↝ NO INPUT RESPONSIVENESS GUARANTEES. ↝ NO WAY TO BREAK LONG TASKS SAFELY.
127. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED
128. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SCHEDULE TASKS
129. 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.
130. SCHEDULE TASKS: OVERVIEW scheduler.postTask(renderCriticalUI, { priority: "user-blocking" }); scheduler.postTask(loadSidebarData, { priority: "background" });
131. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED YIELDING
132. YIELDING: OVERVIEW ↝ SPLIT LONG TASKS SAFELY. ↝ RETURN CONTROL TO THE BROWSER MID-EXECUTION. ↝ AVOID BLOCKING INPUT AND RENDERING. ↝ REPLACE MANUAL CHUNKING LOOPS.
133. YIELDING: OVERVIEW async function processLargeDataset(data) { processFirstHalf(data); await scheduler.yield(); processSecondHalf(data); }
134. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED CONTINUITY WORK
135. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED PRESERVE NAVIGATION
136. PRESERVE NAVIGATION: OVERVIEW ↝ RESTORE PAGES INSTANTLY ON BACK/FORWARD NAVIGATION. ↝ KEEP DOM + JAVASCRIPT HEAP ALIVE IN MEMORY. ↝ ELIMINATE RELOAD ENTIRELY. ↝ TURN NAVIGATION INTO RESTORATION.
137. PRESERVE NAVIGATION: OVERVIEW
138. 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.'); } > = });
139. 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.'); } > = });
140. PRESERVE NAVIGATION: MONITOR new PerformanceObserver(list { for (const entry of list.getEntries()) { console.log(entry.notRestoredReasons); } > = }).observe({ type: "navigation", buffered: true });
141. PRESERVE NAVIGATION: ACT
142. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED SMOOTH NAVIGATION
143. #protip 📝 Actual Performance ≠ Perceived Performance
144. ACTUAL PERF ≠ PERCEIVED PERF
145. SMOOTH NAVIGATION: OVERVIEW
146. SMOOTH NAVIGATION: OVERVIEW SAME-DOCUMENT • SPA document.startViewTransition(async () CROSS-DOCUMENT • MPA { @view-transition { await updateTheCurrentDocument(); navigation: auto; > } = });
147. #win 🏆 No need to force an MPA to become an SPA just to get continuity.
148. SMOOTH NAVIGATION: MPAs
149. SMOOTH NAVIGATION: ECOSYSTEM CHROME SAFARI
150. SMOOTH NAVIGATION: ECOSYSTEM
151. SMOOTH NAVIGATION: ECOSYSTEM
152. SMOOTH NAVIGATION: ECOSYSTEM
154. …AND MUCH MORE!
155. …AND MUCH MORE!
156. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Closing Thoughts
157. 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
158. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED #2 Test on real phones and networks.
159. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Existing RUM tools are #3 great—until scale, cost, or product-speci c questions force you to measure things fi yourself.
160. COST SCALES WITH TRAFFIC VOLUME
161. VENDORS CAN’T MEASURE YOUR “READY”
162. VENDORS CAN’T MEASURE YOUR “READY”
163. 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.
164. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED AI agents can write JS. But only engineers who #4 understand scheduling, rendering, and other web fundamentals can decide what should be optimized.
165. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED ff #5 Avoid the observer e ect.
166. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED Always try to correlate #6 behavior analysis with contextual metrics and business outcomes to tell the full story.
167. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED There's probably a business case for #7 making your app faster. But web performance is about more than “just” business.
168. MORE THAN “JUST” BUSINESS!
170. WEB PERFORMANCE APIS THAT YOU (PROBABLY) NEVER KNEW EXISTED THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator