Part I: Site Speed Reports in Google Analytics

How fast is your site?

  • Website page loading time is often over-looked
    • As users, we want pages to load almost instantly
Page Load Times Page Load Time Histograms
Global Site Speed data over a week's time (opted-in publishers)

  • First step is to measure and diagnose the speed of pages
    • Also critical in context of other web analytics data

Google Analytics

  • Detailed statistics about the visitors to a website
  • Measures sales and conversions
  • Gives Actionable Insights
    • how visitors use your site
    • how they arrived on your site
    • how you can keep them coming back
  • Realtime, Intelligence, External API
  • http://www.google.com/analytics

+ Site Speed Reports

  • Overview Report
    • Fast visualization for page load latencies
    • Shortcuts to reports by browser, country, page
  • Page Timings Report
    • Page load latencies for a sample of pageviews
    • Histograms for each latency metric
    • Map overlay for average load times
  • User Timings Report
    • Time for any discrete hit, event, interaction
    • Grouping by category, variable and label
    • Tabular drill down, histogram and map overlays

Site Speed Setup

  • Original tracking code to initiate Google Analytics

              <script type='text/javascript'>
                var _gaq = _gaq || [];
                _gaq.push(['_setAccount','UA-XXXX-X']);
                _gaq.push(['_trackPageview']);
              </script>
  • No additional code for Site Speed for Overview/Page Timings
    • Collects speed data for 1% of traffic by default
  • Code to increase sampling rate for small sites

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

Metrics from Navigation Timing API

  • API provides information related to main page
    • Chrome 6+, IE9+, Firefox 7+, Android 4.0+
  • Page timings tracked by default Load Time Components

User Timings

  • Custom timing of any discrete event, interaction
    • Timings for Ajax actions
    • Define your own "User Perceived Load Time"
      • E.g. time to load the main article for news publishers
_gaq.push(['_trackTiming', category, variable, time_ms, opt_label, opt_sample]);
ParameterExample
category*"Home Page"
variable*"Results Fetch Time"
time_ms*2340
opt_label"logged in users"
opt_sample50

JS Load Example (Developers Guide)

    function TimeTracker(category, variable, opt_label) {
      .... // constructor initializing
    }
    .... // Other methods.
    TimeTracker.prototype.send = function() {
      var timeSpent = this.endTime - this.startTime;
      window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
      return this;
    }
    
    var tracker = new TimeTracker('jQuery', 'Load Library', 'Google CDN');
    loadJs('jslibrary.js', jsLibraryLoadComplete, tracker);
    
    function loadJs(url, callback, tracker) {
      var element = document.createElement('script');
      element.async = true;
      element.src = url;
      element.onload = callback;
      element.timetracker = tracker;
      tracker.startTime();
      s.parentNode.insertBefore(element, document.getElementsByTagName('script')[0]);
    }
    function jsLibraryLoadComplete(event) {
      var e = event || window.event;
      var target = e.target ? e.target : e.srcElement;
      target.timetracker.endTime().send();
    }

Site Speed in Other Analytics Features

Custom Reports Intelligence
Custom ReportsIntelligence

  • Also in Advanced Segments and External Data API

Global User Perceived Latency

Page Load Times Page Load Time Histograms
Page Load Times For Countries Page Load Time Histograms for Verticals
  • Collected over a week's time (opted-in publishers)
Part II: mod_pagespeed

What is mod_pagespeed?

  • Open source Apache module.
  • Implements web performance best practices.
  • Filters do one thing and run in series.
  • Later filters can operate on the output of earlier filters.

Today

  • Filters! Filters! Filters!
  • Experiments!

Filters! Inline Preview Images

  • Add low quality data URIs for the first n images.
    (n = ModPagespeedMaxInlinedPreviewImagesIndex)
  • Insert JS to load high quality images on window.onload,
    replacing the low quality data URIs.
  • Doesn't always speed up PLT, but does have a good visual impact (Speed Index).

Filters! Lazyload Images

  • Replace imgs with blank same-size data URIs.
  • Insert JS to load the real image when visible.
  • Immediately if above the fold (ATF),
    when scrolled into view otherwise,
    or on window.onload if so configured.
  • Similar ATF, better PLT!

Filters! Defer JavaScript

  • Replace: src= with orig_src=, type= with orig_type=
    Change: onload= to be called after we load it
    Add: type="text/psajs".
  • Insert window.onload handler to load and execute the deferred scripts and onload= handlers in original order.
  • Stops JS from blocking page rendering.

Experiments!

  • A/B tests
  • Real world
  • Double blind
  • Leverages Google Analytics ...
    • Custom Variables for A/B
    • Results in the Site Speed Report
    • Results in Custom Reports

Gimme!

References & Pointers

  • Web Performance Working group
  • Google Analytics Site Speed Help Center
  • Site Speed Blogs Analytics Blogs
  • Analysis tools
    • WebPageTest
    • Chrome Developer Tools
  • Optimization tools
    • Apache module mod_pagespeed
    • Page Speed Insights
    • Page Speed Service

Thank you!

matterbury@google.com
tikir@google.com