The Hitchhiker's Guide to the Front-End Performance, 2018 edition

The Hitchhiker's Guide to the Front-End Performance The Hitchhiker's Guide
to the Front-End Performance 2018 EDITION

Who the hell am I? Who the hell am I?

˜ @ythecombinator on the webs ˜ Engineering Leader, Front-End @beakyn
˜ previously @Apple Developer Academy and unemployed indie developer software consultant ˜ addicted to emojis, memes and beer ˜ this ( ) means #after

˜ And I’m from… ˜

http://time.com/3490758/ hitchhikers-guide-galaxy/

˜ Sounds good.

https://speakerdeck.com/ ythecombinator/the-hitchhiker-s-guide-to-the-front-end-performance

What do we know about perf? What do we know
about perf?

 “Feijão com Arroz” seal ˜ GZIP everything ˜ Minify
both CSS and JS ˜ HTML must be compressed ˜ CSS goes on <head> ˜ JS goes lastly on </body> ˜ Optimize all the images (e.g. svgo)

Issues I was facing Issues I was facing

˜ What I do at …

˜ Perf ˜

˜ JavaScript ˜

"Write modern, idiomatic JavaScript, and let the JavaScript engine worry
about making it fast." - Mathias Bynens, BrazilJS 2018

˜ JavaScript ˜

Before version 5.9 of V8 came out, the engine used
two compilers: ˜ Full Codegen A simple and very fast compiler that produced simple and relatively slow machine code ˜ Crankshaft A more complex (Just-In-Time) optimizing compiler that produced highly-optimized code

Optimization Killers

Optimization Killers ~ Generators and async functions ~ for-of and
destructuring ~ try-catch and try-finally ~ Compound let or const assignment ~ Object literals that contain __proto__, or get or set declarations. ~ debugger or with statements ~ Literal calls to eval() ~ …

Performance cliffs in Crankshaft (function good() {  const start =
Date.now();  for (var i = 0; i < 1e8; i++) {}  console.log(Date.now() - start);  })(); ˜80ms (function bad() {  const start = Date.now();  for (var i = 0; i < 1e8; i++) {}  console.log(Date.now() - start);  const whatever = 1;  })(); ˜230ms

Performance cliffs in Crankshaft (function good() {  const start =
Date.now();  for (var i = 0; i < 1e8; i++) {}  console.log(Date.now() - start);  })(); (function bad() {  const start = Date.now();  for (var i = 0; i < 1e8; i++) {}  console.log(Date.now() - start);  const whatever = 1;  })(); ˜3x slowdown with Crankshaft

The new execution pipeline is built on top of Ignition,
V8’s interpreter, and TurboFan, V8’s newest optimizing compiler.

Optimization Killers ~ Generators and async functions ~ for-of and
destructuring ~ try-catch and try-finally ~ Compound let or const assignment ~ Object literals that contain __proto__, or get or set declarations. ~ debugger or with statements ~ Literal calls to eval() ~ …

60% faster web developer tools http://v8project.blogspot.com/2017/11/web-tooling-benchmark.html

https://twitter.com/popeindustries/status/895575424406867968

"Write modern, idiomatic JavaScript, and let the JavaScript engine worry
about making it fast." - Mathias Bynens, BrazilJS 2018

˜ #1 ˜ Arrays

˜ What can %& do… ˜ Avoid pre-allocating large arrays
˜ Don’t delete elements in arrays ˜ What it does… Sparse arrays which don’t have every element inside them are a hash table. Elements in such arrays are more expensive to access.

˜ #2 ˜ Properties

˜ What can %& do… ˜ Always instantiate your object
properties in the same order ˜ Assign all of an object’s properties in its constructor

function Point(x, y) { this.x = x; this.y = y;
} var p1 = new Point(1, 2);

} var p1 = new Point(1, 2); Point C0

} var p1 = new Point(1, 2); Point C1 For x, see offset 0 C0 If x is added, transition to C1

Point C2 function Point(x, y) { this.x = x; this.y
= y; } var p1 = new Point(1, 2); C1 For x, see offset 0 If y is added, transition to C2 For x, see offset 0 For y, see offset 1 C0 If x is added, transition to C1

} var p1 = new Point(1, 2); p1.a = 5; p1.b = 6; var p2 = new Point(3, 4); p2.b = 7; p2.a = 8;

˜ Always instantiate your object properties in the same order
˜ Assign all of an object’s properties in its constructor

˜ fixing perf issues be like ˜

˜ Problems ˜

˜ #1 ˜ Critical Resources Late Delivered

˜ Connecting to critical origins (preconnect) ˜ Asset for current
page (preload) ˜ Asset for future navigation (prefetch)

˜ What it does… Preconnect allows the browser to setup
early connections before an HTTP request is actually sent to the server. This includes: ˜ DNS lookups ˜ TLS negotiations ˜ TCP handshakes This in turn: ✔ Eliminates roundtrip latency ✔ Saves time for users

˜ Bring me the ! 100MS 200MS 300MS 400MS 500MS
600MS 700MS HTML CSS FONT 1 FONT 2 Fonts start loading Fonts rendered

˜ Bring me the ! 100MS 200MS 300MS 400MS 500MS
600MS 700MS HTML CSS FONT 1 FONT 2 Fonts start loading Fonts rendered FONT 1 FONT 2

˜ Can I use?

˜ What it does… Some of the benefits of the
preload directive include: ✔ Gives the browser the ability to determine the resource type (it can tell if the same resource can be reused in the future) ✔ The browser can determine if the request is compliant with the content security policy ✔ The browser can send the appropriate accept headers based on resource type

˜ Can I use?

˜ What it does… ✔ Fetch resources in the background
(idle time) ✔ Store them in the browser’s cache It can be:

Link Prefetching DNS Prefetching Prerendering

Link Prefetching DNS Prefetching Prerendering ˜ What it does… Allows
the browser to fetch resources, store them in cache, assuming that the user will request them. <link rel="prefetch" href="/uploads/images/pic.png"> ˜ What can %& do…

the browser to perform DNS lookups on a page in the background while the user is browsing. <link rel=“dns-prefetch” href="#$fonts.googleapis.com"> ˜ What can %& do…

the browser to render the entire page in the background, all the assets of a document. <link rel=“prerender” href=“https://xandaviao.com.br/”> ˜ What can %& do…

the browser to render the entire page in the background, all the assets of a document. <link rel=“prerender” href=“https://xandaviao.com.br/”> ˜ What can %& do… ⚠ ❌ ❌ ⚠

the browser to render the entire page in the background, all the assets of a document. <link rel=“prerender” href=“https://xandaviao.com.br/”> ˜ What can %& do… ✘ You want to be more careful with prerendering as it is resource heavy and can cause bandwidth waste, especially on mobile devices

˜ Can I use?

https://wicg.github.io/priority-hints/

%%%& A script is to be loaded with critical importance
as it is necessary for the core user experience ''( <script src=foo importance=critical> %%%& An image is to be loaded with high importance. It could be important but not critical to the overall experience loading up. ''( <img src=foo importance=high> %%%& It can be used to indicate low importance/non-blocking style which isn't impacting the core experience. ''( <link rel=stylesheet href=foo importance=low>

#$ First import(/* webpackPrefetch: 3 */ "assets/images/foo.jpg"); #$ Second import(/*
webpackPrefetch: 2 */ "modules/foo"); #$ Last import(/* webpackPrefetch: 1 */ “modules/bar");

Preloaded Chunk Prefetched Chunk X

Preloaded Chunk Prefetched Chunk X ˜ Starts loading in parallel
to the parent chunk ˜ Focuses on current navigation ˜ Fetches resources with high-priority ˜ Is instantly downloaded ˜ Starts after the parent chunk finish ˜ Focuses on fetching resources for the next navigation ˜ Fetches resources with low priority ˜ Is downloaded in browser idle time

˜ #2 ˜ Blocked First Paint

˜ Avoid invisible text while web fonts are loading ˜
Reduce render blocking scripts and stylesheets ˜ Server-side render stuff

˜ What says… ˜ What can %& do… @font-face {
font-family: "Open Sans Regular"; src: url(“./OpenSans-Regular-BasicLatin.woff2") format("woff2"); font-display: swap; }

˜ What says… ˜ What can %& do… @font-face {
font-family: "Open Sans Regular"; src: url(“./OpenSans-Regular-BasicLatin.woff2") format("woff2"); font-display: swap; } ˜ What it does… The initial font displayed is the first system font in the stack. When the custom font has loaded, it will kick in and replace the system font that was initially displayed.

˜ What says… ˜ What can %& do… https://github.com/addyosmani/critical

https://rauchg.com/2014/7-principles-of-rich-web-applications

https://nextjs.org

˜ #3 ˜ Bloated Pages

˜ Audit your assets regularly ˜ Code Split (Routes, Components,
Vendor bundles) + Dynamic Import stuff ˜ Remove unused library code + Tree Shake

Bundlephobia Import Cost for VSCode Webpack Bundle Analyzer

1.8s bootup 0.78s bootup ˜ What says… ˜ What can
%& do…

1.8s bootup 0.78s bootup ˜ What says… ˜ What can
%& do… 56% faster

https://github.com/GoogleChromeLabs/webpack-libs-optimizations

Webpack is still spanked by tree shaking (and from 4
on) If using TS, target ES6

˜ #4 ˜ Unnecessary Resources

˜ Automate minification (UglifyJS, Cloudfare, mod_pagespeed) ˜ Compress (gzip, brotli)

https://www.modpagespeed.com/

✔ Static sites ✔ In control of your Apache or
Nginx servers ✔ No budget for this ✘ Dynamic content / Rapidly changing websites

Among the 40+ optimisation filters available in mod_pagespeed are: ✔
optimization, compression and resizing of images; ✔ concatenation, minification, and inlining of your CSS and JavaScript; ✔ cache extension, domain sharding, and domain rewriting; ✔ deferred loading of JavaScript and image resources

˜ -30%

⚠ ❌ ❌ ⚠

˜ #5 ˜ Unused Code

˜ Code coverage in DevTools (Page load, runtime) ˜ Lighthouse
Coverage Audit ˜ Remove unused code to improve load time ˜ Write regression tests

95% unused

https://github.com/purifycss/purifycss

(+ jest-image-snapshot)

˜ #6 ˜ Unoptimized Images

˜ Optimize images ˜ Use lighter formats ˜ Use responsive
images ˜ Lazy-load offscreen images

˜ What says…

˜ GUI ˜ ImageOptmin (Mac) XNConvert (Cross-platform) ˜ Build ˜
imagemin libvips ˜ CDN ˜ Cloudinary Imgix Fastly Akamai ˜ CDN ˜ (self-hosted) Thumbor ImageFlow ˜ What can %& do…

˜ GUI ˜ ImageOptmin (Mac) XNConvert (Cross-platform) ˜ Build ˜
imagemin libvips ˜ CDN ˜ Cloudinary Imgix Fastly Akamai ˜ CDN ˜ (self-hosted) Thumbor ImageFlow

˜ What it does…

<img src="banda_magnificos.gif"> 7.3mb <video autoplay muted playinline> <source src="banda_magnificos.mp4" type="video/mp4">
</video> 1.3MB <video autoplay muted playinline> <source src=“banda_magnificos.webm” type=“video/webm"> </video> 960kb 80%+ savings

https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType

4G+ (Video) ˜1mb 2G-3G (Static Image) ˜30kb

https://github.com/aFarkas/lazysizes

˜ #7 ˜ Wasted Renders

˜ Use referentially equal stuff ˜ Use PureComponent/memo (when it
makes sense) ˜ Take benefit from techniques like windowing

"In God we trust; all others must bring data." -
W. Edwards Deming

Things I’d fucking love to experiment with Things I’d fucking
love to experiment with

˜ #1 ˜

https://github.com/developit/stockroom

˜ #2 ˜

˜ Progressive Web Apps (PWAs) ˜ Devops/Something-as-a-Service ˜ Blockchain ˜
Machine Learning/Deep Learning/ Neural Networks (& other Artificial Intelligence slangs I’ve got no idea of)

#$ Require GuessPlugin const {GuessPlugin} = require('guess-webpack'); #$ Add it
in the end of your webpack #$ plugin configuration GuessPlugin({ GA: 'GA_VIEW_ID' })

˜ GA Module fetches structured data from Google Analytics ˜
Guess Parser parses an application in order to create the mapping between routes and JavaScript bundles ˜ Guess Webpack Plugin automates the process of applying data-driven bundling & pre-fetching in React & Angular apps

Its goal is to replace the manual decision making with
an automated data-driven approach. Focusing on: ˜ Single-page applications ˜ Static content sites ˜ Framework-based static sites

https://github.com/addyosmani/predictive-fetching

https://bit.ly/2u2fUzW

https://www.youtube.com/watch?v=L5tPWCB7jX0

Thanks Thanks

The Hitchhiker's Guide to the Front-End Perform...

The Hitchhiker's Guide to the Front-End Performance, 2018 edition

More Decks by Matheus Albuquerque

Other Decks in Programming

Featured

Transcript