WebPagetest in 5 minutes

Introduction to "Speed Index" of awesome tool WebPagetest.
http://www.webpagetest.org/ #frontrend

Transcript

1. Frontrend x Chrome Tech Talk Night Extended, October 30, 2013
   5
   WebPagetest minutes
   in
   

   View Slide

2. +KojiIshimoto
   

   View Slide

3. Web
   Performance
   Warrior
   I’m a...
   www.flickr.com/photos/soldiersmediacenter/5349439407
   

   View Slide

4. PageSpeed Insights
   WebPagetest
   

   View Slide

5. WebPagetest
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. First Byte Start Render
   DOM Elements Document
   Compete Fully Loaded
   Load Time Waterfall View
   Connection View Screen
   Shot Filmstrip View
   Watch Video Scripted Test
   Waterfall Opacity
   Export HTTP Archive
   

   View Slide

10. View Slide

11. View Slide

12. Speed Index
    

    View Slide

13. View Slide

14. View Slide

15. Speed Index =
    end
    0
    1 ―
    100
    VC
    ∫ ―
    ―
    ―
    end = End time in milliseconds VC = % (Visually Complete)
    

    View Slide

16. Let’s Improve Performance
    

    View Slide

17. View Slide

18. Before
    80
    PageSpeed Insight Score
    

    View Slide

19. Remove it!
    

    View Slide

20. After
    93
    PageSpeed Insight Score
    

    View Slide

21. View Slide

22. WebPagetest
    

    View Slide

23. WebPagetest
    

    View Slide

24. 3105
    WebPagetest
    

    View Slide

25. View Slide

26. ―@maccaw
    Speed is the second biggest engagement
    driver on the Internet. Just after
    perceived speed.
    

    View Slide

27. Private Instance for Ameba
    

    View Slide

28. View Slide

29. Under Development
    

    View Slide

30. Thanks!
    +KojiIshimoto
    

    View Slide