The Cost Of JavaScript

As we build 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. In this talk, Addy explains how and why JavaScript is the most expensive resource your site uses today—especially on mobile and lower-end desktops. Web developers should focus on optimizing JavaScript bundles by keeping them small to improve download speeds, especially on mobile devices. Small JavaScript bundles improve network transfer speeds, lower memory usage, and reduce CPU can be achieved by splitting bundles larger than 50-100 kB. Additionally, it’s crucial to enhance execution time by avoiding tasks that overly engage the main thread and by not using large inline scripts over 1 kB. Avoid creating Long Tasks that can keep the main UI thread busy and can push out how soon pages are interactive by users. These steps are vital as parse and compile costs have become faster than before. He 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. A few things that will be covered: - 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 PUBLICATION PERMISSIONS: Original video was published with the Creative Commons Attribution license (reuse allowed). Link: