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

Web Performance Kinetosis

Web Performance Kinetosis

Mirror Conf, Braga, 13th October 2017

Eduardo Bouças

October 13, 2017
Tweet

More Decks by Eduardo Bouças

Other Decks in Technology

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