🇩🇪 iJS Munich 2023 - Speed at Scale: Optimizing The Largest CX Platform Out There

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

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

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

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

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

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

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

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

/ PREAMBLE

— MEDALLIA SURVEYS • BY MARIZ MELO

YOU ALREADY KNOW… ↝ GZIP EVERYTHING ↝ MINIFY BOTH CSS
AND JS ↝ CSS GOES ON <HEAD> ↝ JS GOES LASTLY ON </BODY> ↝ OPTIMIZE ALL THE IMAGES

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)

YOU ALREADY KNOW…

FIXING WEB PERFORMANCE

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

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

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

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

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

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

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

Shipping Less Code SPEED AT SCALE: OPTIMIZING THE LARGEST CX

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

/ SHIPPING LESS CODE / REACT

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)

REACT 15 㱺 16

WEBPACK 1 㱺 5 SPEED AT SCALE: OPTIMIZING THE LARGEST

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

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

— WEBPACK 5 MIGRATION • JITENDRA PATHAK WEBPACK 1 㱺 5

WEBPACK 1 㱺 5

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

#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

#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

#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

NODE 10 㱺 16 SPEED AT SCALE: OPTIMIZING THE LARGEST

NODE 10 㱺 16

/ SHIPPING LESS CODE / NODE

NODE 10 㱺 16

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

REACT 15 㱺 16 SPEED AT SCALE: OPTIMIZING THE LARGEST

REACT 15 㱺 16

❌ REACT 15 㱺 16

REACT 15 㱺 16

❌ REACT 15 㱺 16

REACT 15 㱺 16

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

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

REACT 15 㱺 16

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

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

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

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

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.

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)

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)

CODE GENERATION: AFTER

CODE GENERATION: TRANSFORMERS SPEED AT SCALE: OPTIMIZING THE LARGEST CX

/ SHIPPING LESS CODE / CODE GENERATION: TRANSFORMERS

CODE GENERATION: AST

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

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

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

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

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

/ SHIPPING LESS CODE / CODE GENERATION: TRANSFORMERS

CODE GENERATION: FILES SPEED AT SCALE: OPTIMIZING THE LARGEST CX

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

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

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

CODE GENERATION: RENAMING SPEED AT SCALE: OPTIMIZING THE LARGEST CX

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

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

CODE GENERATION: GIT IGNORE SPEED AT SCALE: OPTIMIZING THE LARGEST

CODE GENERATION: GIT IGNORE

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

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

WEBDRIVER 4 㱺 7 SPEED AT SCALE: OPTIMIZING THE LARGEST

WEBDRIVER 4 㱺 7

/ SHIPPING LESS CODE /

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

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

WEBDRIVER 4 㱺 7

WEBDRIVER 4 㱺 7 🤔 🤔 🤔

WEBDRIVER 4 㱺 7

Targeting Different Browsers SPEED AT SCALE: OPTIMIZING THE LARGEST CX

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

BROWSER MIX BROWSER TOTAL — APP DYNAMICS REPORT

POLYFILLING: CONCERNS

↝ 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

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

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

polyfill.io

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)

polyfill.io <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="/bundle.min.js"></script>

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

polyfill.io

PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES BABEL PRESET

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

↝ 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

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.

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

PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES DIFFERENTIAL SERVING

/ TARGETING DIFFERENT BROWSERS / STRATEGIES

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

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

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

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

CREATING TWO BUNDLES…

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

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

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

SERVING TWO BUNDLES…

/ TARGETING DIFFERENT BROWSERS / STRATEGIES

#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

#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

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

#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

#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

#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

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.

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

/ TARGETING DIFFERENT BROWSERS / FEATURE DETECTION

FEATURE DETECTION: NETWORK STATUS

<Suspense fallback={<div>Loading . . . </div>}> <With unsupported> <NetworkStatus networkInfo="unsupported"
/> <Video /> </With> <With effectiveConnectionType="2g"> <NetworkStatus networkInfo="2g" /> <Preview /> </With> </Suspense> FEATURE DETECTION: NETWORK STATUS

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

NETWORK STATUS: NOT SUPPORTED

NETWORK STATUS: 4G

NETWORK STATUS: 3G

NETWORK STATUS: CODE SPLITTING

/ TARGETING DIFFERENT BROWSERS / FEATURE DETECTION

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

PULL REQUESTS

UNIT TESTS

↝ 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

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

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

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

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

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

CORE WEB VITALS: BEFORE

CORE WEB VITALS: AFTER

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

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

VISUAL PROGRESS FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST

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

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

CULTURE + TOOLING

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

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

DYNAMIC IMPORTS WITH REACT LAZY

CODE SPLITTING: RESULTS

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

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

/ ONGOING EFFORTS / PREACT IN PRODUCTION

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

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

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

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

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

WINDOWING: OPTIONS

WINDOWING: RESULTS

RESOURCE HINTS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM

↝ 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

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">

↝ 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

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

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

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

PRIORITY HINTS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM

↝ 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

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>

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

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

↝ 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

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

DATA TRANSFER: COMPRESSION

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

/ FUTURE WORK / PREDICTIVE PREFETCHING

PREDICTIVE PREFETCHING

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

OFFLOADING THIRD-PARTY SCRIPTS

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

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

BROWSER MIX

BANDWIDTH MIX — GSM ASSOCIATION, 2022

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

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

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

#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

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

BUSINESS OUTCOMES — AKAMAI AND CHROME RESEARCH, 2017

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

#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

#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

#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

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

#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

COMPILERS + PERFORMANCE

PLATFORM OUT THERE / CLOSING THOUGHTS UNDERSTANDING THESE INTERNALS AND THEIR RATIONALES HELPS US IMPLEMENT OUR OWN ABSTRACTIONS E.G. THE JSCODESHIFT-BASED UPGRADE TOOL.

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

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

🇩🇪 iJS Munich 2023 - Speed at Scale: Optimizing...

🇩🇪 iJS Munich 2023 - Speed at Scale: Optimizing The Largest CX Platform Out There

More Decks by Matheus Albuquerque

Other Decks in Programming

Featured

Transcript