🇺🇸 iJS San Diego 2024

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, automation/code generation, polyfilling strategies, main thread offloading, and many other tips and tricks for large platforms targeting emerging markets.

Transcript

1. Hello, San Diego! 👋 🇺🇸 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE • MAY 22, 2024.
2. MATHEUS ALBUQUERQUE • @ythecombinator SPEED AT SCALE OPTIMIZING THE LARGEST CX PLATFORM OUT THERE
3. Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Sr. SWE @ Medallia ↝ ⚡ Google Developer Expert ↝ ⚛ PC @ React Su m m it NYC
4. Preamble SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
5. #question 🤔 Who here works with front-end? And React?
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 stuff. 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, by Vadim Kravcenko
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, by Vadim Kravcenko
9. This talk is not about… ↝ React 19, Svelte 5, Vue 3… ↝ ISG, SSR, Streaming SSR… ↝ Progressive/Selective/Partial Hydration… ↝ Islands Architecture, Resumability…
14. — MEDALLIA SURVEYS • MARIZ MELO
15. This talk is about… ↝ Modernizing Dependencies ↝ Windowing ↝ 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. WEBPACK 1 㱺 5 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
19. WEBPACK 1 㱺 5 ↝ IMPROVED BUNDLE SIZES USING BETTER TREE SHAKING AND CODE GENERATION ↝ IMPROVED PERFORMANCE BY LEVERAGING PERSISTENT CACHING AND LONG-TERM CACHING ↝ IMPROVED LONG-TERM CACHING WITH BETTER ALGORITHMS AND DEFAULTS
20. WEBPACK 1 㱺 5
21. WEBPACK 1 㱺 5
22. #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
23. #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
24. #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
25. NODE 10 㱺 16 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
26. NODE 10 㱺 16
27. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / NODE
28. REACT 15 㱺 16 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
29. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT
30. REACT 15 㱺 16
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. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT
39. #definition 🧐 Jscodeshift is a tool that runs a transformation script over one or more JavaScript or TypeScript files.
40. #definition 🧐 Jscodeshift reads all the files 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 specified in the transformation script, deletes them, or replaces these with the required content, and then regenerates the file from the modified AST.
42. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT
43. REACT 15 㱺 16
45. CODEGEN — OVERVIEW SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
46. 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
47. CODEGEN — BEFORE REPO / PACKAGES / A (CORE) B (FUNCTIONAL TESTS) …
48. CODEGEN — AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B NEXT GENERATION (CONFIG + SCRIPTS)* NEXT GENERATION (CODE GENERATED) …
49. 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.
50. CODEGEN — AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B NEXT (CONFIG + SCRIPTS)* NEXT (CODE GENERATED) … ↝ HIDDEN BEHIND A FEATURE FLAG ↝ MODERNIZING 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)
51. 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)
52. CODEGEN — AFTER
53. CODEGEN — TRANSFORMERS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
54. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / CODEGEN — TRANSFORMERS
55. CODEGEN — AST
56. 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
57. 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, }, ];
58. const applyTransformer = async ( transformerPath: string, pattern: string | string[] ) = > { const paths = await globby(pattern); const options = { silent: true, }; try { await runTransformer(transformerPath, paths, options); } catch (err) { logger.error(err as string); } }; CODEGEN — RUNNING
59. for (const item of transformGroups) { logger.info(`\n🛠 Appying the '${item.label}' transform`); await applyTransformer(item.transformerPath, item.pattern); } CODEGEN — RUNNING
60. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / CODEGEN — TRANSFORMERS
61. CODEGEN — GIT IGNORE SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
62. CODEGEN — GIT IGNORE
63. !/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
64. 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
65. WEBDRIVER 4 㱺 7 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. Act II — Code Splitting SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
78. CODE SPLITTING — HTTPS://WWW.PATTERNS.DEV
79. DYNAMIC IMPORTS WITH REACT LAZY
80. CODE SPLITTING: RESULTS
81. CODE SPLITTING: RESULTS
82. #protip 💡 Dynamic imports are a great tool but, like all optimizations, they don’t come for free.
83. CODE SPLITTING: GOTCHAS
84. Act III — Preact SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
85. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREACT
86. PREACT 42.4KB (MIN+GZIP) 4KB (MIN+GZIP)
87. PREACT 205.9KB MIN + GZIP / NO POLYFILLS 175.26KB MIN + GZIP / NO POLYFILLS
88. ↝ WAY SMALLER BUNDLE (APPROXIMATELY 3.5KB) ↝ FASTER VIRTUAL DOM IMPLEMENTATION ↝ MORE EFFECTIVE MEMORY USAGE PREACT
89. PREACT: GOTCHAS
90. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREACT
91. Act IV — Targeting Different Browsers SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
92. WHICH BROWSERS ARE VISITING OUR APP? — RUM REPORT SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS
93. BROWSER MIX BROWSER TOTAL — RUM REPORT
94. POLYFILLING: CONCERNS
95. ↝ 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
96. STRATEGIES SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS /
97. #1 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES POLYFILL.IO
98. polyfill.io
99. 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)
100. polyfill.io <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="/bundle.min.js"></script>
101. 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
102. polyfill.io
103. #2 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES BABEL PRESET
104. useBuiltIns { "presets": [ ["env", { / / Specify browsers you’re targeting . . . "targets": "> 0.25%, not dead", / / . . . and either . . . "useBuiltIns": "entry", / / . . . or "useBuiltIns": "usage" }] ] }
105. ↝ 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
106. 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.
107. useBuiltIns ↝ “ENTRY” MODE TO SAFELY REDUCE THE NUMBER OF POLYFILLS SENT. ↝ “USAGE” MODE TO UNSAFELY REDUCE FURTHER THE NUMBER OF POLYFILLS SENT.
108. #3 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES DIFFERENTIAL SERVING
109. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
110. #gotcha 🤷 To ship the right polyfills to the right users you have to send different code to different users.
111. ↝ 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…
112. CREATING TWO BUNDLES…
113. < ! - - 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…
114. ↝ 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…
115. ↝ SAFARI 10.1 SUPPORTS type="module" BUT DOESN’T SUPPORT THE nomodule ATTRIBUTE. ↝ DISTINGUISHES BETWEEN ES5 AND ES2015+ BROWSERS, BUT NEWER STANDARDS LIKE ES2016 BROUGHT MORE POLYFILLABLE FEATURES. THIS LEADS TO SERVING UNNECESSARY POLYFILLS TO MOST ES2015+ BROWSERS. ↝ type="module" SCRIPTS ARE ALWAYS DEFERRED.* SERVING TWO BUNDLES…
116. SERVING TWO BUNDLES…
117. #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
118. #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
119. #2 of 3 USER AGENT DETECTION — SMART BUNDLING • SHUBHAM KANODIA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
120. #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
121. #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
122. #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
123. SUMMING UP… ↝ 1⃣ POLYFILL.IO: EASY AND DOESN’T SHIP ANYTHING TO MODERN BROWSERS. COSTLY IN FOR TTI AND FCP. ↝ 2⃣ useBuiltIns: EASY TO SETUP BUT EITHER NOT VERY USEFUL FOR OLDER BROWSERS, OR REQUIRES YOU TO COMPLILE NODE_MODULES AS WELL. ↝ 3⃣ module/nomodule: EASY AND WIDE SUPPORT BUT ONLY STRIPS ES2015−POLYFILLS.
124. Results SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
125. PULL REQUESTS
126. UNIT TESTS
127. ↝ JAVASCRIPT: MAIN (˜139.09 KB) + VENDOR (˜50.85 KB) + POLYFILLS (˜31 KB) ↝ CSS: MAIN (˜58.21 KB) ↝ TOTAL: JAVASCRIPT (220.94 KB) + CSS (58.21 KB) = 279.15 KB BUNDLE FOOTPRINT: BEFORE
128. BUNDLE FOOTPRINT: AFTER JAVASCRIPT (164.51 KB) + CSS (12.27 KB) = TOTAL (176.78 KB) MODERN JAVASCRIPT (210.83 KB) + CSS (12.27 KB) = TOTAL (223.1 KB) LEGACY
129. BUNDLE FOOTPRINT: AFTER ˜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
130. BUNDLE FOOTPRINT: AFTER BROWSERS THAT SUPPORT ES MODULES AND HAPPEN NOT TO NEED EXTRA POLYFILLS. AS OF OCT 6, 2023, THESE REPRESENT 95.72% 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
131. BROWSER LINE = SUPPORT FOR THE NEW SMALLER BUNDLE = WILL DOWNLOAD THE LEGACY BUNDLE WITH POLYFILLS — CANIUSE.COM
132. BROWSER LINE ↝ 0.2% INTERNET EXPLORER USAGE ↝ NO OTHER BROWSERS WILL DOWNLOAD THE LARGE BUNDLE
133. CORE WEB VITALS: BEFORE
134. CORE WEB VITALS: AFTER
135. 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
136. TIMINGS VISUALLY COMPLETE LAST VISUAL CHANGE LOAD TIME (ONLOAD) LOAD TIME (FULLY LOADED) DOM CONTENT LOADED FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST
137. VISUAL PROGRESS FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST
138. Our Radar SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
139. CULTURE + TOOLING SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / OUR RADAR
140. CULTURE + TOOLING
141. CULTURE + TOOLING
142. CULTURE + TOOLING
143. RESOURCE HINTS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / OUR RADAR
144. ↝ MANY PERFORMANCE OPTIMIZATIONS CAN BE MADE WHEN WE CAN PREDICT WHAT USERS MIGHT DO ↝ RESOURCE HINTS ARE A SIMPLE BUT EFFECTIVE WAY TO ALLOW DEVELOPERS TO HELP THE BROWSER TO STAY ONE STEP AHEAD OF THE USER AND KEEP PAGES FAST RESOURCE HINTS
145. RESOURCE HINTS < ! - - Preconnect - - > <link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://scripts.example.com"> < ! - - Preloading - - > <link rel="preload" href="https://example.com/fonts/font.woff"> < ! - - DNS Prefetch - - > <link rel="dns-prefetch" href="https://fonts.gstatic.com"> <link rel="dns-prefetch" href="https://images.example.com"> < ! - - Prefetch - - > <link rel="prefetch" href="/uploads/images/pic.png"> <link rel="prefetch" href="https://example.com/news/?page=2"> < ! - - Prerender - - > <link rel="prerender" href="https://example.com/news/?page=2">
146. PRIORITY HINTS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / OUR RADAR
147. ↝ INCREASE THE PRIORITY OF THE LCP IMAGE ↝ LOWER THE PRIORITY OF ABOVE-THE-FOLD IMAGES AND PRELOADED RESOURCES ↝ LOWER THE PRIORITY FOR NON-CRITICAL DATA FETCHES ↝ REPRIORITIZE SCRIPTS PRIORITY HINTS
148. PRIORITY HINTS < ! - - 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>
149. PRIORITY HINTS / / Important validation data const user = await fetch("/user"); / / Less important content data const relatedPosts = await fetch("/posts/suggested", { priority: "low" });
151. OUR RADAR — OFFLOADING
152. OUR RADAR — COMPRESSION
153. OUR RADAR — QUIC — A QUIC UPDATE ON GOOGLE’S EXPERIMENTAL TRANSPORT • CHROMIUM BLOG
154. Why It Matters SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
155. BANDWIDTH MIX — GSM ASSOCIATION, 2022
156. THE GLOBAL LTE PICTURE 6.07 (MBPS) 44.31 (MBPS) — THE STATE OF LTE BY OPEN SIGNAL, 2018
157. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / WHY IT MATTERS
158. #research 📚 A 500ms delay resulted in up to a 26% increase in frustration and up to an 8% decrease in engagement. — Radware research, 2013
159. #research 📚 Delayed web pages caused a 38% rise in mobile users' heart rates — equivalent to the anxiety of watching a horror movie alone. — Ericsson ConsumerLab neuro research, 2015
160. #research 📚 53% of mobile users abandon sites that take over 3 seconds to load. — DoubleClick, 2020
161. Closing Thoughts SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
162. COMPILERS & UI ENGINEERING
163. COMPILERS & UI ENGINEERING
164. COMPILERS & UI ENGINEERING
165. COMPILERS & UI ENGINEERING
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 UPGRADE TOOL.
167. #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
168. #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
169. #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
170. #5 of 5 THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
171. THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS!