Loading Performance

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

Transcript

1. LOADING PERFORMANCE WUD Kraków 2017 – December 2 Łukasz Przywarty
2. I’m Clark Łukasz from InVision Infermedica
3. 3/52 @LukaszPrzywarty • Exclusion • Travels • Disasters Why loading performance matters?
4. What impacts load time? 4/52 @LukaszPrzywarty • Network conditions • Hardware • File size • Server requests • Scripts and frameworks • Browser • And more!
5. BAD NEWS 1
6. “We don't always build with a
 global audience in mind. Tal Oppenheimer, Google 6/52 @LukaszPrzywarty
7. of mobile connections are 2G 7/52 Source: Chrome Dev Summit 2017 @LukaszPrzywarty 60%
8. Source: The Mobile Economy 2017 0% 25% 50% 75% 100% India Indonesia Sub Saharan
 Africa 2G 3G 4G Sometimes it’s even worse
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/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. California: WiFi buses 11/52 @LukaszPrzywarty Source: CBS
12. average load time for mobile site over 3G 12/52 @LukaszPrzywarty 19s Source: DoubleClick: The Need for Mobile Speed (Feb 2016)
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/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. GOOD NEWS 2
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. 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. Market is shifting
19. USERS AND BUSINESS 3
20. “Cut page load by 100ms and you save Wikipedia readers 617 years of wait annually. Wikipedia on Twitter 20/52 @LukaszPrzywarty Source: Twitter
21. of mobile site visits are abandoned if pages take longer than 3 seconds to load 21/52 @LukaszPrzywarty Source: DoubleClick: The Need for Mobile Speed (Mar 2016) 53%
22. 22/52 @LukaszPrzywarty Source: 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. 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/52 @LukaszPrzywarty Source: 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. Every extra second means: 25/52 @LukaszPrzywarty Source: The State of Online Retail Performance (Spring 2017) 20.5% conversion 49.8% bounce rate 24.8% session length
26. WHAT CAN I DO? 4
27. “Performance is an essential design feature. Brad Frost 27/52 @LukaszPrzywarty
28. MOM: Measure, Optimise, Monitor 28/52 @LukaszPrzywarty
29. What to measure? First Paint (FP) First Contentful Paint (FCP) First Meaningful Paint (FMP) Time to Interactive (TTI)
30. If you need, customize your metrics 30/52 @LukaszPrzywarty
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. 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. Take care of your images 33/52 @LukaszPrzywarty
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/52 @LukaszPrzywarty Pick the right format • Prefer SVG • Animate with CSS/JS • Experiment with new formats (WebP, JPEG-XR, WebM) • Avoid GIFs
36. 36/52 @LukaszPrzywarty Optimize images • Export images that fit the user’s screen • Use <picture> element • Compress and automate (e.g. ImageOptim)
37. Source: HTTPArchive System fonts 30% Custom fonts 70% of websites use
 custom fonts 70%
38. Optimize your web font use 38/52 @LukaszPrzywarty
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. Embrace new technical possibilities 40/52 @LukaszPrzywarty
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. Network information 42/52 @LukaszPrzywarty Learn 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/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. FOLLOW UP 5
45. Your connection is not everyone’s connection 44/52 @LukaszPrzywarty
46. Load fast 46/52 @LukaszPrzywarty
47. Use less data 47/52 @LukaszPrzywarty
48. Weigh up the balance between aesthetics and performance 48/52 @LukaszPrzywarty
49. Try to build the world wide web for everyone 49/52 @LukaszPrzywarty
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/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. THANK YOU! @LukaszPrzywarty at Twitter,
 LinkedIn and Instagram