Front-End Performance Still Matters

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What things should we always do versus only do when performance is slow? What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to image optimization and store architecture, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk uses Webpack and ES6 but is library-agnostic (React, Angular, Vue, etc.).

Transcript

1. @thegreengreek FRONT-END Sia Karamalegos @thegreengreek PERFORMANCE STILL MATTERS
2. WHO AM I? Sia Karamalegos Developer, Clio + Calliope Twitter and Medium: @thegreengreek Github: siakaramalegos New Orleans Owns crazy dogs
3. Perception vs reality Why should I care? Analytics & dev tools Biggest bytes Most expensive asset WHAT ARE WE TALKING ABOUT?
4. WHY DO ELEVATORS HAVE MIRRORS?
5. WHY SHOULD I CARE?
6. ??? ??? ??? WHAT FRUSTRATES YOU THE MOST AS A USER?
7. 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/
8. TIME TO INTERACTIVE Interactivity Matters https://www.youtube.com/watch?v=0A-2BhEZiM4
9. JANK AND RESPONSIVENESS
10. ANALYTICS & DEV TOOLS
11. THE PARETO PRINCIPLE Roughly 80% of the effects come from 20% of the causes.
12. BE LAZY. DON’T OPTIMIZE WHAT YOU DON’T NEED TO.
14. 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/
15. BIGGEST BYTES
16. _______ account for 60% of the bytes on average needed to load a webpage. - Google
17. 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
18. 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
19. MOST EXPENSIVE ASSET
20. ARE ALL ASSETS EQUAL?
21. https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
22. THE PERFORMANCE TIMELINE
23. 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/
24. ~$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/
25. 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/
26. SERVER-SIDE VS PROGRESSIVE RENDERING https://twitter.com/aerotwist/status/729712502943174657
27. 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
28. import _ from 'lodash'; _.isEmpty({}); import isEmpty from 'lodash/isEmpty'; isEmpty({}) import moment from 'moment'; import addMinutes from 'date-fns/addMinutes'; MODULE IMPORTS
29. 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
30. Most of your time is spent using the app, not waiting to load. - Devin Villegas, Net ix senior dev ops engineer, former New Orleanian
31. 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
32. TL;DR: SHIP LESS CODE less code = less load + less parse/compile/eval holy grail = load only code needed for what's in view
33. HOUSTON'S BAGGAGE CLAIM COMPLAINTS http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html
34. 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/
35. Slides, resources, and more: bit.ly/siaspeaks @thegreengreek www.clioandcalliope.com THANKS!