Notes

  • Pressing 'h' highlights code snippets
  • Pressing 'p' toggles speaker notes
  • Pressing 'f' toggles fullscreen viewing
  • Pressing 'w' toggles widescreen
  • Pressing 'o' toggles overview mode
  • Pressing 'ESC' toggles off these goodies

Why Measure?


  • Slow site results in

    • Lower usage

    • Less Revenue

    • Poor user experience

Agenda


  • Measure Performance with HTML5 Web Timing


  • Google Analytics Site Speed


  • How Fast is the Web?

HTML5 Web Timing API

Allows web pages to get detailed timing information about the page load.

Goals:

  • Supported everywhere (all browsers, mobile and desktop)

  • Consistent interface and metric definitions across browsers

  • Visibility into detailed network, HTTP level and DOM timing information

HTML5 Web Timing API


The API consists of the following specifications:


  • Navigation Timing

  • Resource Timing

  • User Timing

Navigation Timing Attributes (window.performance.timing)
Demo

Resource Timing Attributes

Provides timing info related to resources on a page, e.g., image, script, object, iframe, svg.

interface PerformanceResourceTiming : PerformanceEntry {
    readonly attribute unsigned short initiatorType;

    readonly attribute double redirectStart;
    readonly attribute double redirectEnd;
    readonly attribute double fetchStart;
    readonly attribute double domainLookupStart;
    readonly attribute double domainLookupEnd;
    readonly attribute double connectStart;
    readonly attribute double connectEnd;
    readonly attribute double secureConnectionStart;
    readonly attribute double requestStart;
    readonly attribute double responseStart;
    readonly attribute double responseEnd;
};

Example Usage


function getImageLoadTimings()
{
    var resourceList = window.performance.getEntriesByType("resource");
    for (i = 0; i < resourceList.length; i++)
    {
    	if (resourceList[i].initiatorType == "img")
        {
          alert("Time: " + resourceList[i].responseEnd - resourceList[i].startTime);
        }
    }
}

User Timing API

Provides a high precision (1 ms) timer and a standard mechanism for buffering and retrieval of timing information with a web developer supplied name.

Interfaces:

  • Mark (UTC time)
    • window.performance.mark(name)
    • window.performance.getMarks(name)
    • window.performance.clearMarks()
  • Measure (duration)
    • window.performance.measure(measure_name, mark_name1, opt mark_name2)
    • window.performance.getMeasure(measure_name)
    • window.performance.clearMeasure()

Web Timing Status

Navigation Timing is supported in the following browsers:

  • Chrome 6+
  • IE9+
  • Firefox 7+ (mobile & desktop)
  • Android 4.0+

Resource Timing and User Timing implementations expected soon.
Google Analytics Site Speed

Google Analytics

Site Speed in Google Analytics


  • Analytics set up

    <script type='text/javascript'>
  _gaq.push(['_setAccount','UA-XXXX-X']);
  _gaq.push(['_trackPageview']);
</script>
  • Site Speed set up
    • None, Collects speed data for 1% of traffic
  • Increase sample rate for small sites

    <script type='text/javascript'>
  _gaq.push(['_setSiteSpeedSampleRate', 50]);
  _gaq.push(['_trackPageview']);
</script>

Page Load Process

Page Load Process

Demo

User Timings

  • Measure user defined custom timings

    Examples:
    • Timings for Ajax actions

    • Define your own "User Perceived Load Time"
      (Time to load main article for news publishers)

    • Detailed performance measurements

API

_gaq.push(['_trackTiming', category, variable, time_ms, opt_label, opt_sample]);
ParameterExample
category*"Watch Page"
variable*"Social widgets load time"
time_ms*2340
opt_label"logged in users"
opt_sample100

Example


function TimeTracker(category, variable, opt_label) {
  ...
}

TimeTracker.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;
  window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  return this;
}
var tt = new TimeTracker('Watch Page', 'Social widgets load time');
makeXhrRequest(url, myCallback, tt);

function makeXhrRequest(url, callback, tt) {
  if (window.XMLHttpRequest) {
    tt.startTime();
    xhr.send();
  }
}

function myCallback(event) {
  if (target.readyState == 4) {
    if (target.status == 200) {
      target.tt.endTime();
      target.tt.send();
      // Do something with the resource.
    }
  }
}
There's more with Google Analytics...

Custom Reports, Dashboards and Data API

Dashboards

Advanced Segments


Advanced Segments

Custom Alerts


Intelligence Events

Analysis tools

Optimization Tools
How fast is the web?

Google Analytics Site Speed Global Page Load Time: Mean, Median, Histogram

Page Load Times

Page Load Time Histograms
  • Desktop page load time mean and median are 6.9/2.9 seconds
  • Mobile mean and median are 10.2/4.7 seconds

Google Analytics Site Speed Global Page Load Time: Countries

Google Analytics Site Speed Global Page Load Time: Verticals

Page Load Times
Speed Matters!

Thank You!

References