The Cost Of JavaScript in 2021

Overview

In 2021, the dominant costs of JavaScript are download and CPU execution time.

Small bundles = quicker downloads

This is often achieved with fine-grained code-splitting. Inefficient chunking of JavaScript bundles can slow down how soon a page can respond to user input.

Post-download, execution is the dominant cost.

Keep JavaScript execution times minimal.

Progressive loading of code spreads work out and improves interaction readiness.

Long-tasks monopolize the main thread.

They're a sign of JavaScript bloat (loading and executing more than a user may need right now).

Shift more app logic server-side

or generate more content statically during build time. Server-side rendered apps may look like they're getting pixels painted on the screen quickly, but beware of user interactions being blocked by large script executions (e.g. re-hydration to wire up event listeners).

Stop taking fast hardware for granted.

Stop taking fast networks, fast CPU and high RAM for granted.

Prioritize loading what offers the greatest value to users first.

In some cases, third-party scripts can pre-empt first-party ones in terms of priority and bandwidth on the main thread, also delaying how soon a page is interaction-ready.

If JavaScript doesn't bring users joy, thank it and throw it away.