1. Measuring the visual experience of
website performance
Patrick Meenan
Google
@patmeenan
pmeenan@webpagetest.org

2. How fast is your site?

3. Base page monitoring
• Measures just the HTML response
• How fast the server responded
• Largely for operational monitoring/back-end optimization
• Curl, wget, nagios, pingers, etc

4. Full Page (synthetic)
• Full browser
• Measures to onLoad

5. Full Page (RUM)
• Real-user data from the field
• Measures to onLoad
• Possibility for per-application specific measurement points
– Time to first tweet

6. Examples

7. Twitter onLoad (2.4s) Twitter end of activity (8.2s)

8. Twitter vs. Amazon

9. Twitter vs. Amazon

10. 2 Pages, Identical Performance
http://youtu.be/Ipk1k_IobYg

11. 2 Pages, Identical Performance
http://youtu.be/Ipk1k_IobYg

12. Start Render
Identical

13. Load Time
Identical

14. Last Visual Change
Identical

15. Introducing the Speed Index

16. Visual “Completeness”

18. Unrendered Progress

19. The Speed Index
The user experience of A was 7.4 times faster than B
sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

20. Amazon vs. Twitter
Amazon Twitter
Speed Index 1501 6014 (+300%)
onload 2.4 2.4
Fully Loaded 6.4 8.2 (+28%)
www.webpagetest.org/video/view.php?id=120414_22f2206da973b41621c499e2be01d555cdac6ab0&bare=1

22. www.webpagetest.org

23. www.webpagetest.org

24. PageSpeed Service
www.webpagetest.org/compare

25. PageSpeed Service Development

26. Chrome resource prioritization
First Paint
insouciant.org/tech/throttling-subresources-before-first-paint/

27. Chrome resource prioritization
…
insouciant.org/tech/throttling-subresources-before-first-paint/

28. Visual Progress

29. Move Along, There’s Nothing to See Here…
http://www.flickr.com/photos/danacea/2452567718/

30. Sensitivities to avoid
• Small visual changes causing large measured differences
– Pixels move (Layout Changes)

31. As-Implemented - Histograms
• Fixed End point (Fully loaded)
• Per-color histograms of color distribution across the page
– Pixel locations irrelevant
– Works “well enough”
– Minimal memory required
• Starting Histogram and Final Histogram captured
• Diff from Start to Final
• Each Video frame:
– Diff against start
– Compare to Diff from Final (calculate as %)

32. Lab-Only
http://www.flickr.com/photos/rmtip21/4788073408/

34. RUM Possibilities
• Measure time of individual DOM elements
• Measure paint events
• Requires browser enhancements

35. As-Implemented Issues

36. Interstitials

37. Backgrounds

38. Slideshows

39. Ads

40. www.flickr.com/photos/powerbooktrance/505269005/