Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Cost Of JavaScript in 2023

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

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

Addy Osmani

June 28, 2023

More Decks by Addy Osmani

Other Decks in Programming


  1. 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
  2. INP

  3. * 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%
  4. How and where do I want to render content? Check

    out Lydia Hallie’s great “Rendering Patterns” talk