A presentation at #PerfMatters by Tim Kadlec
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
JavaScript is, byte-for-byte, the most expensive resource on the web and we’re using more of it than ever in our sites. You can optimize the delivery, the parsing and the execution until you’re blue in the face but you’ll never make it as performant as simply not using it in the first place.
But what do you do if you’re already staring down a pile of scripts?
In this talk, we’ll discuss practical ways to reduce the amount of JavaScript we’re sending down to the people using our sites. We’ll look at techniques for shaving excess bytes off our bundles and, just as critically, tools and approaches we can use to make sure those bytes stay off.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.