Measuring the visual experience of website performance

1,918
-1

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,918
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Measuring the visual experience of website performance

  1. 1. Measuring the visual experience ofwebsite performancePatrick MeenanGoogle@patmeenanpmeenan@webpagetest.org
  2. 2. How fast is your site?
  3. 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. 4. Full Page (synthetic)• Full browser• Measures to onLoad
  5. 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. 6. Examples
  7. 7. Twitter onLoad (2.4s) Twitter end of activity (8.2s)
  8. 8. Twitter vs. Amazon
  9. 9. Twitter vs. Amazon
  10. 10. 2 Pages, Identical Performance http://youtu.be/Ipk1k_IobYg
  11. 11. 2 Pages, Identical Performance http://youtu.be/Ipk1k_IobYg
  12. 12. Start Render Identical
  13. 13. Load Time Identical
  14. 14. Last Visual Change Identical
  15. 15. Introducing the Speed Index
  16. 16. Visual “Completeness”
  17. 17. Unrendered Progress
  18. 18. 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
  19. 19. 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
  20. 20. www.webpagetest.org
  21. 21. www.webpagetest.org
  22. 22. PageSpeed Service www.webpagetest.org/compare
  23. 23. PageSpeed Service Development
  24. 24. Chrome resource prioritization First Paint insouciant.org/tech/throttling-subresources-before-first-paint/
  25. 25. Chrome resource prioritization … insouciant.org/tech/throttling-subresources-before-first-paint/
  26. 26. Visual Progress
  27. 27. Move Along, There’s Nothing to See Here… http://www.flickr.com/photos/danacea/2452567718/
  28. 28. Sensitivities to avoid• Small visual changes causing large measured differences – Pixels move (Layout Changes)
  29. 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. 30. Lab-Only http://www.flickr.com/photos/rmtip21/4788073408/
  31. 31. RUM Possibilities• Measure time of individual DOM elements• Measure paint events• Requires browser enhancements
  32. 32. As-Implemented Issues
  33. 33. Interstitials
  34. 34. Backgrounds
  35. 35. Slideshows
  36. 36. Ads
  37. 37. www.flickr.com/photos/powerbooktrance/505269005/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×