When

Teammates

Don't Care

About Performance

Chris Sevilleja

scotch.io

@chrisoncode

sevi-jello

Ado Kukic

auth0

@kukicado

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

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

Network

Performance is

Benchmarking

Optimizing

Budgeting

Monitoring

There was a game?

Finally some nerd talk

w

o

w

Ultimate Rendering Target

60fps

If it's fast on slow,

it's fast on fast.

He was really mean yesterday

My turn!

Check Out My App!

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

Analyzing Bundles

What goes into the box?

Lazy Loading

Only load things when they are needed

P ush

R ender

P re-cache

L azy-load

HTTP2 Server Push

Send multiple files fast

App Shell

Progressive Unlocking

Code Coverage

Am I using everything?

Service Worker

ng add @angular/pwa

Setting Budgets

future

Renderer

Tree shooketh

Ultimate Rendering Target

60fps

Ultimate Loading Goal

5s TTI

Ultimate Bundle Size Goal

~170kb

performance is

an investment

team

Angular Performance

By Chris Sevilleja

Angular Performance

  • 242
Loading comments...

More from Chris Sevilleja