Isa Silveira‘s talk titled “Empathy Driven Development: Boosting performance by implementing for unfavorable conditions” focused on fighting technical inequality by optimizing web application network usage, loading times for interactive experience.
She presented statistics about device range and mobile networking coverage showing that in global scale 60% of people are browsing in 2G speeds. It means that we need to design and implement for more challenging network conditions to be able to really do global business. That’s easy to forget during development when there are high-end devices and stable 4G access available.
Global coverage means that user perceived performance optimizations will also make your site or application more accessible.
Based on Google Analytics 53% of mobile site loads are abandoned when load takes longer than 3 seconds. Also presented case studies results from Google, Pinterest and Netflix prove that performance optimizations increase ad views, conversions, SEO traffic driving more value for the business.
Also there’s older study from Amazon, which found out that each “100 milliseconds of extra loading time costs them 1% in sales”.
So what about the solutions? Start by measuring first paint, first meaningful paint and time to interactive eg. with Lighthouse audit. Lighthouse is a performance audit tool integrated in Chrome (though it is availale as a standalone version), which provides report like one shown below with concrete steps for improvements.
After that you could continue to 3 important phases of optimization:
- Ship less code
- Shrink whatever you ship
- Optimize and downscale images, maybe use WebP too
- Minify script assets
- Optimize webfonts (use subsets, variable fonts, etc)
- Serve efficiently
- Use Gzip
- Consider CDN
- Enable HTTP/2 for your stack, and use server push when appropriate
- Prefetch content
Also one additional part of serving efficiently would be to optimize BE services, slow DB queries and other serverside system components.