Web Performance Kinetosis

Mirror Conf, Braga, 13th October 2017

Transcript

1. Web Performance Kinetosis Mirror Conf Braga, October 2017
2. 2 Hello, Mirror! I’m Eduardo Bouças. Engineer at DADI Open web fanboy Open-source advocate Web performance specialist ENTHUSIAST @eduardoboucas
3. Kinetosis?
4. A condition in which a disagreement exists between visually perceived movement and the vestibular system's sense of movement. 4
5. Diagnostic 1. Find the problem
6. Research ▪ Quantify speed (yours and your competitor’s) ▪ Understand key performance metrics □ First paint, visually complete, DOM interactive, etc. ▪ Find potential bottlenecks 6
7. Tools 1. Browser developer tools □ Waterfall view, network throttling 2. Test in real devices: WebPageTest □ Multiple locations around the globe □ Different network conditions 7
8. Eyes on the road 2. Fix the problem
9. Create a plan ▪ Revisit render-blocking resources ▪ Remove unnecessary redirects ▪ Implement optimised/responsive images ▪ Lazy load content ▪ Make good use of caching 9
10. Problem: this costs money. 10 But so does poor performance.
11. Raise awareness 11 ▪ BBC: 10% of users lost for every additional second in load time ▪ Google: 53% of mobile visits abandoned after 3 seconds ▪ AliExpress: 36% reduction in load time increased orders by 10.5% and conversion by 27% (Links and several other reports at wpostats.com)
12. New mindset 12 ▪ Performance as a feature, not a “nice to have” ▪ Implications on performance are considered at planning stages, not as an afterthought ▪ Performance budget □ «Can we afford this new feature?»
13. Larger windows 3. Don’t repeat the problem
14. Stick to the plan 14 ▪ Increase visibility of performance results □ Not just developers ▪ If people can’t see it, it’s not their problem □ Make it their problem!
15. Better tools ▪ Continuous VS. isolated monitoring □ SpeedCurve □ Calibre 15 ▪ Open-source alternative?
16. ▪ Charts show performance metrics over time ▪ Data from WebPageTest, PageSpeed and Lighthouse ▪ Configurable performance budgets □ Slack/email notifications ▪ No infrastructure (runs from a GitHub repository) ▪ Hackable and customisable (Jekyll + React) SpeedTracker 16
18. 1. Find the problem □ Study performance metrics □ Analyse your site and the competition 2. Fix the problem □ Raise awareness for business implications □ Define a course of action 3. Don’t repeat the problem □ Make continuous performance results easily available □ Use SpeedTracker! 18
19. Thank you! 19 @eduardoboucas speedtracker.org