WHEN JAVASCRIPT BYTES Tim Kadlec @tkadlec #perfmatters

4kb RAM 74kb ROM

.1%

<1.7mb

<1.7mb 2.0mb

B M 2 . 4

Network

Desktop Mobile 105.5kb 93.4kb p10 226.6kb 196.6kb p25 450.4kb 413.5kb p50 808.9kb 747.0kb p75 1,267.4kb 1,201.5kb p90 0 350 700 1050 Kilobytes of JavaScript 1400

@KenjiBaheux

@KenjiBaheux

On Device

Desktop Mobile 105.5kb 93.4kb p10 226.6kb 196.6kb p25 450.4kb 413.5kb p50 808.9kb 747.0kb p75 1,267.4kb 1,201.5kb p90 0 350 700 1050 Kilobytes of JavaScript 1400

Desktop Mobile 527.3kb 467.1kb 1,132.8kb 983.3kb p10 p25 2,252.2kb 2,067.7kb p50 4,043.9kb 3,734.6kb p75 6,336.5kb 6,007.7kb p90 0 1750 3500 5250 Kilobytes of JavaScript 7000

Desktop Mobile 146ms 356ms 352ms 960ms 831ms p10 p25 p50 2,372ms 1,740ms p75 5,367ms 3,237ms p90 10,484ms 0 3000 6000 9000 Mainthread Processing Time 12000

Desktop Mobile 146ms 356ms 352ms 960ms 831ms p10 p25 p50 2,372ms 1,740ms p75 5,367ms 3,237ms p90 10,484ms 0 3000 6000 9000 Mainthread Processing Time 12000

356ms 575ms 1,130ms 2,700ms p10 All Vue jQuery React 2,372ms 2,556ms 4,100ms p50 9,287ms 10,484ms 10,348ms 12,848ms p90 20,811ms 0 7500 15000 22500 Mainthread Processing Time 30000

let observer = new PerformanceObserver(function(list) { let perfEntries = list.getEntries(); for (let i = 0; i < perfEntries.length; i++) { //queue it up to be sent back for tracking } }); observer.observe({entryTypes:[‘longtask’]});

200ms 20ms 40ms 150ms 300ms 15ms 100ms

Number of Long Tasks 200ms 1 20ms 40ms 150ms 2 300ms 3 15ms 100ms 4

Longest Long Task 200ms 20ms 40ms 150ms 300ms 300ms 15ms 100ms

Long Tasks Time 200ms 20ms 40ms JS CPU Time 150ms 300ms 15ms 100ms 200+150+300+100 = 750

Total Blocking Time 200ms 20ms 40ms 150ms 300ms 15ms 100ms 150+100+250+50 = 550

HOW MUCH IS TOO MUCH?

32 MONTHS

$214

85%

ANDROID > 1 YEAR OLD < $200

ANDROID > 1 YEAR OLD < $200 SLOW 3G 400MS RTT 4000KBPS TRANSFER @slightlylate

130-170KB CRITICAL PATH RESOURCES @slightlylate

~100KB

HTML

HTML a.js

HTML Parse/Compile a.js a.js Execute a.js

HTML Parse/Compile a.js a.js Execute a.js

HTML Execute a.js a.js Parse/Compile a.js

HTML Execute a.js a.js (200kb) Parse/Compile a.js

HTML Execute a.js a.js (200kb) Parse/Compile a.js

HTML Execute a.js a.js (200kb) Parse/Compile a.js B K 0 3

HTML Execute a.js a.js (200kb) Parse

HTML Execute a.js a.js (200kb) Parse

HTML Execute a.js a.js Parse b.js Parse Execute b.js

50-100KB PER BUNDLE

50-100KB ~100KB PER BUNDLE TOTAL

487kb (2.6MB)

import { config, CognitoIdentityServiceProvider } from ‘aws-sdk’;

const CognitoIdentityServiceProvider = require(‘aws-sdk/clients/ cognitoidentityserviceprovider’);

<1.65MB

external: [‘apollo-client’, ‘apollo-link’, ‘graphql-tag’],

<15KB

resolve: { alias: { “core-js”: path.resolve(__dirname, ‘node_modules/core-js’) }, },

externals : [ { “vue-swiper-js”: “vue-swiper-js”, “vuelidate”: “vuelidate”, “vuelidate/lib/validators”: “vuelidate/lib/validators”, } ],

<59.5KB

2.6MB 898.3KB 66% reduction

MAINTAIN & ITERATE

Warned or blocked on install Warned or blocked in code editor Blocked on PR Blocked on deploy Tracked on deploy

INTRODUCING HEALTHY FRICTION

DEFAULT STANCE MATTERS

WE’VE BUILT A WEB THAT LARGELY DISMISSES AFFORDABLE, TYPICAL SMARTPHONES AND THE PEOPLE THAT USE THEM.

BECAUSE WE CAN

THANK YOU! Tim Kadlec @tkadlec #perfmatters