Front-End Performance Still Matters

6e0ba5b45dafe063b98db2a1d5391433?s=47 Sia
February 24, 2018

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.).

6e0ba5b45dafe063b98db2a1d5391433?s=128

Sia

February 24, 2018
Tweet

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.

  13. None
  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!