Speed Up JavaScript

50%

Guaranteed

Chris Sevilleja

scotch.io | GDE

@chrisoncode

50%?!?

Guaranteed?!?

Prove It

Less JavaScript

Less Browser Work

Refactoring

JavaScript

Bloat

State of

Internets

2011

2018

103kb

Median Desktop

70kb

Median Mobile

402kb

Median Desktop

358kb

Median Mobile

390%

511%

JS Bundle Sizes

2011

2017

4Mbps

America

2Mbps

Global

18Mbps

America

7Mbps

Global

450%

350%

Statista

Internet Speeds

Pinterest

2.5MB -> 200kb

23s -> 5s

Revenue 👆👆 44%

Signups  👆👆 753%

Yahoo

0.4 seconds faster = 9% more traffic

Google

2% slower = 2% less searching per user

Amazon

1s slower === $1.6B lost

Performance is

hard

a feature

a ranking factor

money

Performance is

Measuring

Monitoring

Optimizing

Repeat

Benchmarking

Tools

% of Connections over 2G

45%

GSMA Mobile Economy

Gif from website where they don't know where they got it

southwest.com

on Moto G4

Gif by Nick Buturishvili

% of Mobile Users that Leave After 3s?

Text

53%

Under 0.3s

Filmstrip View

TTI

Start

First Paint

FMP

southwest.com

on iPhone 8

First Paint

First Meaningful Paint

Time to Interactive

iPhone 8

Moto G4

Android Go

Gif by Boing Boing

% of connections over 2G or 3G?

75%

2 Types of Performance

Render

Load

CPU

Slow Internet

Old Phones

Network

If it's fast on slow,

it's fast on fast.

Ultimate Rendering Target

60fps

Browser Time

  • JS Execution: 25%
  • JS Parsing + Compilation: 25%
  • Styling + Layout: 10%
  • Everything else: CSS/HTML Parsing + Paint

Ultimate Loading Goal

5s TTI

Let's Maths!

50 kb/s

3G Connection

5s

Goal TTI

1.5s

DNS/Connection Stuff

3.5s

Download/Parse/Compile/Execute

Ultimate Bundle Size Goal

~170kb

How do I  send less JavaScript?

P ush

R ender

P re-cache

L azy-load

Code Coverage

Am I using everything?

Analyzing Bundles

What goes into the box?

import cost

Lazy Loading

Only load things when they are needed

HTTP2 Server Push

Send multiple files fast

App Shell

Progressive Unlocking

Setting Budgets

Ultimate Rendering Target

60fps

Recap

  • Only load JS for the current page
  • Check JS bundle sizes
  • Use performance budgets
  • Less JS processing

Ultimate Loading Goal

5s TTI

Ultimate Bundle Size Goal

~170kb

performance is

an investment

JavaScript Performance

By Chris Sevilleja

JavaScript Performance

  • 256
Loading comments...

More from Chris Sevilleja