Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Loading Performance for Designers – WUDKRK 2017

523 Aufrufe

Veröffentlicht am

Why performance matters? What impacts load time? What can designers do to improve performance and cut data size?

Slides were presented at WUDKRK 2017. Kraków, Poland, Dec 2, 2017

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

Loading Performance for Designers – WUDKRK 2017

  1. 1. LOADING PERFORMANCE WUD Kraków 2017 – December 2 Łukasz Przywarty
  2. 2. I’m Clark Łukasz from InVision Infermedica
  3. 3. 3/52@LukaszPrzywarty • Exclusion • Travels • Disasters Why loading performance matters?
  4. 4. What impacts load time? 4/52@LukaszPrzywarty • Network conditions • Hardware • File size • Server requests • Scripts and frameworks • Browser • And more!
  5. 5. BAD NEWS1
  6. 6. “We don't always build with a
 global audience in mind. Tal Oppenheimer, Google 6/52@LukaszPrzywarty
  7. 7. of mobile connections are 2G 7/52Source: Chrome Dev Summit 2017 @LukaszPrzywarty 60%
  8. 8. Source: The Mobile Economy 2017 0% 25% 50% 75% 100% India Indonesia Sub Saharan
 Africa 2G 3G 4GSometimes it’s even worse
  9. 9. Why should
 I care? Source: Internet Live Stats Internetless users (2016) 0M 225M 450M 675M 900M India China Indonesia Pakistan Bangladesh Nigeria Ethiopia D R Congo
  10. 10. 10/52@LukaszPrzywarty • Fast is 25Mbps/3Mbps • 10% of all Americans • 39% of rural Americans Source: FCC Broadband Progress Report (2016) 23M Americans don’t have fast internet
  11. 11. California: WiFi buses 11/52@LukaszPrzywartySource: CBS
  12. 12. average load time for mobile site over 3G 12/52@LukaszPrzywarty 19s Source: DoubleClick: The Need for Mobile Speed (Feb 2016)
  13. 13. Source: What Does My Site Cost? (2017) Data cost: wudkrakow.pl Canada Japan Brazil Germany Botswana United States India Indonesia Russia Poland $0,01 $0,01 $0,01 $0,02 $0,18 $0,21 $0,23 $0,24 $0,24 $0,35 Data can be expensive
  14. 14. 14/52@LukaszPrzywarty The Alliance for Affordable Internet advocates, that 1GB
 of internet plan should cost
 2% of income. Source: FCC Broadband Progress Report (2016) 1 for 2
  15. 15. GOOD NEWS2
  16. 16. is the current average global internet speed 16/52@LukaszPrzywarty 7.2 Source: Akamai: State of the Internet (Q1 2017) 15% increase year-to-year Mbps
  17. 17. Source: Chrome Dev Summit 2017 Annualized cost of 1GB / mo in India $0 $15 $30 $45 $60 Q1 Q2 Q3 Q4 Q1 Q2 Q3 Q4 Q1 2015 2016 2017 2% GDP / capita Data becomes cheaper
  18. 18. Market is shifting
  19. 19. USERS AND BUSINESS3
  20. 20. “Cut page load by 100ms and you save Wikipedia readers 617 years of wait annually. Wikipedia on Twitter 20/52@LukaszPrzywartySource: Twitter
  21. 21. of mobile site visits are abandoned if pages take longer than 3 seconds to load 21/52@LukaszPrzywartySource: DoubleClick: The Need for Mobile Speed (Mar 2016) 53%
  22. 22. 22/52@LukaszPrzywartySource: Google Webmaster Central Blog (Apr 2015) 46% of consumers say that waiting
 for pages to load is what they dislike most when browsing
 the mobile web
  23. 23. Source: Ericsson Mobility Report (Feb 2016) Cognitive load when… Solving a math problem Experiencing mobile delays Watching a horror movie Standing at the edge of virtual cliff Watching a melodramatic TV show Waiting in line at retail store Loading is stressfull
  24. 24. 24/52@LukaszPrzywartySource: The State of Online Retail Performance (Spring 2017) 2.7s Desktop pages that loaded in
 2.7 seconds experienced a peak conversion rate of 12.8%
  25. 25. Every extra second means: 25/52@LukaszPrzywartySource: The State of Online Retail Performance (Spring 2017) 20.5% conversion 49.8% bounce rate 24.8% session length
  26. 26. WHAT CAN I DO?4
  27. 27. “Performance is an essential design feature. Brad Frost 27/52@LukaszPrzywarty
  28. 28. MOM: Measure, Optimise, Monitor 28/52@LukaszPrzywarty
  29. 29. What to measure? First Paint (FP) First Contentful Paint (FCP) First Meaningful Paint (FMP) Time to Interactive (TTI)
  30. 30. If you need, customize your metrics 30/52@LukaszPrzywarty
  31. 31. Tools 31/52@LukaszPrzywarty • Chrome DevTools • Google Lighthouse • Network Link Conditioner • Android Emulator Local • WebPageTest • PageSpeed • Calibre • Scripts (e.g TTI Polyfill, PerformanceObserver) Remote
  32. 32. Design for performance 32/52@LukaszPrzywarty • Eliminate unnecessary elements • Use style guides • Design loading and offline states • Optimize images • Use fonts reasonably • Embrace new technical possibilities
  33. 33. Optimize images 33/52@LukaszPrzywarty
  34. 34. Source: HTTPArchive Fonts 3% Scripts 14% Stylesheets 3% HTML 2% Images 54% Other 1% Video 24% Total: 3378 kB of average website weight are images 54%
  35. 35. 35/52@LukaszPrzywarty Pick the right format • Prefer SVG • Animate with CSS/JS • Experiment with new formats (WebP, JPEG-XR, WebM) • Avoid GIFs
  36. 36. 36/52@LukaszPrzywarty Optimize images • Export images that fit the user’s screen • Use <picture> element • Compress and automate (e.g. ImageOptim)
  37. 37. Source: HTTPArchive System fonts 30% Custom fonts 70% of websites use
 custom fonts 70%
  38. 38. Optimize your web font use 38/52@LukaszPrzywarty
  39. 39. Use subsets @font-face { ... /* Latin */ unicode-range: U+000-5FF; } @font-face { … /* Cyrillic */ unicode-range: U+0400–U+045F; } 1 2 3 4 5 6 7 8 9 10 11 Learn more: Network Information API
  40. 40. Embrace new technical possibilities 40/52@LukaszPrzywarty
  41. 41. Font display 41/52@LukaszPrzywarty @font-face { font-family: MyFont; src: url(myfont.woff) format('woff'), url(myfont.eot) format('eot'); font-weight: 400; font-style: normal; font-display: optional; } Learn more: font-display 1 2 3 4 5 6 7 8
  42. 42. Network information 42/52@LukaszPrzywartyLearn more: Network Information API // Returns the effective bandwidth NetworkInformation.downlink // Returns the maximum downlink speed NetworkInformation.downlinkMax // Returns the effective type NetworkInformation.effectiveType // Returns the effective round-trip time NetworkInformation.rtt // Returns the type of connection NetworkInformation.type 1 2 3 4 5 6 7 8 9 10 11 12 13 14
  43. 43. 43/52@LukaszPrzywarty • Compression of text-based assets (GZIP, Brotli) • HTTP Caching • HTTP/2 • Optimised Critical Rendering Path • PWA, AMP There's even more nerdy stuff
  44. 44. FOLLOW UP5
  45. 45. Your connection is not everyone’s connection 44/52@LukaszPrzywarty
  46. 46. Load fast 46/52@LukaszPrzywarty
  47. 47. Use less data 47/52@LukaszPrzywarty
  48. 48. Weigh up the balance between aesthetics and performance 48/52@LukaszPrzywarty
  49. 49. Try to build the world wide web for everyone 49/52@LukaszPrzywarty
  50. 50. 50/52@LukaszPrzywarty Sources • Brainfood mobile performance • Front End Performance Checklist 2017 • Leveraging the Performance Metrics that Most Affect User Experience • Measure Performance with the RAIL Model • PageSpeed Insights Rules • Saving Bandwidth with Images • The cost of Javascript Articles • The need for mobile speed
  51. 51. 51/52@LukaszPrzywarty Sources • Building for Your Next Billion Users • Fast By Default: Modern Loading Best Practices • Focusing on What Matters • Luke Wroblewski Conversions • Perfecting Perf • The Future of Loading on the Web • The Illusion of speed • The Web for the Entire World Videos • Web Performance: Leveraging the Metrics that Most Affect User Experience • Why 23 million Americans don't have fast internet
  52. 52. THANK YOU! @LukaszPrzywarty at Twitter,
 LinkedIn and Instagram

×