Empathy Driven Development: Boosting performance by implementing for unfavorable conditions

Within the process of building a brand new application, us engineers are used to consider a lot of issues users may have while using our website or app: cross browser compatibility, accessibility and responsiveness are a few of the things that are always on our mind, but are we really building apps for everyone? Brazil has a population of over 207 million people and only 37,9% of them have access to LTE phones; most of them still use 3G and even 2G networks.

Cellular data is still really expensive, as well as most modern smartphones, which makes most digital experiences unfeasible. However, there's a light in the end of the tunnel! By optimizing the performance on our digital products, we can reach these kinds of users and end up crafting a better experience for all of them. In this talk I'll go through my past experiences implementing performance optimized applications, some of the best practices you can use on your own projects and some of the challenges citizens from emerging countries still face.

In this talk, I'll go through the concepts and practical implementations of performance enhancements like code splitting, css inlining, gzip, resource minification, usage of asynchronous scripts and other concerns that can really change the user experience on a website. Since I'll go from basic concepts to the actual implementation, it'll be applicable and tangible to audiences of different levels of expertise.

Transcript

1. Empathy Driven Development Boosting performance by implementing for unfavorable conditions @silveira_bells
2. Brazilian independence day
9. Number of mobile internet users in Brazil
10. Number of mobile internet users in Brazil
13. Isa Silveira @silveira_bells Software engineer @Work&Co *But also a proud carioca, math freak and beer lover
15. 94% Of internet access made through mobile devices 77% Of internet access made through desktop computers
20. 40% of the population has no access to 4G
21. Over 83 million people have no access to 4G
23. 60% of mobile connections worldwide are 2G
24. 2012: ~500M images shared daily

25. 2012: ~500M images shared daily
 2018: ~7B+ images shared daily
26. 1200% increase
29. The web was supposed to be meant for everyone
31. 53% of visits are abandoned if a mobile site takes longer than 3s to load https://www.thinkwithgoogle.com/data/mobile-site-abandonment-three-second-load/
32. And on the contrary:
33. 25% higher ad viewability 70% longer average sessions 35% lower bounce rates https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
34. • 40% decrease in load time; • 15% increase in SEO traffic; • 15% increase in conversion rate to signup. https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7 Pinterest performance improvements:
35. Netflix saw a 43% decrease in their bandwidth bill after turning on GZip https://wpostats.com/2015/11/04/netflix-bandwidth.html
36. Optimize for access democracy, get competitive advantage and cost reduction for free
37. Where do we start optimizing?
38. Measuring all the things
39. First paint and first meaningful paint
40. Time to interactive
41. Tooling
42. webpagetest.org
44. Chrome Dev Tools + Lighthouse
52. 3 pillars of web performance optimization
53. 3 S’s of web performance optimization 1. Ship less code; 2. Shrink whatever you’re shipping; 3. Serve effectively.
54. Shipping less code
55. Shipping less code 1. Code Splitting 2. Minding your stack
56. Ways to ship less code 1. Code Splitting 2. Minding your stack
58. import("./login").then(login => { login.auth(user, passwd); });
59. Route-based code splitting
60. Ways to ship less code 1. Code Splitting 2. Minding your stack
62. Shrink stuff!
63. Shrink stuff! 1. Image compression 2. Minify resources 3. Optimize webfonts
64. Shrink stuff! 1. Image compression 2. Minify resources 3. Optimize webfonts
66. Shrink stuff! 1. Image compression 2. Minify resources 3. Optimize webfonts
68. CSSO
70. Shrink stuff! 1. Image compression 2. Minify resources 3. Optimize webfonts
71. Character subsetting
72. Load webfonts asynchronously
73. FontFaceObserver https://github.com/bramstein/fontfaceobserver
74. Variable fonts
77. Serve effectively
78. Serve effectively 1. GZip text-based assets 2. CDN 3. HTTP/2
79. Serve effectively 1. GZip text-based assets 2. CDN 3. HTTP/2
81. Nginx config gzip on; gzip_comp_level 5; gzip_min_length 256;
82. $ npm install compression-webpack-plugin —-save-dev
83. plugins: [ new CompressionPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0.8 }) Webpack config
84. app.get('*.js', function (req, res, next) { req.url = req.url + '.gz'; res.set('Content-Encoding', 'gzip'); next(); });
85. 1. GZip text-based assets 2. CDN 3. HTTP/2 Serve effectively
87. 1. GZip text-based assets 2. CDN 3. HTTP/2 Serve effectively
90. Good practices ✨ 1. Set a performance budget 2. Test on real phones and networks 3. Start optimizing early, keep it in your radar
91. Key takeaways
92. Developers do take part in and are responsible for social inclusion
93. It’s up to us to make sure the web is still a place for everyone
94. Tack så mycket! ❤ @silveira_bells