Tag Archives: w3c timings

How to select the most important web performance metric as a KPI – #feelsfast

We all know intrinsically that website performance is important. It has a tremendous impact on all of the business KPIs that measure the success of our online endeavor. I think website performance gets so much attention for two reasons: (1) it’s the most obvious symptom for bad results and (2) and it is easy to measure.

In my larger philosophical views on Customer Experience (CX) I’ve suggested…

PX > CX > UX = #usable + #feelsfast + #emotive

Feelsfast here represents “a lack of perceived latency.”

15 years ago, when I first started thinking about web performance, we only had network oriented metrics to understand web page performance. Today, there are a larger set of collectible metrics to measure many aspects of the spectrum on User Experience (UX). And today’s web applications, because they are pretty fat clients, must take client-side performance into account as well.

We are constantly reminded of the importance of performance by vendors, the media and customers through their actions.

What is the most important metric to measure web performance as a KPI? It’s the one that best represents User Experience or a lack of perceived latency.

We have network metrics. These are old school metrics that focus on how long it takes your server and the network to delver web page resources to the browser’s network layer.

  • DNS lookup time – time to resolve DNS name
  • TCP connect time – time to TCP connect
  • SSL handshake time – time to perform SSL handshake
  • Time to first byte – time to receive the first packet of data
  • Time to receive the data – time to receive the data
  • Fullpage time – time to load the web page and all it’s resources

Most of today’s modern network browsers supplement this with a richer set of data based on the W3C standards for navigation timings:

  • navigationStart – time that the action was triggered
  • unloadEventStart – time of start of unload event
  • unloadEventEnd – time of completion of unload event
  • redirectStart – time http redirection begins
  • redirectEnd – time http redirection completes
  • fetchStart – time that request begins
  • domainLookupStart – time of start of DNS resolution
  • domainLookupEnd – time DNS resolution completes
  • connectStart – time when tcp connect request begins
  • connectEnd – time when tcp connect completes
  • secureConnectionStart – time just before secure handshake
  • requestStart – time that the browser requests the resource
  • responseStart – time that the browser receives first packet of data
  • responseEnd – time the browser receives the last byte of data
  • domLoading – time that the document object is created
  • domInteractive – time when the browser finishes parsing the document
  • domContentLoadedEventStart – time just before DomContentLoaded event
  • domContentLoadedEventEnd – time just after DOMContentLoaded event
  • domComplete – time when the load event of the document is completed
  • loadEventStart – time when the page load event is fired
  • loadEventEnd – time when the page load event completes

This is a nice visual of the W3C timings.

timing-overview

And we have visual timing metrics available from various tools:

  • IE11 brings us msFirstPaint as part of the browser timings
  • webpagetest.org gives us start render, filmstrip view, and the innovative speed index
  • AlertSite.com can provide visual capture and metrics for FirstPaint and Above the Fold using Firefox

How do you choose which web performance metric has the most value as a KPI when all of these have some value? The key is to identify, for any particular monitored application or web page, which metric best represents a users perception of latency, in other words, if it feels fast. This is likely one of the more modern metrics – loadEventEnd, FirstPaint, Speedindex, Above the fold.

Once selected, this #feelsfast metric should become a critical business KPI and tracked and managed as such.

Are you giving the web performance component of UX enough attention?

Ken

Use sitespeed.io to Analyze your Website Performance and Optimization

Sitespeed.io is a really wonderful open source tool that automatically provides a rich set of information about Web site performance and how well Web pages are optimized versus best practices. Sitespeed.io can crawl all of the pages on Web site or just the Web pages you wish. It’s a little more complicated than some of the other free tools (link) I have been sharing. Let’s call this a pro-sumer tool rather than a consumer tool. But really, if you don’t mind rolling up your sleeves just a little – it’s very worth it.

Sitespeed.io can also crawl multiple sites allowing you to compare yourself to your key competitors. Differences in how fast your Web site feels of just a quarter or half second can have dramatic affects on conversion and retention meaning this stuff is important to the business!

Let’s take a look at what you get before providing a couple of helpful tips to help you get it running for yourself.

You get a reasonably comprehensive set of reports starting with a scorecard-like summary that provides a high-level scorecard about presenting key Web site optimization and performance metrics.

ss_web_optimization_scorecard

The detailed summary page statistically analyzes all of the optimization, content, and performance metrics.

ss_detail_web_optimization_scores

What really caught my eye were the rich Web performance and user experience data provided that are available in the latest web browsers (Chrome 30+ and IE 11) courtesy of the w3c timings API. If you are a web performance geek like me this should make you say wow!

ss_web_performance_metrics

An analysis of each individual page is provided too.

ss_Web_page_optimization_performance

There are many ways this tool can be used to help you improve site quality and performance. As part of the QA process sitespeed would be an excellent part of the tool-chain for verification that changes haven’t negatively affected optimization scores or created performance issues. Marketing should be using this tool to benchmark key site functions against core competitors to improve conversion and loyalty. The web operations team can use this as a very capable monitoring function. And for those of you out there actually doing Continuous Integration (CI), these metrics should be automatically gathered and analyzed at every build.

Sitespeed.io is really the glue and HTML report output that is consolidated from some other really great open source tools such as Yahoo’s Yslow, phantom.js, and browsertime.  These are command-line tools so you’ll need to be comfortable at a terminal screen. I configured this on a 5 year old Macbook Pro that had a fresh install of OS X Mavericks.

First you will need to install Xcode, developer tools, and homebrew. This guide was very helpful.

Before continuing you’ll want to install the latest Java from www.java.com.

Now you’re ready to follow the straightforward documentation from sitespeed.io to install and use.

If you are involved with web performance, website optimization or user experience and you’re comfortable at a terminal prompt you really should give this one a whirl.

Ken

Related links:

Free tools
xcode on appstore
sitespeed.io
homebrew for Mac
browsertime
w3c timings reference