$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. 2
    Hello, Mirror!
    I’m Eduardo Bouças.
    Engineer at DADI
    Open web fanboy
    Open-source advocate
    Web performance specialist
    ENTHUSIAST
    @eduardoboucas

    View Slide

  3. Kinetosis?

    View Slide

  4. A condition in which a
    disagreement exists
    between visually
    perceived movement and
    the vestibular system's
    sense of movement.
    4

    View Slide

  5. Diagnostic
    1.
    Find the problem

    View Slide

  6. Research
    ▪ Quantify speed (yours and your competitor’s)
    ▪ Understand key performance metrics
    □ First paint, visually complete, DOM interactive, etc.
    ▪ Find potential bottlenecks
    6

    View Slide

  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

    View Slide

  8. Eyes on the road
    2.
    Fix the problem

    View Slide

  9. Create a plan
    ▪ Revisit render-blocking resources
    ▪ Remove unnecessary redirects
    ▪ Implement optimised/responsive images
    ▪ Lazy load content
    ▪ Make good use of caching
    9

    View Slide

  10. Problem: this costs
    money.
    10
    But so does poor
    performance.

    View Slide

  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)

    View Slide

  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?»

    View Slide

  13. Larger windows
    3.
    Don’t repeat the problem

    View Slide

  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!

    View Slide

  15. Better tools
    ▪ Continuous VS. isolated monitoring
    □ SpeedCurve
    □ Calibre
    15
    ▪ Open-source alternative?

    View Slide

  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

    View Slide

  17. View Slide

  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

    View Slide

  19. Thank you!
    19
    @eduardoboucas
    speedtracker.org

    View Slide