Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Empathy Driven Development: Boosting performance by implementing for unfavorable conditions

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.

91b0fc08849c4128f1eed542c057fd27?s=128

Isabella Silveira

September 07, 2018
Tweet

Transcript

  1. Empathy Driven Development Boosting performance by implementing for unfavorable conditions

    @silveira_bells
  2. Brazilian independence day

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. Number of mobile internet users in Brazil

  10. Number of mobile internet users in Brazil

  11. None
  12. None
  13. Isa Silveira @silveira_bells Software engineer @Work&Co *But also a proud

    carioca, math freak and beer lover
  14. None
  15. 94% Of internet access made through mobile devices 77% Of

    internet access made through desktop computers
  16. None
  17. None
  18. None
  19. None
  20. 40% of the population has no access to 4G

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

  22. None
  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

  27. None
  28. None
  29. The web was supposed to be meant for everyone

  30. None
  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

  43. None
  44. Chrome Dev Tools + Lighthouse

  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  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
  57. None
  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
  61. None
  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
  65. None
  66. Shrink stuff! 1. Image compression 2. Minify resources 3. Optimize

    webfonts
  67. None
  68. CSSO

  69. None
  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

  75. None
  76. None
  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

  80. None
  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

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

  88. None
  89. None
  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