1. Measuring the visual experience ofwebsite performancePatrick MeenanGoogle@patmeenanpmeenan@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 Performancehttp://youtu.be/Ipk1k_IobYg 11. 2 Pages, Identical Performancehttp://youtu.be/Ipk1k_IobYg 12. Start Render Identical 13. Load TimeIdentical 14. Last Visual Change Identical 15. Introducing the Speed Index 16. Visual Completeness 17. Unrendered Progress 18. The Speed IndexThe user experience of A was 7.4 times faster than Bsites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 19. Amazon vs. TwitterAmazon TwitterSpeed Index 1501 6014 (+300%)onload2.42.4Fully Loaded6.48.2 (+28%)www.webpagetest.org/video/view.php?id=120414_22f2206da973b41621c499e2be01d555cdac6ab0&bare=1 20. www.webpagetest.org 21. www.webpagetest.org 22. PageSpeed Service www.webpagetest.org/compare 23. PageSpeed Service Development 24. Chrome resource prioritizationFirst Paint insouciant.org/tech/throttling-subresources-before-first-paint/ 25. Chrome resource prioritization insouciant.org/tech/throttling-subresources-before-first-paint/ 26. Visual Progress 27. Move Along, Theres Nothing to See Herehttp://www.flickr.com/photos/danacea/2452567718/ 28. Sensitivities to avoid Small visual changes causing large measured differences Pixels move (Layout Changes) 29. 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 %) 30. Lab-Only http://www.flickr.com/photos/rmtip21/4788073408/ 31. RUM Possibilities Measure time of individual DOM elements Measure paint events Requires browser enhancements 32. As-Implemented Issues 33. Interstitials 34. Backgrounds 35. Slideshows 36. Ads 37. www.flickr.com/photos/powerbooktrance/505269005/