@thegreengreek FRONT-END Sia Karamalegos @thegreengreek PERFORMANCE STILL MATTERS 

WHO AM I? Sia Karamalegos Developer, Clio + Calliope Twitter and Medium: @thegreengreek Github: siakaramalegos New Orleans Owns crazy dogs 

Perception vs reality Why should I care? Analytics & dev tools Biggest bytes Most expensive asset WHAT ARE WE TALKING ABOUT? 

WHY DO ELEVATORS HAVE MIRRORS? 

WHY SHOULD I CARE? 

??? ??? ??? WHAT FRUSTRATES YOU THE MOST AS A USER? 

53% of mobile site visits are abandoned if pages take longer than 3 seconds to load. - DoubleClick by Google, 2016 https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/ 

TIME TO INTERACTIVE Interactivity Matters https://www.youtube.com/watch?v=0A-2BhEZiM4 

JANK AND RESPONSIVENESS 

ANALYTICS & DEV TOOLS 

THE PARETO PRINCIPLE Roughly 80% of the effects come from 20% of the causes. 

BE LAZY. DON’T OPTIMIZE WHAT YOU DON’T NEED TO. 

No content

Learn browser dev tools already! Learn your framework's dev tools too. Analyze your Webpack bundles. Simulate average network speed and devices with https://www.webpagetest.org/easy LAZINESS TOOLS FOR SUCCESS https://survivejs.com/webpack/optimizing/build-analysis/ 

BIGGEST BYTES 

_______ account for 60% of the bytes on average needed to load a webpage. - Google 

Images account for 60% of the bytes on average needed to load a webpage. - Google https://developers.google.com/web/fundamentals/design-and-ux/responsive/images 

Use the right image type (png vs jpeg) Use the right size and src sets Use loaders to auto-build src sets Compress your images with ImageOptim Set your build tool to optimize for you IMAGE TOOLS FOR SUCCESS https://www.udacity.com/course/responsive-images--ud882 https://survivejs.com/webpack/loading/images/#optimizing-images 

MOST EXPENSIVE ASSET 

ARE ALL ASSETS EQUAL? 

https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e 

THE PERFORMANCE TIMELINE 

Optimize for the device and network conditions your users have. 2-5x difference in fastest vs slowest phones 75% of worldwide mobile connections on 2G or 3G ABSOLUTE TIME: USERS VS DEVELOPERS https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/ 

~$200 Android device on a slow 3G network No more than 5s rst-load time to interactive No more than 2s for subsequent loads Budget of ~130-170KB (gzipped) of critical-path resources (more JS requires smaller bundle) This con guration is available on webpagetest.org/easy PERFORMANCE BUDGETS AT GOOGLE https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/ 

Version Size (mini ed) Size (mini ed + gzipped) Parse/eval time (avg) ES2015+ 80K 21K 172ms ES5 175K 43K 367ms THE COST OF UNNECESSARY TRANSPILING https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ 

SERVER-SIDE VS PROGRESSIVE RENDERING https://twitter.com/aerotwist/status/729712502943174657 

Optimizing Time to Interactive Analyze your bundles! Don't over-optimize! Only ship what's immediately needed - use code splitting, lazy load, and provide ES2015+ bundles for modern browsers Minify - speeds up both download and parse/compile Compress with gzip and brotli Remove unused code - tree shaking and using module imports effectively JAVASCRIPT TOOLS FOR SUCCESS 

import _ from 'lodash'; _.isEmpty({}); import isEmpty from 'lodash/isEmpty'; isEmpty({}) import moment from 'moment'; import addMinutes from 'date-fns/addMinutes'; MODULE IMPORTS 

Eliminate Download and Compilation For subsequent loads, set up caching, and Use service workers and of ine- rst strategies. Prefetch future execution paths while user on current page (Next.js). JAVASCRIPT TOOLS FOR SUCCESS https://developers.google.com/web/fundamentals/performance/optimizing-content-ef ciency/http-caching 

Most of your time is spent using the app, not waiting to load. - Devin Villegas, Net ix senior dev ops engineer, former New Orleanian 

Increase Responsiveness Don't block the main thread! Avoid memory leaks - garbage collection can pause execution Avoid long-running JS - chunk into smaller pieces with requestAnimationFrame() or requestIdleCallback() for scheduling Use up-to-date frameworks that prioritize user input (like React Fiber starting in React v16.0) JAVASCRIPT TOOLS FOR SUCCESS https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e 

TL;DR: SHIP LESS CODE less code = less load + less parse/compile/eval holy grail = load only code needed for what's in view 

HOUSTON'S BAGGAGE CLAIM COMPLAINTS http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html 

Are you better off making the site load faster or ensuring that users complete their tasks? - Christine Perfetti, The Truth About Download Time 2006 https://articles.uie.com/download_time/ 

Slides, resources, and more: bit.ly/siaspeaks @thegreengreek www.clioandcalliope.com THANKS!