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
   

   View Slide

2. Brazilian
   independence day
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. Number of mobile internet users in Brazil
   

   View Slide

10. Number of mobile internet users in Brazil
    

    View Slide

11. View Slide

12. View Slide

13. Isa Silveira
    @silveira_bells
    Software engineer @Work&Co
    *But also a proud carioca, math freak and beer lover
    

    View Slide

14. View Slide

15. 94%
    Of internet access made
    through mobile devices
    77%
    Of internet access made
    through desktop computers
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. 40% of the population
    has no access to 4G
    

    View Slide

21. Over 83 million people
    have no access to 4G
    

    View Slide

22. View Slide

23. 60%
    of mobile connections worldwide are 2G
    

    View Slide

24. 2012: ~500M images shared daily

    

    View Slide

25. 2012: ~500M images shared daily

    2018: ~7B+ images shared daily
    

    View Slide

26. 1200% increase
    

    View Slide

27. View Slide

28. View Slide

29. The web was supposed to be
    meant for everyone
    

    View Slide

30. View Slide

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/
    

    View Slide

32. And on the contrary:
    

    View Slide

33. 25% higher ad viewability
    70% longer average sessions
    35% lower bounce rates
    https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
    

    View Slide

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:
    

    View Slide

35. Netflix saw a 43% decrease in their bandwidth
    bill after turning on GZip
    https://wpostats.com/2015/11/04/netflix-bandwidth.html
    

    View Slide

36. Optimize for access democracy, get competitive
    advantage and cost reduction for free
    

    View Slide

37. Where do we start optimizing?
    

    View Slide

38. Measuring all the things
    

    View Slide

39. First paint and first meaningful paint
    

    View Slide

40. Time to interactive
    

    View Slide

41. Tooling
    

    View Slide

42. webpagetest.org
    

    View Slide

43. View Slide

44. Chrome Dev Tools + Lighthouse
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. 3 pillars of web performance optimization
    

    View Slide

53. 3 S’s of web performance optimization
    1. Ship less code;
    2. Shrink whatever you’re shipping;
    3. Serve effectively.
    

    View Slide

54. Shipping less code
    

    View Slide

55. Shipping less code
    1. Code Splitting
    2. Minding your stack
    

    View Slide

56. Ways to ship less code
    1. Code Splitting
    2. Minding your stack
    

    View Slide

57. View Slide

58. import("./login").then(login => {
    login.auth(user, passwd);
    });
    

    View Slide

59. Route-based code splitting
    

    View Slide

60. Ways to ship less code
    1. Code Splitting
    2. Minding your stack
    

    View Slide

61. View Slide

62. Shrink stuff!
    

    View Slide

63. Shrink stuff!
    1. Image compression
    2. Minify resources
    3. Optimize webfonts
    

    View Slide

64. Shrink stuff!
    1. Image compression
    2. Minify resources
    3. Optimize webfonts
    

    View Slide

65. View Slide

66. Shrink stuff!
    1. Image compression
    2. Minify resources
    3. Optimize webfonts
    

    View Slide

67. View Slide

68. CSSO
    

    View Slide

69. View Slide

70. Shrink stuff!
    1. Image compression
    2. Minify resources
    3. Optimize webfonts
    

    View Slide

71. Character subsetting
    

    View Slide

72. Load webfonts asynchronously
    

    View Slide

73. FontFaceObserver
    https://github.com/bramstein/fontfaceobserver
    

    View Slide

74. Variable fonts
    

    View Slide

75. View Slide

76. View Slide

77. Serve effectively
    

    View Slide

78. Serve effectively
    1. GZip text-based assets
    2. CDN
    3. HTTP/2
    

    View Slide

79. Serve effectively
    1. GZip text-based assets
    2. CDN
    3. HTTP/2
    

    View Slide

80. View Slide

81. Nginx config
    gzip on;
    gzip_comp_level 5;
    gzip_min_length 256;
    

    View Slide

82. $ npm install compression-webpack-plugin —-save-dev
    

    View Slide

83. plugins: [
    new CompressionPlugin({
    asset: "[path].gz[query]",
    algorithm: "gzip",
    test: /\.js$|\.css$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
    })
    Webpack config
    

    View Slide

84. app.get('*.js', function (req, res, next) {
    req.url = req.url + '.gz';
    res.set('Content-Encoding', 'gzip');
    next();
    });
    

    View Slide

85. 1. GZip text-based assets
    2. CDN
    3. HTTP/2
    Serve effectively
    

    View Slide

86. View Slide

87. 1. GZip text-based assets
    2. CDN
    3. HTTP/2
    Serve effectively
    

    View Slide

88. View Slide

89. View Slide

90. Good practices ✨
    1. Set a performance budget
    2. Test on real phones and networks
    3. Start optimizing early, keep it in your radar
    

    View Slide

91. Key takeaways
    

    View Slide

92. Developers do take part in and
    are responsible for social inclusion
    

    View Slide

93. It’s up to us to make sure the web
    is still a place for everyone
    

    View Slide

94. Tack så mycket! ❤
    @silveira_bells
    

    View Slide