When JavaScript Bytes

A presentation at #PerfMatters in March 2020 in by Tim Kadlec

Slide 1

WHEN JAVASCRIPT BYTES Tim Kadlec @tkadlec #perfmatters

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

4kb RAM 74kb ROM

Slide 11

.1%

Slide 12

Slide 13

Slide 14

<1.7mb

Slide 15

<1.7mb 2.0mb

Slide 16

B M 2 . 4

Slide 17

Slide 18

Network

Slide 19

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

Slide 20

@KenjiBaheux

Slide 21

@KenjiBaheux

Slide 22

Slide 23

On Device

Slide 24

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

Slide 25

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

Slide 26

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

Slide 27

Slide 28

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

Slide 29

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

Slide 30

Slide 31

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’]});

Slide 32

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

Slide 33

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

Slide 34

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

Slide 35

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

Slide 36

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

Slide 37

Slide 38

Slide 39

Slide 40

HOW MUCH IS TOO MUCH?

Slide 41

32 MONTHS

Slide 42

$214

Slide 43

85%

Slide 44

ANDROID > 1 YEAR OLD < $200

Slide 45

Slide 46

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

Slide 47

130-170KB CRITICAL PATH RESOURCES @slightlylate

Slide 48

~100KB

Slide 49

HTML

Slide 50

HTML a.js

Slide 51

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

Slide 52

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

Slide 53

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

Slide 54

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

Slide 55

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

Slide 56

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

Slide 57

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

Slide 58

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

Slide 59

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

Slide 60

50-100KB PER BUNDLE

Slide 61

50-100KB ~100KB PER BUNDLE TOTAL

Slide 62

Slide 63

487kb (2.6MB)

Slide 64

Slide 65

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

Slide 66

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

Slide 67

Slide 68

<1.65MB

Slide 69

Slide 70

Slide 71

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

Slide 72

Slide 73

<15KB

Slide 74

Slide 75

Slide 76

Slide 77

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

Slide 78

Slide 79

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

Slide 80

<59.5KB

Slide 81

2.6MB 898.3KB 66% reduction

Slide 82

MAINTAIN & ITERATE

Slide 83

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

Slide 84

Slide 85

Slide 86

Slide 87

Slide 88

Slide 89

Slide 90

Slide 91

Slide 92

Slide 93

INTRODUCING HEALTHY FRICTION

Slide 94

Slide 95

DEFAULT STANCE MATTERS

Slide 96

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

Slide 97

BECAUSE WE CAN

Slide 98

Slide 99

THANK YOU! Tim Kadlec @tkadlec #perfmatters