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

Empathy Driven Development: Boosting performanc...

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.

Isabella Silveira

September 07, 2018
Tweet

More Decks by Isabella Silveira

Other Decks in Technology

Transcript

  1. 94% Of internet access made through mobile devices 77% Of

    internet access made through desktop computers
  2. 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/
  3. 25% higher ad viewability 70% longer average sessions 35% lower

    bounce rates https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
  4. • 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:
  5. Netflix saw a 43% decrease in their bandwidth bill after

    turning on GZip https://wpostats.com/2015/11/04/netflix-bandwidth.html
  6. 3 S’s of web performance optimization 1. Ship less code;

    2. Shrink whatever you’re shipping; 3. Serve effectively.
  7. app.get('*.js', function (req, res, next) { req.url = req.url +

    '.gz'; res.set('Content-Encoding', 'gzip'); next(); });
  8. Good practices ✨ 1. Set a performance budget 2. Test

    on real phones and networks 3. Start optimizing early, keep it in your radar
  9. It’s up to us to make sure the web is

    still a place for everyone