• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Measuring the visual experience of website performance
 

Measuring the visual experience of website performance

on

  • 1,444 views

 

Statistics

Views

Total Views
1,444
Views on SlideShare
1,444
Embed Views
0

Actions

Likes
4
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Measuring the visual experience of website performance Measuring the visual experience of website performance Presentation Transcript

    • Measuring the visual experience ofwebsite performancePatrick MeenanGoogle@patmeenanpmeenan@webpagetest.org
    • How fast is your site?
    • 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
    • Full Page (synthetic)• Full browser• Measures to onLoad
    • Full Page (RUM)• Real-user data from the field• Measures to onLoad• Possibility for per-application specific measurement points – Time to first tweet
    • Examples
    • Twitter onLoad (2.4s) Twitter end of activity (8.2s)
    • Twitter vs. Amazon
    • Twitter vs. Amazon
    • 2 Pages, Identical Performance http://youtu.be/Ipk1k_IobYg
    • 2 Pages, Identical Performance http://youtu.be/Ipk1k_IobYg
    • Start Render Identical
    • Load Time Identical
    • Last Visual Change Identical
    • Introducing the Speed Index
    • Visual “Completeness”
    • Unrendered Progress
    • 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
    • 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
    • www.webpagetest.org
    • www.webpagetest.org
    • PageSpeed Service www.webpagetest.org/compare
    • PageSpeed Service Development
    • Chrome resource prioritization First Paint insouciant.org/tech/throttling-subresources-before-first-paint/
    • Chrome resource prioritization … insouciant.org/tech/throttling-subresources-before-first-paint/
    • Visual Progress
    • Move Along, There’s Nothing to See Here… http://www.flickr.com/photos/danacea/2452567718/
    • Sensitivities to avoid• Small visual changes causing large measured differences – Pixels move (Layout Changes)
    • 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 %)
    • Lab-Only http://www.flickr.com/photos/rmtip21/4788073408/
    • RUM Possibilities• Measure time of individual DOM elements• Measure paint events• Requires browser enhancements
    • As-Implemented Issues
    • Interstitials
    • Backgrounds
    • Slideshows
    • Ads
    • www.flickr.com/photos/powerbooktrance/505269005/