Beyond the Waterfall - meaningful web performance visualisations

Beyond the waterfall

A picture is worth a thousand words,

storytellers

and we are all

A picture is worth a thousand words,

salespeople

and we are all

perfmatters

webperf

devops

sitespeed

@ VelocityConf

http:// www.slideshare.net/soasta

Our sales charts need work

Some images are universal

https:// www.flickr.com/photos/vialbost/17797990034/

Some images are universal

Some images are easy

Good

Bad

And some are hard

Fast Slow Medium

it is our job to find the best visualisations to support our story

We’ve been doing it for a while

https:// www.flickr.com/photos/gruban/137421901/

We’re rubbish at parsing letters

http://www.mrc

cbu.cam.ac.uk/people/matt.davis/Cmabridge/rawlinson/

it deosn't

mttaer

in waht

oredr

the ltteers

in a wrod

are, the olny

iprmoetnt

tihng

is taht

the frist

and lsat

ltteer

be at the rghit

pclae

We process patterns, outliers, shapes…

…faster than the speed of thought

So… infographics !

infographic = hand

made

visualisation = computer

made

Size

–

Weight, scale, importance

Position

–

Relationship, inheritance

Colour & Contrast

–

Importance, categorisation, value

Shape

–

Categorisation, importance

Animation

–

Movement, importance

We have got a lot to work with

So what about web performance?

we now have a lot

of data

https://mpulse.soasta.com/concerto/Central?anon=true

And o ur data can have a high entry

level

It doesn’t have to be this way…

it is imperative that we present our data well in a business context

Meet Jane

Jane’s challenge(s)

Using visualisations to prove a point

Using visualisations to increase awareness

Using visualisations to create value

Using visualisations to track performance

Building visualisations into business processes

Ecommerce Director

Large UK Publisher

Publishing is changing

“we have no third

party management strategy”

PIE Charts FTW?

Third

parties Enabled

Third

parties Disabled

Content breakdown by domains

PIE Charts FTW?

Third

parties Enabled

Third

parties Disabled

Content breakdown by domains

Waterfalls FTW?

Third

parties Enabled

Third

parties Disabled

Domain cloud by # requests

wordle.net

Domain cloud by sqrt ( loadtime )

“The Last Resort”

Success!

Meet Jane

Jane’s challenge(s)

Using visualisations to prove a point

Using visualisations to increase awareness

Using visualisations to create value

Using visualisations to track performance

Building visualisations into business processes

“We don’t have that many third

parties!”

Can we plot the relationships?

Request Map

http://requestmap.webperf.tools/render/150930_6C_8e18a8699be0287083cc5f121a0b18f4/#

Request Map

http://requestmap.webperf.tools/render/151015_WZ_e40a3a8415ac2ca5d1b49726fa3dfd6b#

“ requestmap

is the most powerful visualisation we have”

“it has been fundamental in the performance mind

set shift at Marks and Spencer”

Andrew Neilson

PerfOps

| marksandspencer.com

Meet Jane

Jane’s challenge

Using visualisations to prove a point

Using visualisations to increase awareness

Using visualisations to create value

Using visualisations to track performance

Building visualisations into business processes

We need the ads for revenue

$$$

Can we show when the ads appear?

…without trawling filmstrips…

https://github.com/zeman/perfmap

Perfmap

Heatmap

http://heatmap.webperf.tools/render/151015_VV_0340c8912414b603853c30bdd04e79d7/60700

Performance

sold to business

Meet Jane

Jane’s challenge

Using visualisations to prove a point

Using visualisations to increase awareness

Using visualisations to create value

Using visualisations to track performance

Building visualisations into business processes

So what have we got?

point

in

time

live

trends

one page

whole site

some pages

requires

technical

understanding

requires

some

understanding

intuitive

waterfall

filmstrip

heatmap

requestmap

ops dash

?

http://calendar.perfplanet.com/2014/graph

your

web

performance

metrics/

F/OSS Performance Dashboard

Commercial Performance Dashboard

Meet Jane

Jane’s challenge

Using visualisations to prove a point

Using visualisations to increase awareness

Using visualisations to create value

Using visualisations to track performance

Building visualisations into business processes

Too focussed?

https://www.flickr.com/photos/visualogist/3202396970/

So what have we got?

point

in

time

live

trends

one page

whole site

some pages

requires

technical

understanding

requires

some

understanding

intuitive

waterfall

filmstrip

heatmap

requestmap

perf

dash

ops dash

?

Using RUM Data

Google Analytics

ga

dev

tools.appspot.com/query

explorer/

New Relic

rpm.newrelic.com/ api /explore

mPulse

cloudlink.soasta.com/t5/Knowledge

Base/ mPulse

Query

API/ ba

p/17077 

Pingdom



exit rate

pageviews

relative performance

homepage

checkout page

product page

storefinder

search results

http://rumwall.webperf.tools/

Use what you’ve got &

make your own visualisations

So what have we got?

point

in

time

live

trends

one page

whole site

some pages

requires

technical

understanding

requires

some

understanding

intuitive

waterfall

filmstrip

heatmap

requestmap

perf

dash

ops dash

rum wall

Meet Jane

Jane’s challenge

Using visualisations to prove a point

Using visualisations to increase awareness

Using visualisations to create value

Using visualisations to track performance

Building visualisations into business processes

analysis is only the beginning…

Visualize build changes

https://www.youtube.com/watch?v=UMnZiTL0tUc

Visualize on error

https://speakerdeck.com/aemcknig/crafting

performance

alerting

tools

Meet Jane

Jane’s challenge

Using visualisations to prove a point

Using visualisations to increase awareness

Using visualisations to create value

Using visualisations to track performance

Building visualisations into business processes

Don’t fear failure

Help is there

http://helpmeviz.com/

• webpagetest.org –

you know this one

• heatmap.webperf.tools

–

red means slow

• requestmap.webperf.tools

–

plot your domains

• rumwall.webperf.tools

–

dashboard your analytics

Use the right tools for the job

• g raphite

graphite.wikidot.com

• g raphene

github.com/ jondot / graphene

• a nd more

bit.ly/ foss_viz

Create your own

Information Is Beautiful –

David McCandless

Data Visualizations

Noah Iliinsky

Storytelling with Data

Cole Nussbaumer

Knaflic

Homework

more technical

Thanks!

@ SimonHearne

slideshare.net/ SimonHearne

Break

You are here