The Cost Of JavaScript in 2023

As the world builds sites that are more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. Addy Osmani will explain how and why JavaScript is the most expensive resource your site uses today—especially on mobile and lower-end desktops.

Addy will also share tips for fixing JavaScript performance issues so everything loads quicker. A little discipline can help if you want your site to load and be interactive as soon as possible on mobile.

Video: https://www.youtube.com/watch?v=ZKH3DLT4BKw

Objective
Teach developers why JavaScript is the costliest part of their sites and what they can do to optimize this well.

Five Things Audience Members Will Learn:

What the dominant costs of heavy JavaScript are
How median hardware plus heavy JavaScript can impact user-experience
Tips and tricks for reducing the cost of JavaScript, reducing long-tasks and improving the Core Web Vitals metrics
Things frameworks and browsers are doing to try reducing the cost of JavaScript by default.
How new performance metrics can help you reason about where to optimize JavaScript to improve user interactions

First presented at FITC/Web Unleashed

Transcript

2. @reactive_dude JAVASCRIPT IS GOOD...IN MODERATION
6. Patterns for web applications Portfolio Content Storefront Social Network Immersive Holotype Personal Blog CNN Amazon Facebook Figma Interactivity Minimal Linked Articles Purchase Multi-Point, Real-time Everything Session Depth Shallow Shallow Shallow - Medium Extended Deep Values Simplicity Discover-ability Load Performance Dynamicism Immersiveness Routing Server Server, Hybrid Hybrid, Transitional Transitional, Client Client Rendering Static Static, SSR Static, SSR SSR CSR Hydration None Progressive, Partial Partial, Resumable Any None (CSR) Example Framework 11ty Astro, Elder Marko, Qwik, Hydrogen Next, Remix Create React App https://dev.to/this-is-learning/patterns-for-building-javascript-websites-in-2022-5a93
10. PROGRESSIVE HYDRATION
11. FACTOR IN VISIBILITY
22. @addyosmani
33. INP
37. https://web.dev/optimize-long-tasks/ A) B)
38. https://philipwalton.com/articles/why-web-developers-need-to-care-about-interactivity/ *
43. * Background compilation: 1-2% improvement to main thread V8 time time reduction. Background parsing and other improvements to parse reduced overall V8 load time by up to 10-20%
44. ~20-40% reduction in parse and compilation time during load.
62. @ChrisArter npm install WHAT’S IN YOUR JAVASCRIPT BUNDLE?
66. Static import
67. Static import
68. Code-splitting bundles
70. Dynamic Import
71. Dynamic Import
72. Code-splitting bundles
73. Route and component splitting
75. “Invisible” Visible
76. Import On Visibility
77. Import On Visibility
79. How and where do I want to render content? Check out Lydia Hallie’s great “Rendering Patterns” talk
81. Rehydration
82. Partial Hydration
83. Islands Architecture
85. Rehydration
86. Progressive Hydration
87. RESUMABLE HYDRATION Check out “Hydration is pure overhead” by Misko Hevery
89. https://twitter.com/shuding_
91. Streaming Server Rendering
92. Doodles courtesy Dan Abramov
93. Selective Hydration: before
94. Selective Hydration: after