🇺🇸 iJS San Diego 2024

Slide 1

Slide 1 text

Hello, San Diego! 👋 🇺🇸 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE • MAY 22, 2024.

Slide 2

Slide 2 text

MATHEUS ALBUQUERQUE • @ythecombinator SPEED AT SCALE OPTIMIZING THE LARGEST CX PLATFORM OUT THERE

Slide 3

Slide 3 text

Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Sr. SWE @ Medallia ↝ ⚡ Google Developer Expert ↝ ⚛ PC @ React Su m m it NYC

Slide 4

Slide 4 text

Preamble SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 5

Slide 5 text

#question 🤔 Who here works with front-end? And React?

Slide 6

Slide 6 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREAMBLE

Slide 7

Slide 7 text

[…] “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

Slide 8

Slide 8 text

[…] “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

Slide 9

Slide 9 text

This talk is not about… ↝ React 19, Svelte 5, Vue 3… ↝ ISG, SSR, Streaming SSR… ↝ Progressive/Selective/Partial Hydration… ↝ Islands Architecture, Resumability…

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

— MEDALLIA SURVEYS • MARIZ MELO

Slide 15

Slide 15 text

This talk is about… ↝ Modernizing Dependencies ↝ Windowing ↝ Code Splitting ↝ Preact ↝ Targeting Different Browsers

Slide 16

Slide 16 text

This talk is also about… ↝ Challenges in Legacy Codebases ↝ Experiences ↝ Our Radar ↝ Lessons Learned

Slide 17

Slide 17 text

Act I — Modernizing Dependencies SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 18

Slide 18 text

WEBPACK 1 㱺 5 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

WEBPACK 1 㱺 5

Slide 21

Slide 21 text

WEBPACK 1 㱺 5

Slide 22

Slide 22 text

#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

Slide 23

Slide 23 text

#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

Slide 24

Slide 24 text

#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

Slide 25

Slide 25 text

NODE 10 㱺 16 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 26

Slide 26 text

NODE 10 㱺 16

Slide 27

Slide 27 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / NODE

Slide 28

Slide 28 text

REACT 15 㱺 16 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 29

Slide 29 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT

Slide 30

Slide 30 text

REACT 15 㱺 16

Slide 31

Slide 31 text

REACT 15 㱺 16

Slide 32

Slide 32 text

REACT 15 㱺 16

Slide 33

Slide 33 text

REACT 15 㱺 16

Slide 34

Slide 34 text

❌ REACT 15 㱺 16

Slide 35

Slide 35 text

REACT 15 㱺 16

Slide 36

Slide 36 text

❌ REACT 15 㱺 16

Slide 37

Slide 37 text

REACT 15 㱺 16

Slide 38

Slide 38 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT

Slide 39

Slide 39 text

#definition 🧐 Jscodeshift is a tool that runs a transformation script over one or more JavaScript or TypeScript files.

Slide 40

Slide 40 text

#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.

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT

Slide 43

Slide 43 text

REACT 15 㱺 16

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

CODEGEN — OVERVIEW SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

CODEGEN — BEFORE REPO / PACKAGES / A (CORE) B (FUNCTIONAL TESTS) …

Slide 48

Slide 48 text

CODEGEN — AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B NEXT GENERATION (CONFIG + SCRIPTS)* NEXT GENERATION (CODE GENERATED) …

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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)

Slide 51

Slide 51 text

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)

Slide 52

Slide 52 text

CODEGEN — AFTER

Slide 53

Slide 53 text

CODEGEN — TRANSFORMERS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 54

Slide 54 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / CODEGEN — TRANSFORMERS

Slide 55

Slide 55 text

CODEGEN — AST

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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, }, ];

Slide 58

Slide 58 text

Slide 59

Slide 59 text

for (const item of transformGroups) { logger.info(`\n🛠 Appying the '${item.label}' transform`); await applyTransformer(item.transformerPath, item.pattern); } CODEGEN — RUNNING

Slide 60

Slide 60 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / CODEGEN — TRANSFORMERS

Slide 61

Slide 61 text

CODEGEN — GIT IGNORE SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 62

Slide 62 text

CODEGEN — GIT IGNORE

Slide 63

Slide 63 text

!/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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

WEBDRIVER 4 㱺 7 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 66

Slide 66 text

WEBDRIVER 4 㱺 7

Slide 67

Slide 67 text

WEBDRIVER 4 㱺 7

Slide 68

Slide 68 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 69

Slide 69 text

jscodeshift -t ./node_modules/@wdio/codemod/v6 ./wdio.conf.js jscodeshift -t ./node_modules/@wdio/codemod/v6 ./src/e2e/ *

Slide 70

Slide 70 text

jscodeshift -t ./node_modules/@wdio/codemod/v7 ./wdio.conf.js jscodeshift -t ./node_modules/@wdio/codemod/v7 ./src/e2e/ *

Slide 71

Slide 71 text

WEBDRIVER 4 㱺 7

Slide 72

Slide 72 text

WEBDRIVER 4 㱺 7 🤔 🤔 🤔

Slide 73

Slide 73 text

WEBDRIVER 4 㱺 7

Slide 74

Slide 74 text

⬇

Slide 75

Slide 75 text

⬇

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Act II — Code Splitting SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 78

Slide 78 text

CODE SPLITTING — HTTPS://WWW.PATTERNS.DEV

Slide 79

Slide 79 text

DYNAMIC IMPORTS WITH REACT LAZY

Slide 80

Slide 80 text

CODE SPLITTING: RESULTS

Slide 81

Slide 81 text

CODE SPLITTING: RESULTS

Slide 82

Slide 82 text

#protip 💡 Dynamic imports are a great tool but, like all optimizations, they don’t come for free.

Slide 83

Slide 83 text

CODE SPLITTING: GOTCHAS

Slide 84

Slide 84 text

Act III — Preact SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 85

Slide 85 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREACT

Slide 86

Slide 86 text

PREACT 42.4KB (MIN+GZIP) 4KB (MIN+GZIP)

Slide 87

Slide 87 text

PREACT 205.9KB MIN + GZIP / NO POLYFILLS 175.26KB MIN + GZIP / NO POLYFILLS

Slide 88

Slide 88 text

↝ WAY SMALLER BUNDLE (APPROXIMATELY 3.5KB) ↝ FASTER VIRTUAL DOM IMPLEMENTATION ↝ MORE EFFECTIVE MEMORY USAGE PREACT

Slide 89

Slide 89 text

PREACT: GOTCHAS

Slide 90

Slide 90 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREACT

Slide 91

Slide 91 text

Act IV — Targeting Different Browsers SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 92

Slide 92 text

WHICH BROWSERS ARE VISITING OUR APP? — RUM REPORT SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS

Slide 93

Slide 93 text

BROWSER MIX BROWSER TOTAL — RUM REPORT

Slide 94

Slide 94 text

POLYFILLING: CONCERNS

Slide 95

Slide 95 text

↝ 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

Slide 96

Slide 96 text

STRATEGIES SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS /

Slide 97

Slide 97 text

#1 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES POLYFILL.IO

Slide 98

Slide 98 text

polyfill.io

Slide 99

Slide 99 text

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)

Slide 100

Slide 100 text

polyfill.io

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

polyfill.io

Slide 103

Slide 103 text

#2 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES BABEL PRESET

Slide 104

Slide 104 text

useBuiltIns { "presets": [ ["env", { / / Specify browsers you’re targeting . . . "targets": "> 0.25%, not dead", / / . . . and either . . . "useBuiltIns": "entry", / / . . . or "useBuiltIns": "usage" }] ] }

Slide 105

Slide 105 text

↝ 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

Slide 106

Slide 106 text

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.

Slide 107

Slide 107 text

useBuiltIns ↝ “ENTRY” MODE TO SAFELY REDUCE THE NUMBER OF POLYFILLS SENT. ↝ “USAGE” MODE TO UNSAFELY REDUCE FURTHER THE NUMBER OF POLYFILLS SENT.

Slide 108

Slide 108 text

#3 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES DIFFERENTIAL SERVING

Slide 109

Slide 109 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES

Slide 110

Slide 110 text

#gotcha 🤷 To ship the right polyfills to the right users you have to send different code to different users.

Slide 111

Slide 111 text

↝ 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…

Slide 112

Slide 112 text

CREATING TWO BUNDLES…

Slide 113

Slide 113 text

< ! - - Full polyfill bundle for old browsers - - > < ! - - Smaller polyfill bundle for browsers with ES2015+ support - - > < ! - - Bundle script. `defer` is required to execute this script after the `type="module"` one - - > SERVING TWO BUNDLES…

Slide 114

Slide 114 text

↝ 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…

Slide 115

Slide 115 text

↝ 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…

Slide 116

Slide 116 text

SERVING TWO BUNDLES…

Slide 117

Slide 117 text

#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

Slide 118

Slide 118 text

#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

Slide 119

Slide 119 text

#2 of 3 USER AGENT DETECTION — SMART BUNDLING • SHUBHAM KANODIA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES

Slide 120

Slide 120 text

#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

Slide 121

Slide 121 text

#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

Slide 122

Slide 122 text

#3 of 3 RUNTIME DETECTION var script = document.createElement('script'); var prefix = (!('noModule' in check)) ? "/ie11" : "/esm"; script.src = prefix + "/index.js"; document.head.appendChild(script); SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES

Slide 123

Slide 123 text

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.

Slide 124

Slide 124 text

Results SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 125

Slide 125 text

PULL REQUESTS

Slide 126

Slide 126 text

UNIT TESTS

Slide 127

Slide 127 text

↝ 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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

BROWSER LINE = SUPPORT FOR THE NEW SMALLER BUNDLE = WILL DOWNLOAD THE LEGACY BUNDLE WITH POLYFILLS — CANIUSE.COM

Slide 132

Slide 132 text

BROWSER LINE ↝ 0.2% INTERNET EXPLORER USAGE ↝ NO OTHER BROWSERS WILL DOWNLOAD THE LARGE BUNDLE

Slide 133

Slide 133 text

CORE WEB VITALS: BEFORE

Slide 134

Slide 134 text

CORE WEB VITALS: AFTER

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

TIMINGS VISUALLY COMPLETE LAST VISUAL CHANGE LOAD TIME (ONLOAD) LOAD TIME (FULLY LOADED) DOM CONTENT LOADED FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST

Slide 137

Slide 137 text

VISUAL PROGRESS FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST

Slide 138

Slide 138 text

Our Radar SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 139

Slide 139 text

CULTURE + TOOLING SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / OUR RADAR

Slide 140

Slide 140 text

CULTURE + TOOLING

Slide 141

Slide 141 text

CULTURE + TOOLING

Slide 142

Slide 142 text

CULTURE + TOOLING

Slide 143

Slide 143 text

RESOURCE HINTS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / OUR RADAR

Slide 144

Slide 144 text

↝ 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

Slide 145

Slide 145 text

RESOURCE HINTS < ! - - Preconnect - - > < ! - - Preloading - - > < ! - - DNS Prefetch - - > < ! - - Prefetch - - > < ! - - Prerender - - >

Slide 146

Slide 146 text

PRIORITY HINTS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / OUR RADAR

Slide 147

Slide 147 text

↝ 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

Slide 148

Slide 148 text

PRIORITY HINTS < ! - - Increase the priority of the LCP image - - >

< ! - - Lower the priority of above-the-fold images - - >

< ! - - Reprioritize scripts - - >

Slide 149

Slide 149 text

PRIORITY HINTS / / Important validation data const user = await fetch("/user"); / / Less important content data const relatedPosts = await fetch("/posts/suggested", { priority: "low" });

Slide 150

Slide 150 text

No content

Slide 151

Slide 151 text

OUR RADAR — OFFLOADING

Slide 152

Slide 152 text

OUR RADAR — COMPRESSION

Slide 153

Slide 153 text

OUR RADAR — QUIC — A QUIC UPDATE ON GOOGLE’S EXPERIMENTAL TRANSPORT • CHROMIUM BLOG

Slide 154

Slide 154 text

Why It Matters SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 155

Slide 155 text

BANDWIDTH MIX — GSM ASSOCIATION, 2022

Slide 156

Slide 156 text

THE GLOBAL LTE PICTURE 6.07 (MBPS) 44.31 (MBPS) — THE STATE OF LTE BY OPEN SIGNAL, 2018

Slide 157

Slide 157 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / WHY IT MATTERS

Slide 158

Slide 158 text

#research 📚 A 500ms delay resulted in up to a 26% increase in frustration and up to an 8% decrease in engagement. — Radware research, 2013

Slide 159

Slide 159 text

#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

Slide 160

Slide 160 text

#research 📚 53% of mobile users abandon sites that take over 3 seconds to load. — DoubleClick, 2020

Slide 161

Slide 161 text

Closing Thoughts SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 162

Slide 162 text

COMPILERS & UI ENGINEERING

Slide 163

Slide 163 text

COMPILERS & UI ENGINEERING

Slide 164

Slide 164 text

COMPILERS & UI ENGINEERING

Slide 165

Slide 165 text

COMPILERS & UI ENGINEERING

Slide 166

Slide 166 text

#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.

Slide 167

Slide 167 text

#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

Slide 168

Slide 168 text

#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

Slide 169

Slide 169 text

#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

Slide 170

Slide 170 text

#5 of 5 THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS

Slide 171

Slide 171 text

THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS!