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 costs.This 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

Target Audience: Intermediate web developers

Originally presented at Web Unleashed

#javascript #webdevelopers #programming #webperformance

Anja Petry

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

The Cost Of JavaScript - 2023

While it’s not an article, it’s nice to get something like a video or podcast but it would be nice to have a tag so people know when clicking.

I agree, videos and podcasts, well, any link, should have a snippet of text indicating what it actually is, as some people just want to read.

Hi, I’ve just opened this feature request on thumbnail captions:
<a href="https://github.com/dailydotdev/daily/discussions/927" target="_blank" rel="noopener nofollow">https://github.com/dailydotdev/daily/discussions/927</a>.
Feel free to push the discussion :)
Personally, I love the diversity of content here on daily.dev and am all for clearly indicating the type of content beforehand.

I thoroughly enjoyed the video and found the insights to be quite illuminating. Its fair share of challenges, the development community has made significant strides in finding viable solutions. Additionally, the introduction of TypeScript has emerged as a formidable tool, bolstering the JavaScript ecosystem by enhancing type safety and providing a more structured approach to development.