🇬🇧 QCon London 2025

Speed at Scale: Optimizing The Largest CX Platform Out There

In a world with a wide variety of network connections, any user can have a slow experience, and apps that delight users on fast connections can barely be usable on slow ones.

In this session, I'll share my journey of gradually adapting how we deliver pages to better cater to our user's constraints on a platform with 15mi+ sessions per month, where simply rewriting everything from scratch is not an option.

With an eye on maintenance and scalability, we'll discuss legacy codebases, code generation, polyfilling strategies, Preact, jQuery, and many tips and tricks for large platforms targeting emerging markets.

Transcript

1. Hello, London! 👋 🇬🇧 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE • APRIL 9, 2025.
2. MATHEUS ALBUQUERQUE • @ythecombinator SPEED AT SCALE OPTIMIZING THE LARGEST CX PLATFORM OUT THERE
3. Matheus Albuquerque ↝ 👨💻 Staff SWE @ Medallia ↝ ⚡ Google Developer Expert ↝ ⚛ Chair @ React Su m m it NYC ↝ 𝕏 ythecombinator
4. #question 🤔 Who here works with front-end? And React? SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
5. Preamble SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
6. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREAMBLE
7. […] “While browsing HackerNews, I sometimes get the feeling that every developer out there is working for FAANG, as there are always posts from those people doing some hyped stu f . Or you might think that PHP is never used nowadays because whenever it’s mentioned, everyone is hating on it in the comments.” […] — The silent majority • Vadim Kravcenko, 2022
8. […] “But let’s be straight, that’s like 1% of all of the developers out there — the rest of them are just lurking and coding with their language of choice and being content with it. Be it Fortran, COBOL, Perl, or PHP.” […] — The silent majority • Vadim Kravcenko, 2022
9. This talk is not about… ↝ React 19, Svelte 5, Vue 3… ↝ ISG, SSR, Streaming SSR… ↝ Progressive/Selective/Partial Hydration… ↝ Islands Architecture, Resumability…
10. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREAMBLE
11. — VAN OKTORP (INSP) • GOOGLE I/O 2018
12. — VAN OKTORP (INSP) • GOOGLE I/O 2018
14. — MEDALLIA SURVEYS • MARIZ MELO
15. This talk is about… ↝ Modernizing Dependencies ↝ Code Splitting ↝ Preact ↝ Targeting Different Browsers
16. This talk is also about… ↝ Challenges in Legacy Codebases ↝ Experiences ↝ Our Radar ↝ Lessons Learned
17. Act I: Modernizing Dependencies SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
18. BEFORE…
19. WEBPACK 1 ↝ 5 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
21. WEBPACK 1 ↝ 5
22. WEBPACK 1 ↝ 5
23. #1 of 3 MIGRATION IS ABOUT HAVING ALL THE PLUGINS AND LOADERS ON THEIR LATEST VERSIONS AND ENSURING THAT EVERY LOADER AND PLUGIN IS COMPATIBLE WITH EACH OTHER. #GOTCHA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / WEBPACK
24. #2 of 3 V5 MIGRATION CAN'T BE DONE FROM V2/V3. IF YOU'RE ON A VERSION LOWER THAN V4, THAT’S AN ENTIRELY DIFFERENT MIGRATION THAT NEEDS TO BE FOLLOWED ONE AFTER THE OTHER SEQUENTIALLY. #GOTCHA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / WEBPACK
25. #3 of 3 NODE 10.13.0 IS THE MINIMUM REQUIREMENT FOR V5 BUT THERE ARE SOME PLUGINS AND LOADERS THAT REQUIRE HIGHER NODE VERSIONS — E.G. copy-webpack- plugin REQUIRES NODE ≥ 12.20.0. #GOTCHA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / WEBPACK
26. NODE 10 ↝ 18 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
27. NODE 10 ↝ 18
28. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / NODE
29. REACT 15 ↝ 16 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
30. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT
31. REACT 15 ↝ 16
32. REACT 15 ↝ 16
33. REACT 15 ↝ 16
34. REACT 15 ↝ 16
35. ❌ REACT 15 ↝ 16
36. REACT 15 ↝ 16
37. ❌ REACT 15 ↝ 16
38. REACT 15 ↝ 16
39. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT
40. #definition 🧐 jscodeshift is a tool that runs a transformation script over one or more JavaScript or TypeScript fi les. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
41. #definition 🧐 It reads all the fi les you provide to it at runtime and analyzes and compiles the source into the AST as part of the transformation. It then looks for matches speci fi ed in the transformation script, deletes them, or replaces these with the required content, and then regenerates the fi le from the modi fi ed AST. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
43. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT
44. REACT 15 ↝ 16
45. — FANTASTIC FEATURES AND HOW TO HIDE THEM • SYMPHONY, 2022
46. CODEGEN: OVERVIEW SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
47. WE HAD TO SUPPORT, IN PARALLEL: ↝ DIFFERENT VERSIONS OF DEVELOPER DEPENDENCIES (E.G. node.js, Webpack, Babel, ETC.) ↝ DIFFERENT VERSIONS OF APPLICATION DEPENDENCIES (E.G. React ITSELF) ↝ DIFFERENT STRATEGIES USED FOR BUNDLING AND SERVING CODEGEN: OVERVIEW
48. CODEGEN: BEFORE REPO / PACKAGES / A (CORE) B (FUNCTIONAL TESTS) …
49. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B NEXT GENERATION (CONFIG + SCRIPTS)* NEXT GENERATION (CODE GENERATED) …
50. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B NEXT (CONFIG + SCRIPTS)* NEXT (CODE GENERATED) … ↝ DEFAULT BUNDLE THAT’S SERVED ↝ ACTIVE DEVELOPMENT (IE. NEW FEATURES/FIXES) HAPPENS HERE ↝ THIS IS THE CODE THAT’S PUSHED TO THE REPO ↝ LEGACY DEPENDENCIES: REACT 15, WEBPACK 1, NODE 10, ETC.
51. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B NEXT (CONFIG + SCRIPTS)* NEXT (CODE GENERATED) … ↝ HIDDEN BEHIND A FEATURE FLAG ↝ MODERN DEPENDENCIES: REACT 16, WEBPACK 5, NODE 18, ETC. ↝ MOSTLY COMPOSED OF CODE TRANSFORMERS, AUTOMATION SCRIPTS, AND WEBPACK/BABEL CONFIG ↝ ALSO, PARTS OF THE CODE THAT CAN'T BE CODE GENERATED (IE. UNIT AND FUNCTIONAL TESTS)
52. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B NEXT (CONFIG + SCRIPTS)* NEXT (CODE GENERATED) … ↝ GENERATED AT BUILD TIME (IE. CI/LOCALLY) ↝ REACT COMPONENTS, UTILS, AND OTHER BUSINESS LOGIC ↝ THIS CODE IS NEVER PUSHED (1K+ LINES IN GITIGNORE FILE)
53. CODEGEN: AFTER
54. CODEGEN: TRANSFORMERS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
55. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / CODEGEN: TRANSFORMERS
56. CODEGEN: AST
57. export default function transformer(file: FileInfo, api: API) { const j = api.jscodeshift; const root = j(file.source); const variableDeclarators = root.findVariableDeclarators('foo'); variableDeclarators.renameTo('bar'); return root.toSource(); } CODEGEN: TRANSFORMER
58. CODEGEN: TRANSFORMER GROUPS const transformGroups = [ { label: "PropTypes → prop-types", pattern: "./src/ * /.{js,jsx}", transformerPath: proptypes, }, { label: "legacy-testing/src/testUtils → ./utils/test", pattern: "./src/ * /.jsx", transformerPath: testUtils, }, { label: " * .scss → * .global.scss", pattern: "./src/ * /.jsx", transformerPath: cssGlobals, }, ];
59. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / CODEGEN: TRANSFORMERS
60. CODEGEN: GIT IGNORE SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
61. CODEGEN: GIT IGNORE
62. !/src/services/ /src/services/ * * / / . . . !/src/services/telemetry/index.test.js !/src/services/translations/index.test.js !/src/services/validations/index.test.js / / . . . !/src/services/telemetry/ /src/services/telemetry/ * * !/src/services/translations/ /src/services/translations/ * * !/src/services/validations/ /src/services/validations/ * * / / . . . CODEGEN: GIT IGNORE
63. try { const filePaths = await globby(includePattern); const files = normalizePaths("./", filePaths); files.forEach((file) = > { finalContents += `\n\n!/${file}`; }); } catch (err) { logger.error(err as string); } const directoriesPaths = getDirectoriesRecursive(baseDir); const directories = normalizePaths("./", directoriesPaths); directories.forEach((directory) = > { finalContents += `\n\n!/${directory}/`; finalContents += `\n/${directory}/ * * `; }); await outputFile(destGitignoreFile, finalContents); CODEGEN: GIT IGNORE
64. WEBDRIVER 4 ↝ 7 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
65. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
66. WEBDRIVER 4 ↝ 7
67. WEBDRIVER 4 ↝ 7
68. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
69. jscodeshift -t ./node_modules/@wdio/codemod/v6 ./wdio.conf.js jscodeshift -t ./node_modules/@wdio/codemod/v6 ./src/e2e/ *
70. jscodeshift -t ./node_modules/@wdio/codemod/v7 ./wdio.conf.js jscodeshift -t ./node_modules/@wdio/codemod/v7 ./src/e2e/ *
71. WEBDRIVER 4 ↝ 7
72. 🤔 🤔 🤔 WEBDRIVER 4 ↝ 7
73. WEBDRIVER 4 ↝ 7
74. ⬇
75. ⬇
77. CODEGEN: ELSEWHERE SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
78. REACT 16 ↝ 19: ENZYME
79. REACT 16 ↝ 19: OTHER POSSIBILITIES — MEDALLIA - ADMIN SUITE - SAAS PLATFORM DEMO EXPLAINER VIDEO • EXPLAINLY, 2022
80. REACT x ↝ 19: DEPRECATIONS
81. REACT x ↝ 19: CODEMODS
82. CODEMODS: OTHER COMPANIES
83. CODEMODS: OTHER ECOSYSTEMS
84. CODEMODS: STUDIO
85. Act II: Code Splitting SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
86. DYNAMIC IMPORTS — HTTPS://WWW.PATTERNS.DEV
87. DYNAMIC IMPORTS WITH REACT
88. CODE SPLITTING: RESULTS
89. CODE SPLITTING: RESULTS
90. #protip 💡 Dynamic imports are a great tool but, like all optimizations, they don’t come for free. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
91. CODE SPLITTING: GOTCHAS — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
92. CODE SPLITTING: GOTCHAS
93. Act III: Preact SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
94. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREACT
95. PREACT 42.4KB (MIN+GZIP) 4KB (MIN+GZIP)
96. PREACT: INTEGRATING
97. PREACT 205.9KB MIN + GZIP / NO POLYFILLS 175.26KB MIN + GZIP / NO POLYFILLS
98. ↝ WAY SMALLER BUNDLE (APPROXIMATELY 3.5KB). ↝ FASTER VIRTUAL DOM IMPLEMENTATION. ↝ MORE EFFECTIVE MEMORY USAGE. PREACT
99. PREACT: GOTCHAS
100. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREACT
101. Act IV: jQuery SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
102. JQUERY: OVERVIEW
103. JQUERY: OVERVIEW — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
104. JQUERY: ISSUES
105. JQUERY: BUILD-TIME* DETECTION
106. JQUERY: BUILD-TIME* DETECTION
107. JQUERY: BUILD-TIME* DETECTION
108. JQUERY: RUNTIME DETECTION
109. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / JQUERY
110. JQUERY: RUNTIME DETECTION
111. JQUERY: CONVERSION*
112. Act V: Targeting Different Browsers SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
113. WHICH BROWSERS ARE VISITING OUR APP? — RUM REPORT SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS
114. BROWSER MIX BROWSER TOTAL — RUM REPORT
115. POLYFILLING: CONCERNS
116. ↝ THERE'S NO NEED TO SEND POLYFILLS FOR FEATURES ALREADY SUPPORTED BY THE BROWSER. ↝ THEY SHOULD BE DELIVERED ONLY WHEN NECESSARY, NOT PREEMPTIVELY. ↝ ESSENTIAL FUNCTIONALITY MUST BE AVAILABLE TO PREVENT RUNTIME ERRORS. POLYFILLING: RECAP
117. STRATEGIES SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS /
118. #1 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES POLYFILL.IO
119. polyfill.io ↝ INSPECTS THE BROWSER’S USER-AGENT AND SERVES A SCRIPT WITH POLYFILLS TARGETED SPECIFICALLY AT THAT BROWSER. ↝ A SINGLE SCRIPT IN FRONT OF YOUR BUNDLE. ↝ SUPPORTS PICKING A SUBSET OF POLYFILLS (E.G. Map AND Promise).
120. polyfill.io
121. polyfill.io <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="/bundle.min.js"></script>
122. polyfill.io THE SCRIPT IS HOSTED ON A DIFFERENT SERVER. ↝ THE BROWSER WILL HAVE TO SPEND EXTRA 50-300 MS TO SETUP A CONNECTION = EXTRA TIME TO INTERACTIVE. ↝ POLYFILL.IO OUTAGE = YOUR SITE WILL EITHER GET VERY SLOW, OR WILL BREAK IN OLDER BROWSERS.
123. polyfill.io
124. polyfill.io
125. #2 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES @BABEL/PRESET-ENV
126. useBuiltIns { "presets": [ ["env", { / / Specify browsers you’re targeting . . . "targets": "> 0.25%, not dead", / / . . . and either . . . "useBuiltIns": "entry", / / . . . or "useBuiltIns": "usage" }] ] }
127. ↝ NOT VERY USEFUL IF YOU’RE TARGETING OLD BROWSERS (E.G. IE 11). ↝ IT MIGHT REMOVE SOME POLYFILLS, BUT MOST OF THEM WILL STAY IN THE BUNDLE AND WOULD STILL BE DOWNLOADED BY EVERYONE. useBuiltIns: entry
128. useBuiltIns: usage ↝ IT DOESN'T ADD POLYFILLS FOR DEPENDENCIES* ↝ YOU MIGHT GET RUNTIME ERRORS IN LEGACY BROWSERS ↝ IT MIGHT ALSO ADD EXCESSIVE POLYFILLS, E.G. • Array.includes AND String.includes. • Symbol.toStringTag, Math.toStringTag, ETC.
129. useBuiltIns ↝ “ENTRY” MODE TO SAFELY REDUCE THE NUMBER OF POLYFILLS SENT. ↝ “USAGE” MODE TO UNSAFELY REDUCE FURTHER THE NUMBER OF POLYFILLS SENT.
130. #3 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES DIFFERENTIAL SERVING
131. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
132. ↝ YOU DON'T HAVE TO SHIP POLYFILLS. ↝ YOU DON'T HAVE TO TRANSPILE EVERYTHING TO ES5: • CLASSES: STILL CLASSES, NOT HUGE TEMPLATES. • ASYNC/AWAIT/GENERATORS: KEEP THEIR FORM, NOT HUGE ES5-COMPATIBLE SWITCH-CASE-BASED STATE MACHINES. CREATING TWO BUNDLES…
133. CREATING TWO BUNDLES…
134. < ! - - Full polyfill bundle for old browsers - - > <script nomodule src="/polyfills/full.min.js"></script> < ! - - Smaller polyfill bundle for browsers with ES2015+ support - - > <script type="module" src="/polyfills/modern.min.js"></script> < ! - - Bundle script. `defer` is required to execute this script after the `type="module"` one - - > <script src="/bundle.min.js" defer></script> SERVING TWO BUNDLES…
135. ↝ OLD BROWSERS—ONES THAT DON’T SUPPORT ES2015—WILL NOT LOAD type="module" SCRIPTS AND WILL LOAD nomodule ONES. ↝ YOU CAN USE nomodule TO SERVE ES2015 POLYFILLS TO BROWSERS THAT NEED THEM. SERVING TWO BUNDLES…
136. #1 of 3 RAW MODULE/NOMODULE — WHAT IS DIFFERENTIAL SERVING • BY JOHN STEWART SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
137. #1 of 3 ↝ DOWNLOADS BOTH BUNDLES AND EXECUTES BOTH BUNDLES ↝ DOWNLOADS BOTH BUNDLES ↝ DOWNLOADS LEGACY BUNDLE AND DOWNLOADS ESM BUNDLE TWICE RAW MODULE/NOMODULE — WHAT IS DIFFERENTIAL SERVING? • JOHN STEWART SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
138. #2 of 3 USER AGENT DETECTION — SMART BUNDLING • SHUBHAM KANODIA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
139. #2 of 3 router.get('/', async (ctx, next) = > { const useragent = ctx.get('User-Agent') const isModernUser = matchesUA(useragent) const index = isModernUser ? 'modern/…', ‘legacy/…' await send(ctx, index); }); USER AGENT DETECTION SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
140. #2 of 3 ↝ YOU MIGHT NOT BE IN CONTROL OF THE SERVER. ↝ IF YOU LOAD A MODERN SCRIPT WITHOUT THE MODULE ATTRIBUTE, YOU LOSE STREAM PARSING AND OFF MAIN THREAD COMPILATION. USER AGENT DETECTION SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
141. #3 of 3 RUNTIME DETECTION <script> var script = document.createElement('script'); var prefix = (!('noModule' in check)) ? "/ie11" : "/esm"; script.src = prefix + "/index.js"; document.head.appendChild(script); </script> SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
142. SUMMING UP… ↝ 1⃣ POLYFILL.IO: EASY AND DOESN’T SHIP ANYTHING TO MODERN BROWSERS. COSTLY FOR TTI AND FCP. ↝ 2⃣ @BABEL/PRESET-ENV: EASY TO SETUP BUT EITHER NOT VERY USEFUL FOR OLDER BROWSERS, OR REQUIRES YOU TO COMPILE NODE_MODULES AS WELL. ↝ 3⃣ module/nomodule: EASY AND WIDE SUPPORT BUT ONLY STRIPS ES2015−POLYFILLS.
143. SUMMING UP… POLYFILL.IO @BABEL/PRESET-ENV module/nomodule POLYFILLING RAW module/nomodule USER AGENT DETECTION RUNTIME DETECTION SERVING
144. Results SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
145. PULL REQUESTS
146. UNIT TESTS
147. BUNDLE FOOTPRINT ˜37% SMALLER BUNDLE FOOTPRINT ON MODERN BROWSERS: 279.15 KB → 176.78 KB MODERN ˜25% SMALLER BUNDLE FOOTPRINT ON LEGACY BROWSERS 279.15 KB → 223.1 KB LEGACY
148. BUNDLE FOOTPRINT BROWSERS THAT SUPPORT ES MODULES AND HAPPEN NOT TO NEED EXTRA POLYFILLS. AS OF SEPTEMBER 21, 2024, THESE REPRESENT 95.93% OF THE GLOBAL USAGE. MODERN BROWSERS THAT DON’T FIT THE PREVIOUS CRITERIA. MOSTLY THOSE ARE PRE-2018 BROWSERS WITH INTERNET EXPLORER BEING THE HIGHLIGHT. LEGACY
149. BROWSER LINE = SUPPORT FOR THE NEW SMALLER BUNDLE = WILL DOWNLOAD THE LEGACY BUNDLE WITH POLYFILLS — CANIUSE.COM
150. BROWSER LINE ↝ 0.2% INTERNET EXPLORER USAGE ↝ NO OTHER BROWSERS WILL DOWNLOAD THE LARGE BUNDLE
151. CORE WEB VITALS: BEFORE
152. CORE WEB VITALS: AFTER
153. AS WE CAN SEE, MOST OF THEM SIGNIFICANTLY IMPROVED AFTER ENABLING THE FEATURE FLAG: ↝ FCP: 8.3S → 2.3S = 6S FASTER ↝ SPEED INDEX: 8.3S → 4.8S = 3.5S FASTER ↝ LCP: 8.8S → 6.4S = 2.4S FASTER ↝ TTI: 8.7S → 6.7S = 2S FASTER CORE WEB VITALS: AFTER
154. TIMINGS VISUALLY COMPLETE LAST VISUAL CHANGE LOAD TIME (ONLOAD) LOAD TIME (FULLY LOADED) DOM CONTENT LOADED FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST
155. VISUAL PROGRESS FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST
156. Our Radar SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
157. OUR RADAR: TOOLING
158. OUR RADAR: TOOLING
159. OUR RADAR: TOOLING
160. OUR RADAR: WINDOWING
161. OUR RADAR: OFFLOADING
162. OUR RADAR: COMPRESSION
163. OUR RADAR: QUIC — A QUIC UPDATE ON GOOGLE’S EXPERIMENTAL TRANSPORT • CHROMIUM BLOG
165. Closing Thoughts SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
166. #1 of 5 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS UNDERSTANDING INTERNALS HELPS US IMPLEMENT OUR OWN ABSTRACTIONS. E.G. THE JSCODESHIFT-BASED ARCHITECTURE UPGRADE & THE BABEL-BASED MIGRATION TOOLS.
167. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
168. “So here’s my advice for anyone who wants to make a dent in the future of web development: time to learn how compilers work.” Compilers are the New Frameworks • Tom Dale, 2017
169. COMPILERS…
170. COMPILERS & STATIC ANALYSIS… ↝ LINTERS: ESLint (2013), TSLint (2015), Biome (2023), Oxlint (2023)… ↝ FORMATTERS: Prettier (2017), dprint (2020), Biome (2023)… ↝ BUNDLERS: Webpack (2012), Rollup (2015), Vite (2020), esbuild (2020), Rspack (2022), Rolldown (2023)…
171. COMPILERS & STATIC ANALYSIS… ↝ TRANSPILERS: Babel (2014), SWC (2020)… ↝ TYPE CHECKERS: TypeScript (2012), Flow (2014)… ↝ MINIFIERS: UglifyJS (2010), Terser (2018)… ↝ CSS PROCESSING & OPTIMIZATION: PostCSS (2013), CSSO (2015), cssnano (2015), LightningCSS (2022)…
172. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
173. “Reactive systems have existed even in this space for years. In fact, reactivity was seen as a bad thing for a while with the rise of the popularity of React. Th e thing that has made reactive programming interesting again are compilers.” Marko: Compiling Fine-Grained Reactivity • Ryan Carniato, 2022
174. Marko: Compiling Fine-Grained Reactivity • Ryan Carniato, 2022 “Static analysis and compilation let us take what we know of your code's structure and optimize the creation paths as we already know what you are trying to create. We can see what parts of the template are static. We can infer from where dynamic sections are used how to run the most optimal code.”
175. COMPILERS & STATIC ANALYSIS…
176. COMPILERS & STATIC ANALYSIS…
177. COMPILERS & STATIC ANALYSIS…
178. COMPILERS & STATIC ANALYSIS…
179. #2 of 5 YOU HAVE TO SHIP POLYFILLS TO ALL BROWSERS YOUR USERS MIGHT USE… . . . BUT IT'S A BAD IDEA TO SHIP ALL THEORETICALLY REQUIRED POLYFILLS TO ALL OF THEM! SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
180. #3 of 5 ALWAYS CORRELATE BUSINESS METRICS WITH PERFORMANCE THERE IS NO WAY TO GAME THESE BECAUSE THEY DEPEND ON THE BEHAVIOR OF REAL USERS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
181. #4 of 5 DON'T TAKE FAST NETWORKS, CPUS AND RAM FOR GRANTED. TEST ON REAL PHONES AND NETWORKS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
182. BANDWIDTH MIX — GSM ASSOCIATION, 2022
183. THE GLOBAL LTE PICTURE 6.07 (MBPS) 44.31 (MBPS) — THE STATE OF LTE BY OPEN SIGNAL, 2018
184. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / WHY IT MATTERS
185. #5 of 5 THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
186. THAT’S ALL, FOLKS! THANKS! 👋 🇬🇧 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS!