🇩🇪 iJS Munich 2023

Slide 1

Slide 1 text

Hello, Munich! 👋 🇩🇪 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE • THE 25TH OF OCTOBER, 2023.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

↑ ALL THE LINKS! 🧑🏫 TECHLABS 🐦 @ythecombinator 👨💻 MEDALLIA ⚡ PERF GDE SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 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 7

Slide 7 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 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

— MEDALLIA SURVEYS • BY MARIZ MELO

Slide 13

Slide 13 text

YOU ALREADY KNOW… ↝ GZIP EVERYTHING ↝ MINIFY BOTH CSS AND JS ↝ CSS GOES ON ↝ JS GOES LASTLY ON ↝ OPTIMIZE ALL THE IMAGES

Slide 14

Slide 14 text

YOU ALREADY KNOW… ↝ HTTP/2 (REQ/RES MULTIPLEXING; EFFICIENT COMPRESSION; REQUEST PRIORITIZATION; SERVER PUSH) ↝ IMAGE CDNS (40–80% SAVINGS; LESS WORK WITH TRANSFORMATION, OPTIMIZATION, AND DELIVERY) ↝ OPTIMIZE THIRD-PARTIES (DEFER/REPLACE/UPDATE)

Slide 15

Slide 15 text

YOU ALREADY KNOW…

Slide 16

Slide 16 text

FIXING WEB PERFORMANCE

Slide 17

Slide 17 text

FIXING WEB PERFORMANCE

Slide 18

Slide 18 text

This talk is about… ↝ Optimizing JavaScript Delivery ↝ Shipping Less Code ↝ Targeting Different Browsers ↝ Ongoing & Future Work ↝ Closing Thoughts

Slide 19

Slide 19 text

This talk is also about… ↝ Code Generation ↝ Polyfills ↝ Problems ↝ Experiences ↝ Lessons Learned

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

#heads-up 🥱 60 minutes is a lot of time, I know…

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Optimizing JavaScript Delivery SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 24

Slide 24 text

OPTIMIZING JAVASCRIPT DELIVERY TRANSFERRING SCRIPTS IN AN EFFICIENT WAY. NETWORK UTILIZATION NOT BLOCKING THE MAIN THREAD TOO MUCH. SCRIPT EXECUTION

Slide 25

Slide 25 text

OPTIMIZING JAVASCRIPT DELIVERY TRANSFERRING SCRIPTS IN AN EFFICIENT WAY. NETWORK UTILIZATION NOT BLOCKING THE MAIN THREAD TOO MUCH. SCRIPT EXECUTION

Slide 26

Slide 26 text

OPTIMIZING JAVASCRIPT DELIVERY — JAVASCRIPT LOADING PRIORITIES IN CHROME • ADDY OSMANI

Slide 27

Slide 27 text

Shipping Less Code SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 28

Slide 28 text

REACT 15 㱺 16 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 29

Slide 29 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE / REACT

Slide 30

Slide 30 text

REACT 15 㱺 16 ↝ react = 5.3 KB (2.2 KB GZIPPED), DOWN FROM 20.7 KB (6.9 KB GZIPPED) ↝ react-dom = 103.7 KB (32.6 KB GZIPPED), DOWN FROM 141 KB (42.9 KB GZIPPED) ↝ A COMBINED 32% SIZE DECREASE COMPARED TO THE PREVIOUS VERSION (30% POST-GZIP)

Slide 31

Slide 31 text

REACT 15 㱺 16

Slide 32

Slide 32 text

WEBPACK 1 㱺 5 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 33

Slide 33 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 34

Slide 34 text

— MIGRATING TO WEBPACK 5 TO IMPROVE BUILD TIME AND REDUCE CHUNK SIZES • MAYANK KHANNA WEBPACK 1 㱺 5

Slide 35

Slide 35 text

— WEBPACK 5 MIGRATION • JITENDRA PATHAK WEBPACK 1 㱺 5

Slide 36

Slide 36 text

WEBPACK 1 㱺 5

Slide 37

Slide 37 text

WEBPACK 1 㱺 5

Slide 38

Slide 38 text

WEBPACK 1 㱺 5 ↝ NamedModulesPlugin = > optimization.moduleIds: 'named' ↝ NamedChunksPlugin = > optimization.chunkIds: 'named' ↝ HashedModulesPlugin = > optimization.moduleIds: 'deterministic'

Slide 39

Slide 39 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 / SHIPPING LESS CODE / WEBPACK

Slide 40

Slide 40 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 / SHIPPING LESS CODE / WEBPACK

Slide 41

Slide 41 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 / SHIPPING LESS CODE / WEBPACK

Slide 42

Slide 42 text

NODE 10 㱺 16 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 43

Slide 43 text

NODE 10 㱺 16

Slide 44

Slide 44 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE / NODE

Slide 45

Slide 45 text

NODE 10 㱺 16

Slide 46

Slide 46 text

NODE 10 㱺 16 "resolutions": { "fibers": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.1.3.tgz" },

Slide 47

Slide 47 text

REACT 15 㱺 16 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 48

Slide 48 text

REACT 15 㱺 16

Slide 49

Slide 49 text

REACT 15 㱺 16

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

REACT 15 㱺 16

Slide 52

Slide 52 text

❌ REACT 15 㱺 16

Slide 53

Slide 53 text

REACT 15 㱺 16

Slide 54

Slide 54 text

❌ REACT 15 㱺 16

Slide 55

Slide 55 text

REACT 15 㱺 16

Slide 56

Slide 56 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE / REACT

Slide 57

Slide 57 text

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

Slide 58

Slide 58 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 59

Slide 59 text

No content

Slide 60

Slide 60 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE / REACT

Slide 61

Slide 61 text

REACT 15 㱺 16

Slide 62

Slide 62 text

CODE GENERATION: PREAMBLE SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 63

Slide 63 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 CODE GENERATION: AFTER

Slide 64

Slide 64 text

CODE GENERATION: BEFORE REPO / PACKAGES / A (CORE) B (FUNCTIONAL TESTS) …

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

CODE GENERATION: 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 67

Slide 67 text

CODE GENERATION: 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)

Slide 68

Slide 68 text

CODE GENERATION: 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 69

Slide 69 text

CODE GENERATION: AFTER

Slide 70

Slide 70 text

CODE GENERATION: TRANSFORMERS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 71

Slide 71 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE / CODE GENERATION: TRANSFORMERS

Slide 72

Slide 72 text

CODE GENERATION: AST

Slide 73

Slide 73 text

CODE GENERATION: AST

Slide 74

Slide 74 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(); } CODE GENERATION: AST

Slide 75

Slide 75 text

CODE GENERATION: TRANSFORMERS 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 76

Slide 76 text

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

const testUtilsAbsolutePath = resolve("src/utils/test"); const testUtilsPathNormalizer = (path: string) = > path.substring(path.indexOf("/") + 1); const pathTransformer = (filePath: string) = > (importPath: ASTPath) = > { const fileAbsolutePath = resolve(filePath); const diff = relative(fileAbsolutePath, testUtilsAbsolutePath); importPath.value.source.value = testUtilsPathNormalizer(diff); }; CODE GENERATION: TRANSFORMERS

Slide 79

Slide 79 text

export default function transformer(file: FileInfo, api: API) { const j = api.jscodeshift; const root = j(file.source); return root .find(j.ImportDeclaration, { source: { value: "legacy-testing/src/testUtils" }, }) .forEach(pathTransformer(file.path)) .toSource(); } CODE GENERATION: TRANSFORMERS

Slide 80

Slide 80 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE / CODE GENERATION: TRANSFORMERS

Slide 81

Slide 81 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE / CODE GENERATION: TRANSFORMERS

Slide 82

Slide 82 text

CODE GENERATION: FILES SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 83

Slide 83 text

CODE GENERATION: FILES const copyGroups = [ { label: "legacy/bin", source: " . . / . . /packages/legacy/bin", destination: "./bin", }, { label: "legacy/stub", source: " . . / . . /packages/legacy/stub", destination: "./stub", }, { label: "legacy-testing/src/utils", source: " . . / . . /packages/legacy-testing/src/utils", destination: "./src/utils/test", }, / / . . . ];

Slide 84

Slide 84 text

const copyGroups = [ / / . . . { label: "legacy/src", source: " . . / . . /packages/legacy/src", destination: "./src", pattern: [ " / / .test.jsx", " / / .test.js", " / / .spec.jsx", " / / .spec.js", " / / .snap", ], filter: "!match" as const, } ]; CODE GENERATION: FILES

Slide 85

Slide 85 text

Slide 86

Slide 86 text

for (const item of copyGroups) { logger.info(`\n🚚 Copying the '${item.label}' directory`); await copyFiles(item); } CODE GENERATION: FILES

Slide 87

Slide 87 text

CODE GENERATION: RENAMING SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 88

Slide 88 text

const renameGroups = [ { label: "anchor.scss", source: "/ * /anchor.scss", destination: "anchor.global.scss", }, { label: "anchorBar.scss", source: "/ * /anchorBar.scss", destination: "anchor.global.scss", }, ]; CODE GENERATION: RENAMING

Slide 89

Slide 89 text

Slide 90

Slide 90 text

for (const item of renameGroups) { logger.info(`\n✏ Renaming the the following item: '${item.label}'`); await renameFiles(item.source); } CODE GENERATION: RENAMING

Slide 91

Slide 91 text

CODE GENERATION: GIT IGNORE SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 92

Slide 92 text

CODE GENERATION: GIT IGNORE

Slide 93

Slide 93 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/ * * / / . . . CODE GENERATION: GIT IGNORE

Slide 94

Slide 94 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); CODE GENERATION: GIT IGNORE

Slide 95

Slide 95 text

WEBDRIVER 4 㱺 7 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 96

Slide 96 text

WEBDRIVER 4 㱺 7

Slide 97

Slide 97 text

WEBDRIVER 4 㱺 7

Slide 98

Slide 98 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / SHIPPING LESS CODE /

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

WEBDRIVER 4 㱺 7

Slide 102

Slide 102 text

WEBDRIVER 4 㱺 7 🤔 🤔 🤔

Slide 103

Slide 103 text

WEBDRIVER 4 㱺 7

Slide 104

Slide 104 text

⬇

Slide 105

Slide 105 text

⬇

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

BROWSER MIX BROWSER TOTAL — APP DYNAMICS REPORT

Slide 110

Slide 110 text

POLYFILLING: CONCERNS

Slide 111

Slide 111 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 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

polyfill.io

Slide 115

Slide 115 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 116

Slide 116 text

polyfill.io

Slide 117

Slide 117 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 118

Slide 118 text

polyfill.io

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 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 122

Slide 122 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 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

DIFFERENTIAL SERVING — SMART BUNDLING: HOW TO SERVE LEGACY CODE ONLY TO LEGACY BROWSERS • SHUBHAM KANODIA

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

#eureka 💡 We can use double bundling to create different bundle targets!

Slide 129

Slide 129 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 130

Slide 130 text

CREATING TWO BUNDLES…

Slide 131

Slide 131 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 132

Slide 132 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 133

Slide 133 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 134

Slide 134 text

SERVING TWO BUNDLES…

Slide 135

Slide 135 text

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

Slide 136

Slide 136 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 137

Slide 137 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 138

Slide 138 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 139

Slide 139 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 140

Slide 140 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 141

Slide 141 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 142

Slide 142 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 143

Slide 143 text

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

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

FEATURE DETECTION: NETWORK STATUS

Slide 146

Slide 146 text

Loading . . . }> FEATURE DETECTION: NETWORK STATUS

Slide 147

Slide 147 text

const Video = lazy(() = > import("./Video")); const Preview = lazy(() = > import("./Preview")); const networkInfo = useNetworkStatus(); const { With, Switch, Otherwise } = usePatternMatch(networkInfo); FEATURE DETECTION: NETWORK STATUS

Slide 148

Slide 148 text

NETWORK STATUS: NOT SUPPORTED

Slide 149

Slide 149 text

NETWORK STATUS: NOT SUPPORTED

Slide 150

Slide 150 text

NETWORK STATUS: 4G

Slide 151

Slide 151 text

NETWORK STATUS: 3G

Slide 152

Slide 152 text

NETWORK STATUS: CODE SPLITTING

Slide 153

Slide 153 text

NETWORK STATUS: CODE SPLITTING

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

PULL REQUESTS

Slide 157

Slide 157 text

UNIT TESTS

Slide 158

Slide 158 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 159

Slide 159 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 160

Slide 160 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 161

Slide 161 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 162

Slide 162 text

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

Slide 163

Slide 163 text

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

Slide 164

Slide 164 text

CORE WEB VITALS: BEFORE

Slide 165

Slide 165 text

CORE WEB VITALS: AFTER

Slide 166

Slide 166 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 167

Slide 167 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 168

Slide 168 text

VISUAL PROGRESS FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST

Slide 169

Slide 169 text

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

Slide 170

Slide 170 text

CULTURE + TOOLING SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / ONGOING EFFORTS

Slide 171

Slide 171 text

CULTURE + TOOLING

Slide 172

Slide 172 text

CULTURE + TOOLING

Slide 173

Slide 173 text

CODE SPLITTING SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / ONGOING EFFORTS

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

DYNAMIC IMPORTS WITH REACT LAZY

Slide 177

Slide 177 text

CODE SPLITTING: RESULTS

Slide 178

Slide 178 text

CODE SPLITTING: RESULTS

Slide 179

Slide 179 text

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

Slide 180

Slide 180 text

PREACT IN PRODUCTION SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / ONGOING EFFORTS

Slide 181

Slide 181 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / ONGOING EFFORTS / PREACT IN PRODUCTION

Slide 182

Slide 182 text

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

Slide 183

Slide 183 text

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

Slide 184

Slide 184 text

WINDOWING SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / ONGOING EFFORTS

Slide 185

Slide 185 text

WINDOWING: RECAP — HOW DOES WINDOWING WORK? • BRIAN VAUGHN

Slide 186

Slide 186 text

— RENDERING LARGE LISTS WITH REACT-WINDOW • ADDY OSMANI WINDOWING: RECAP

Slide 187

Slide 187 text

WINDOWING: OPTIONS

Slide 188

Slide 188 text

WINDOWING: RESULTS

Slide 189

Slide 189 text

RESOURCE HINTS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / ONGOING EFFORTS

Slide 190

Slide 190 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 191

Slide 191 text

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

Slide 192

Slide 192 text

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

Slide 193

Slide 193 text

↝ IT ALLOWS THE BROWSER TO SETUP EARLY CONNECTIONS BEFORE THE REQUEST IS ACTUALLY SENT TO THE SERVER. THIS INCLUDES: • TLS NEGOTIATIONS • TCP HANDSHAKES ↝ ELIMINATES ROUNDTRIP LATENCY PRECONNECT

Slide 194

Slide 194 text

PRECONNECT 100MS 200MS 300MS 400MS 500MS 600MS 700MS HTML CSS FONT 1 FONT 2 FONTS START LOADING FONTS RENDERED

Slide 195

Slide 195 text

PRECONNECT 100MS 200MS 300MS 400MS 500MS 600MS 700MS HTML CSS FONT 1 FONT 2 FONTS START LOADING FONTS RENDERED FONT 1 FONT 2

Slide 196

Slide 196 text

↝ DNS PREFETCH ⇢ WARNS THE BROWSER ABOUT THE DOMAINS IT’S GOING TO NEED TO LOOK UP ↝ PREFETCH ⇢ FETCH RESOURCES IN THE BACKGROUND AND STORE THEM IN CACHE ↝ PRERENDER ⇢ IT GOES ONE STEP FURTHER AND EXECUTES THE FILES …AND MUCH MORE!

Slide 197

Slide 197 text

PRIORITY HINTS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / ONGOING EFFORTS

Slide 198

Slide 198 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 199

Slide 199 text

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

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

< ! - - Reprioritize scripts - - >

Slide 200

Slide 200 text

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

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

< ! - - Reprioritize scripts - - >

Slide 201

Slide 201 text

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

Slide 202

Slide 202 text

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

Slide 203

Slide 203 text

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

Slide 204

Slide 204 text

No content

Slide 205

Slide 205 text

↝ CSS TRICKS (E.G. font-display: swap AND will- change) ↝ AVOID THE INITIAL HTTP TO HTTPS REDIRECTS SO THAT PAGES LOAD FASTER USING HTTP STRICT TRANSPORT SECURITY (HSTS) ↝ SEND DATA WITHOUT EXTRA ROUND TRIPS WITH QUIC FUTURE WORK

Slide 206

Slide 206 text

DATA TRANSFER: QUIC — A QUIC UPDATE ON GOOGLE’S EXPERIMENTAL TRANSPORT • CHROMIUM BLOG

Slide 207

Slide 207 text

DATA TRANSFER: COMPRESSION

Slide 208

Slide 208 text

PREDICTIVE PREFETCHING SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / FUTURE WORK /

Slide 209

Slide 209 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / FUTURE WORK / PREDICTIVE PREFETCHING

Slide 210

Slide 210 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / FUTURE WORK / PREDICTIVE PREFETCHING

Slide 211

Slide 211 text

PREDICTIVE PREFETCHING

Slide 212

Slide 212 text

OFFLOADING THIRD-PARTY SCRIPTS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / FUTURE WORK /

Slide 213

Slide 213 text

OFFLOADING THIRD-PARTY SCRIPTS

Slide 214

Slide 214 text

OFFLOADING THIRD-PARTY SCRIPTS — HOW PARTYTOWN ELIMINATES WEBSITE BLOAT FROM THIRD-PARTY SCRIPTS • STEVE SEWELL

Slide 215

Slide 215 text

Why Are We Here? SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 216

Slide 216 text

BROWSER MIX

Slide 217

Slide 217 text

BROWSER MIX

Slide 218

Slide 218 text

BANDWIDTH MIX — GSM ASSOCIATION, 2022

Slide 219

Slide 219 text

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

Slide 220

Slide 220 text

#research 📚 40% of Brits reported that they had become physically violent toward their computers. — British Psychology Society, 2009

Slide 221

Slide 221 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 222

Slide 222 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 223

Slide 223 text

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

Slide 224

Slide 224 text

BUSINESS OUTCOMES — AKAMAI AND CHROME RESEARCH, 2017

Slide 225

Slide 225 text

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

Slide 226

Slide 226 text

#1 of 6 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 227

Slide 227 text

#2 of 6 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 228

Slide 228 text

#3 of 6 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 229

Slide 229 text

#4 of 6 GET RID OF THE NOISE IN YOUR METRICS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS

Slide 230

Slide 230 text

#4 of 6 GET RID OF THE NOISE IN YOUR METRICS. ↝ DON’T TRUST CLIENT TIMESTAMPS, ONLY DELTAS. ↝ CHECK FOR A REASONABLE RATE OF DATA INPUT PER CLIENT. ↝ SEGREGATE KNOWN TRAFFIC (WELL- BEHAVED BOTS). SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS

Slide 231

Slide 231 text

COMPILERS + PERFORMANCE

Slide 232

Slide 232 text

#5 of 6 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS UNDERSTANDING THESE INTERNALS AND THEIR RATIONALES HELPS US IMPLEMENT OUR OWN ABSTRACTIONS E.G. THE JSCODESHIFT-BASED UPGRADE TOOL.

Slide 233

Slide 233 text

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

Slide 234

Slide 234 text

THAT’S ALL, FOLKS! THANKS! 👋 🇩🇪 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ↑ ALL THE LINKS!