better web performance visualisations

38
Better web performance visualisations @SimonHearne | London Webperf Meetup | 7/7/2015

Upload: simon-hearne

Post on 12-Aug-2015

303 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Better web performance visualisations

Betterweb performance

visualisations

@SimonHearne | London Webperf Meetup | 7/7/2015

Page 2: Better web performance visualisations
Page 3: Better web performance visualisations

we’re all salespeople

Page 4: Better web performance visualisations

#perfmatters#webperf

#sitespeed@LDNWebPerf

Page 5: Better web performance visualisations
Page 6: Better web performance visualisations

flic.kr/p/7MCt3m

Page 7: Better web performance visualisations

flic.kr/p/dAExqb

Page 8: Better web performance visualisations
Page 9: Better web performance visualisations
Page 10: Better web performance visualisations

flic.kr/p/5B4TaF

Page 11: Better web performance visualisations
Page 12: Better web performance visualisations
Page 13: Better web performance visualisations

I II III IV

x y x y x y x y

10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58

8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76

13.0 7.58 13.0 8.74 13.0 12.74 8.0 7.71

9.0 8.81 9.0 8.77 9.0 7.11 8.0 8.84

11.0 8.33 11.0 9.26 11.0 7.81 8.0 8.47

14.0 9.96 14.0 8.10 14.0 8.84 8.0 7.04

6.0 7.24 6.0 6.13 6.0 6.08 8.0 5.25

4.0 4.26 4.0 3.10 4.0 5.39 19.0 12.50

12.0 10.84 12.0 9.13 12.0 8.15 8.0 5.56

7.0 4.82 7.0 7.26 7.0 6.42 8.0 7.91

5.0 5.68 5.0 4.74 5.0 5.73 8.0 6.89

Anscombe’s Quartet

Page 14: Better web performance visualisations

Anscombe’s Quartet

Page 15: Better web performance visualisations
Page 16: Better web performance visualisations
Page 17: Better web performance visualisations

flic.kr/p/7MCt3m

Page 18: Better web performance visualisations

infographic = hand-made

visualisation = computer-made

Page 19: Better web performance visualisations

point-in-time livetrends

on

e p

age

whole

sit

eso

me p

ages

requirestechnical

understanding

requiressome

understanding

intuitive

waterfall

filmstrip

ops dash

Page 20: Better web performance visualisations
Page 21: Better web performance visualisations

point-in-time livetrends

on

e p

age

whole

sit

eso

me p

ages

requirestechnical

understanding

requiressome

understanding

intuitive

waterfall

filmstrip

pie-charts

ops dash

Page 22: Better web performance visualisations
Page 23: Better web performance visualisations

point-in-time livetrends

on

e p

age

whole

sit

eso

me p

ages

requirestechnical

understanding

requiressome

understanding

intuitive

waterfall

filmstrip

pie-charts

heatmap

ops dash

Page 24: Better web performance visualisations
Page 25: Better web performance visualisations

point-in-time livetrends

on

e p

age

whole

sit

eso

me p

ages

requirestechnical

understanding

requiressome

understanding

intuitive

waterfall

filmstrip

pie-charts

heatmap

heatmap dash

ops dash

Page 26: Better web performance visualisations
Page 27: Better web performance visualisations
Page 28: Better web performance visualisations

point-in-time livetrends

on

e p

age

whole

sit

eso

me p

ages

requirestechnical

understanding

requiressome

understanding

intuitive

waterfall

filmstrip

pie-charts

heatmap

requestmap

ops dash

heatmap dash

Page 29: Better web performance visualisations
Page 30: Better web performance visualisations

point-in-time livetrends

on

e p

age

whole

sit

eso

me p

ages

requirestechnical

understanding

requiressome

understanding

intuitive

waterfall

filmstrip

pie-charts

heatmap

requestmap

JS Timeline

ops dash

heatmap dash

Page 31: Better web performance visualisations
Page 32: Better web performance visualisations

point-in-time livetrends

on

e p

age

whole

sit

eso

me p

ages

requirestechnical

understanding

requiressome

understanding

intuitive

waterfall

filmstrip

pie-charts

heatmap

requestmap

JS Timeline

timeline scrub

ops dash

heatmap dash

Page 33: Better web performance visualisations

exit rate

pag

evie

ws

relative performance

homepage

checkout page

product page

storefinder

search results

Page 34: Better web performance visualisations

point-in-time livetrends

on

e p

age

whole

sit

eso

me p

ages

requirestechnical

understanding

requiressome

understanding

intuitive

waterfall

filmstrip

pie-charts

heatmap

requestmap

JS Timeline

timeline scrub

ops dash

heatmap dash

RUM wall

?

Page 35: Better web performance visualisations

Visualisation Requirements

SimpleMeaningfulObviousRepeatableExcellent

Page 36: Better web performance visualisations

Tools Used

webpagetest.org – you know this oneheatmap.webperf.tools – red means slowrequestmap.webperf.tools – plot your domainsyellowlab.tools – analyse performance bottleneckslab.speedcurve.com – visualise performance trends

Page 37: Better web performance visualisations

Further Reading

Data Visualizations - Noah Iliinsky (basic)Information Is Beautiful – David McCandless (pretty)

Page 38: Better web performance visualisations

Thanks!@SimonHearne

slideshare.net/SimonHearne

simon andy pizza

you are here