Clean Slate SpeedIndex

Get more accurate measurements and better visualization in WebPagetest and SpeedCurve

SpeedIndex is a great way to measure how quickly your page loads from a visual, user-centered perspective. It’s built into WebPagetest and SpeedCurve (which uses WPT under the covers). If the page you’re measuring requires you to bounce through another page first, such as getting past a login, here’s a quick tip for better accuracy and a cleaner filmstrip report.

In this example, I’m using the Ancestry “logged-in” home page as the target. Here’s what the script looks like:

logData 0
setValue name=username yermom
setValue name=password secret
logData 1
submitForm id=smpLoginForm

The “logData 0” bit tells WPT to wait until we’re about to submit the login form before it starts logging. That’s great for most of the timing numbers, but there’s a catch for SpeedIndex. Because SI is based on visual progress, it can get thrown off by the fact that it’s starting with something other than a blank page.

Let’s add one weird trick to the script:

setValue name=password secret
execAndWait document.getElementsByTagName(‘html’)[0].style.display = ‘none’;
logData 1

That hides the whole page before we turn logging back on and start loading the target page. Now let’s see how they compare:

default vs “clean slate” filmstrip, part 1

So far, only the visuals are different; it shows 0% loaded in both cases, which is correct. Now let’s jump ahead:

default vs “clean slate” filmstrip, part 2

Oops. As we get the initial response back from our target page, the SI calculation thinks our page is now 40% complete. Now for the big finish:

default vs “clean slate” filmstrip, part 3

The main content appears and the viewable area is almost visually complete. For those that prefer line charts, here you go:

The net effect is that the default got a SI of 2.3 seconds, and the clean slate got 2.7. The clean slate seems more accurate to what a user actually experiences.

Accuracy aside, there’s one other nice benefit of setting up your scripted tests with this trick:

When you look at the “Benchmark” view in SpeedCurve, or if you’re using the comparison view for multiple WPT results, it’s easy to see at a glance how your first meaningful paint times stack up against each other.

If this kind of thing interests you, come check out my presentation at Velocity NY 2016. If you’ve got SpeedCurve and WPT tricks of your own, write about them and share a link in the comments.

Show your support

Clapping shows how much you appreciated Jed Wood’s story.