The Cost of JavaScript in 2019

Talk by Addy Osmani

Exact timestamp here

Some stats about the size of JavaScript and Time To Interactive.

  • Every 100kb of compress Jswe send to our users can lead to 3 - 4 increase in time to interactive on 3G mobile connections.

Cost of 100kb of Javascript

  • Phone users experience slow first input delay on 7X more websites.

Speed on Mobile

What's in a phone?

  • Screen
  • CPU
  • Memory
  • Battery
  • Radio

But keep in mind.

Performance on the web is majorly impacted by the cost of

  • Downloading JavaScript

Small JS Bundles

  • Executing downloaded JavaScript

Executing-js

They map directly to

  • The Network
  • Compute

Research from Chrome labs

Effective connection type across different regions

  • Research from the Chrome team shows the difference in connection types across different locations
  • Effective connection type for Twitter

Twitter Effective Connection Type

  • Effective connection type for Jumia

Jumia Effective Connection Type

4G availability vs Speed

4G availability vs speed

  • The biggest bottleneck in web performance is CPU

CPU bottleneck

Mobile devices have less CPU power and smaller battery power.

Mobile is a spectrum

Variety of devices with different specs

Mobile spectrum

  • Popular phones in Nigeria

Popular Phones in Nigeria

  • There's a huge difference between low-end and high-end devices

Nokia 6 vs iPhone

Techno CS Air vs iPhone

Everyone should have a great experience regardless of their devices.

Web performance on browsers

Js Expensive

  • The median webpage currently sends 360kbs (1mb uncompressed) of JavaScript which makes the average site interactive in 9s.

median webpage

Metrics

Metrics

  • Interactivity impacts Rage clicks

Interactivity impacts

A rage click is when a user clicks a page repeatedly, but it doesn't respond

  • Rehydration is a compromise between server-side and client-side rendered JavaScript.

Rehydration

  • JavaScript blocks the main thread, freezing the page

Block The Main Thread

  • Long tasks can block the main thread.
  • It's great to get interactive in 5secs
  • To be fast at JavaScript is to be fast at downloading, parsing, compiling and executing JavaScript.
  • Reddit's JavaScript's story

Reddit Javascript

  • V8 starts streaming once its seen at least 30kb of JS, the rest are done in a worker thread.

v8 performance

  • Improvements and additional worker threads in chrome 71+

V8 performance 2

  • JavaScript processing times for Reddit.com

JS processing Time Reddit

  • JavaScript processing times for Facebook.com

Cost of JavaScript FB

  • Main thread vs. background thread time spent parsing + compiling JS reddit.com (macbook pro)

Main thread background thread Reddit

  • Main thread vs. background thread time spent parsing + compiling JS facebook.com (macbook pro)

Main thread background thread FB

A JavaScript Diet

JavaScript Diet

JS parsing updates

  • In the time it took Chrome 61 to parse FB's Js, Chrome 75 can now parse both FB's Js and 6 times Twitter's Js.

JS Parsing Time

Minimize your JavaScript

  • Code splitting

Code splitting

  • Lazy loading in React
  • Progressive Rehydration

Code Splitting result

Auditing JavaScript Regularly

  • Webpack bundle analyzer
  • Source map explorer
  • Import cost from VS Code
  • ES6 has this feature disallow large imports, giving a warning when importing specified modules.

disallow large imports

Also

  • Serve modern code to modern browsers [modern javascript]
  • Less JavScript

Static Javascript

Maintain Performance goals

  • Performance Budgets

Performance Budgets

  • Light Wallet

Light wallet

  • Improving performance is a journey

Journey

The End