![Page 1: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/barkaway/342359810
Speed is Essential for a Great Web Experience
Andy Davies NCC Group
![Page 2: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/2.jpg)
![Page 3: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/3.jpg)
https://www.flickr.com/photos/joelhughes/8743984985
![Page 4: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/4.jpg)
http://www.flickr.com/photos/randomidea/247994072
Performance isn’t always a priority
![Page 5: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/5.jpg)
https://www.flickr.com/photos/sharynmorrow/643126727
“Has it loaded yet?”
![Page 6: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/6.jpg)
100ms1s 10s
Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
Instan
tSea
mless
Yawn!
How we perceive response times
![Page 7: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/7.jpg)
100ms1s 10s
Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
Instan
tSea
mless
Yawn!
How we perceive response times
Only 12% of the top 100 (US) retail sites rendered feature content in less than 3 seconds.
![Page 8: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/8.jpg)
“50% more concentration when using badly performing web sites”
Foviance
http://www.flickr.com/photos/yourdon/3366991042
![Page 9: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/9.jpg)
Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
Delay increases abandonment rate...
![Page 10: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/10.jpg)
…and has a negative impact on brand perception
Tesco’s ‘Fast’
Tesco’s ‘Slow’
Mobile Web Stress: Understanding the Neurological Impact of Poor Performance, Tammy Everts, Radware
![Page 11: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/11.jpg)
We’re more tolerant as we get further into funnels
Less Tolerant
More Tolerant
![Page 12: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/12.jpg)
and suspicious if something’s too fast
![Page 13: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/13.jpg)
and suspicious if something’s too fast
![Page 14: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/14.jpg)
Reader panel (3,000 people) rated speed (fast page load time) as their second most important driver!
Speed had the highest percentage of people saying it was VERY important to them
![Page 15: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/15.jpg)
Faster experiences improve conversion
Walmart 2012
![Page 16: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/16.jpg)
increased conversions by 10%
http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds
Shaved 1 second off median home page time!6 seconds off 98th percentile
![Page 17: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/17.jpg)
Bing carried out some experiments
+1s - 2.8%
$/
![Page 18: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/18.jpg)
Shopzilla cut page load time by 5 seconds!
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
![Page 19: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/19.jpg)
Seatwave - below 4 secs vs. above 4 secs
http://www.slideshare.net/pdyball/velocity-eu-2013-what-is-the-velocity-of-an-unladen-swallow
✔
+28% 2x 1/6
�
![Page 20: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/20.jpg)
But I’m frustrated…
http://www.flickr.com/photos/sybrenstuvel/2468506922
![Page 21: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/21.jpg)
The Web is Too Slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
![Page 22: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/22.jpg)
![Page 23: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/23.jpg)
![Page 24: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/24.jpg)
Too many sites are too slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
![Page 25: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/25.jpg)
and it’s getting worse!
Only 12% of the top 100 (US) retail sites rendered feature content in less than 3 seconds. !!
Year-on-year the median page has slowed down by 23%
Tammy Everts - Radware State of the Union Fall 2014
![Page 26: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/26.jpg)
“We’re not being deliberate about performance”! Tim Kadlec
https://www.flickr.com/photos/lukew/7382528728
![Page 27: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/27.jpg)
But only if we build it that way…
http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg
![Page 28: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/28.jpg)
We need to understand our fundamental building blocks
https://www.flickr.com/photos/ogimogi/2253657555
![Page 29: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/29.jpg)
Everyone has fast broadband now… Right?
https://www.flickr.com/photos/98640399@N08/9287370881
![Page 30: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/30.jpg)
Spee
d (M
bps)
0
2
4
6
8
10
12
14
16
18
Nov 08
Apr 09
Nov 10
May 10
Nov 10
May 11
Nov 11
May 12
Nov 12
May 13
Nov 13
UK Broadband speeds are rising…
Ofcom
![Page 31: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/31.jpg)
Vis
itors
(%
)
Load Time (s)
1 2 3 4 5 6 7 8 9 10
1%3%3%
2%
6%
8%
13%
27%
8%
6%
But ‘Real Users’ experience varies
![Page 32: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/32.jpg)
Vis
itors
(%
)
Load Time (s)
1 2 3 4 5 6 7 8 9 10 > 10
24%
1%3%3%
2%
6%
8%
13%
27%
8%
6%
Vis
itors
(%
)
Load Time (s)
1 2 3 4 5 6 7 8 9 10 > 10
But ‘Real Users’ experience varies
![Page 33: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/33.jpg)
and bandwidth (often) isn’t the bottleneck
news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artefact of testing)
10s0s 5s
0.5
1.0
1.5
2.0
![Page 34: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/34.jpg)
Which will be faster?
1Mbps 10Mbps
![Page 35: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/35.jpg)
Which will be faster?
1Mbps 10Mbps
![Page 36: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/36.jpg)
Which will be faster?
1Mbps 10Mbps/ 28ms RTT / 280ms RTT
![Page 37: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/37.jpg)
We often think of the network as a pipe
https://www.flickr.com/photos/63567936@N00/4181042889
![Page 38: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/38.jpg)
that’s sometimes really bad
https://www.flickr.com/photos/chesh2000/4487000196
![Page 39: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/39.jpg)
but the reality is closer to
http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_0492.jpg
![Page 40: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/40.jpg)
“More Bandwidth Doesn’t Matter (much)” Mike Belshe
Page
Loa
d T
ime
Bandwidth (Mbps)
1 2 3 4 5 6 7 8 9 10
1.36s1.37s1.38s1.39s1.41s1.44s1.50s1.63s
1.95s
3.11s
![Page 41: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/41.jpg)
Latency has linear impact on user experiencePa
ge L
oad
Tim
e (s
)
1
2
3
4
Round Trip Time (ms)
0 20 40 60 80 100 120 140 160 180 200 220 240
![Page 42: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/42.jpg)
http://www.vectortemplates.comBT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml
Latency increases with distance
![Page 43: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/43.jpg)
http://www.vectortemplates.comBT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml
Latency increases with distance
81ms
201ms
156ms
266ms
232ms
28ms
![Page 44: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/44.jpg)
There’s the last mile latency too (and routers, other networking kit, mobile latencies too)
https://www.flickr.com/photos/kiwanja/3170292282
![Page 45: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/45.jpg)
TCP and the Lower Bound of Web Performance John Rauser
Larger downloads == more round trips
71kB
143kB
214kB
285kB
1 2 3 4 5 6 7 8 9 10 11
(TCP Segments)
Round Trips
Size
![Page 46: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/46.jpg)
Latency is one of our greatest enemies
https://www.flickr.com/photos/jjvaca/728072059
![Page 47: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/47.jpg)
We can cheat the latency penalty (sometimes)
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
![Page 48: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/48.jpg)
![Page 49: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/49.jpg)
User gets feedback
![Page 50: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/50.jpg)
User gets feedback
Network request still in progress
![Page 51: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/51.jpg)
But there’s plenty of recipes to work around it
![Page 52: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/52.jpg)
Some of the optimisations are hacks!
https://www.flickr.com/photos/rocketnumber9/13695281
![Page 53: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/53.jpg)
Browsers support more parallel connections
Old browsers - 2 parallel connections
Today’s browsers - 4 plus connections
![Page 54: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/54.jpg)
We split resources across domains
www.bbc.co.uk!static.bbci.co.uk!news.bbcimg.co.uk!node1.bbcimg.co.uk
![Page 55: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/55.jpg)
DataURIs
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)
=
![Page 56: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/56.jpg)
DataURIs
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)
=
Larger downloads (needs gzip)!Overrides browser priorities
![Page 57: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/57.jpg)
Create CSS and JavaScript bundles
++++
= =
![Page 58: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/58.jpg)
Create CSS and JavaScript bundles
++++
= =More to download and parse
![Page 59: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/59.jpg)
Create CSS and JavaScript bundles
++++
= =More to download and parse x+!
!
Whole bundle is invalidated if a
single file changes
![Page 60: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/60.jpg)
CSS Sprites
![Page 61: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/61.jpg)
CSS Sprites
To get just one sprite …
![Page 62: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/62.jpg)
CSS Sprites
Browser must download and decode the whole image
To get just one sprite …
![Page 63: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/63.jpg)
There’s a tension between development and delivery
https://www.flickr.com/photos/domiriel/7376397968
![Page 64: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/64.jpg)
Build tools and optimisation services help plug gaps
and won’t be going away…
![Page 65: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/65.jpg)
But couldn’t we be more efficient?
https://www.flickr.com/photos/belsymington/4102783610
![Page 66: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/66.jpg)
HTTP/2(Evolved from Google’s SPDY)
![Page 67: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/67.jpg)
Single multiplexed connection to host
HTTP/1.1
HTTP/2
![Page 68: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/68.jpg)
Multiplexing offers interesting possibilities
![Page 69: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/69.jpg)
How much of an image do we need to make it usable - 5%?
Experiment by John Mellor at Google
![Page 70: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/70.jpg)
How much of an image do we need to make it usable - 15%?
![Page 71: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/71.jpg)
How much of an image do we need to make it usable - 25%?
![Page 72: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/72.jpg)
How much of an image do we need to make it usable - 80%?
![Page 73: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/73.jpg)
There are some questions over the user experience with progressive images
How much of an image do we need to make it usable - 80%?
![Page 74: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/74.jpg)
HTTP/1.1 - browser sets priorities
![Page 75: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/75.jpg)
HTTP/2 - browser hints priorities server can override them
![Page 76: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/76.jpg)
Adds header compression too
![Page 77: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/77.jpg)
Google and Mozilla will only support over HTTPS
http://www.flickr.com/photos/forsytht/4553656244
![Page 78: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/78.jpg)
HTTP/2 rollouts will start next year - we still have a lot to learn
http://www.flickr.com/photos/atoach/6014917153
![Page 79: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/79.jpg)
???
![Page 80: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/80.jpg)
Covert HTML …<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <script src="script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> </body> </html>
![Page 81: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/81.jpg)
… into Document Object Model (DOM)
html
head body
meta link script title h1 p
img
![Page 82: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/82.jpg)
Convert CSS …
body { font-size: 16px } h1 { text-decoration: underline} p { font-weight: bold } p > span { color: #000 } img { border: 1px solid #ccc }
![Page 83: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/83.jpg)
… into CSS Object Model (CSSOM)
body
h1 p
span
font-size: 16px
font-size: 16px text-decoration: underline
font-size: 16px font-weight: bold
font-size: 16px font-weight: bold color: #000
imgfont-size: 16px border: 1px solid #ccc
![Page 84: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/84.jpg)
Combine DOM and CSSOM to build Render Tree
body
h1 p
img
font-size: 16px text-decoration: underline
font-size: 16px font-weight: bold border: 1px solid #ccc
font-size: 16px font-weight: bold
![Page 85: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/85.jpg)
Render the Page
HTML
CSS
DOM
CSSOM
Render!Tree
Layout Paint
![Page 86: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/86.jpg)
But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!Tree
Layout PaintJavaScript
![Page 87: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/87.jpg)
HTML
CSS
DOM
CSSOM
Render!Tree
Layout PaintJavaScript
DOM
CSSOM
JavaScript
JavaScript blocks DOM construction!CSSOM construction blocks JavaScript execution
But what about JavaScript?
![Page 88: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/88.jpg)
Let’s pretend we’re a browser (with the preloader switched off)
https://www.flickr.com/photos/mozillaeu/11171168996
![Page 89: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/89.jpg)
Two key rules to remember
Constructing CSS Object Model (CSSOM) blocks JavaScript execution!!
JavaScript blocks DOM construction
![Page 90: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/90.jpg)
GET example.html HTTP/1.1
![Page 91: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/91.jpg)
GET example.html HTTP/1.1
![Page 92: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/92.jpg)
GET example.html HTTP/1.1
![Page 93: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/93.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 94: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/94.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 95: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/95.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
GET /styles.css HTTP/1.1
![Page 96: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/96.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 97: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/97.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
GET /more-styles.css HTTP/1.1
![Page 98: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/98.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 99: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/99.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
GET /script.js HTTP/1.1
![Page 100: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/100.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 101: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/101.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 102: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/102.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
Must wait for:!1. CSS download and OM construction!2. JS download and execution
![Page 103: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/103.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 104: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/104.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
GET /another-script.js HTTP/1.1
![Page 105: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/105.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 106: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/106.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 107: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/107.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
Must wait for:!1. JS download and execution
![Page 108: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/108.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 109: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/109.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
GET /image.jpg HTTP/1.1
![Page 110: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/110.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
![Page 111: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/111.jpg)
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>
example.html
GET /image-2.jpg HTTP/1.1
![Page 112: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/112.jpg)
http://www.flickr.com/photos/nozzer/3990622685
Pre-loader hides some of the latency penalty So our pages load 20% faster
![Page 113: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/113.jpg)
Structure pages for the browser’s critical path
HTML
CSS
DOM
CSSOM
Render!Tree
Layout PaintJavaScript
![Page 114: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/114.jpg)
Get the <head> straight<!doctype html> <html> <head> <meta charset="utf-8"> <title>This is my title<title> !
<link rel="stylesheet" href="styles.css" type="text/css" /> !
<script src="script.js"></script> . . . </head>
CSS before JS!Ideally one file
Only JS needed for page load
![Page 115: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/115.jpg)
!
. . . !
<script src="restofscript.js"></script> !
</body> </html> One file or many?
Load remaining JavaScript late as possible
![Page 116: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/116.jpg)
Use async attribute to avoid blocking DOM
!
<script async src="myscript.js"></script>
http://caniuse.com/script-async
Widely supported (82%) doesn’t incur delays of using inline script to load other scripts e.g. Google Analytics snippet
![Page 117: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/117.jpg)
HTML
CSS
DOM
CSSOM
Render!Tree
Layout PaintJavaScript Render!Tree
![Page 118: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/118.jpg)
HTML
CSS
DOM
CSSOM
Render!Tree
Layout PaintJavaScript Render!Tree
Fonts and background images discovered
when render tree builds
![Page 119: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/119.jpg)
And we all hate this… right?
![Page 120: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/120.jpg)
Use font foundries that prioritise our visitor’s experience
http://www.flickr.com/photos/splorp/4951916342
![Page 121: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/121.jpg)
https://www.flickr.com/photos/steveweaver/2915792034
Browsers pull resources from the server but …
![Page 122: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/122.jpg)
https://www.flickr.com/photos/christian_bachellier/582457911
What if the server could push them?
![Page 123: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/123.jpg)
Browser Server
Server builds page
GET index.html
<html><head>…
Loading a web page
Request other page resources
![Page 124: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/124.jpg)
Browser Server
Server builds page
GET index.html
<html><head>…
Network Idle
Request other page resources
Loading a web page
![Page 125: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/125.jpg)
Browser Server
Server builds page
GET index.html
<html><head>…
Server Push
Request other page resources
Push critical resource e.g. CSS
![Page 126: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/126.jpg)
Browser Server
Server builds page
GET index.html
<html><head>…
Request other page resources
Push critical resource e.g. CSS
Server Push
![Page 127: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/127.jpg)
Browser Server
Server builds page
GET index.html
<html><head>…
Request other page resources
Push critical resource e.g. CSS
Server Push
Browser can reject push
![Page 128: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/128.jpg)
We need to be deliberate, to design for performance
https://www.flickr.com/photos/9760699@N08/3748770917
![Page 129: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/129.jpg)
http://www.flickr.com/photos/communityfriend/2342578485
Set performance budgets
![Page 130: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/130.jpg)
Setting a budget
An event that matters to the visitor!within a set time!under defined network conditions
![Page 131: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/131.jpg)
“Usable within 10 seconds on GPRS connection”!BBC News
![Page 132: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/132.jpg)
“SpeedIndex under 1000”!Paul Irish
![Page 133: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/133.jpg)
Could use page size or number of objects but…
![Page 134: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/134.jpg)
…how well would they work here?
![Page 135: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/135.jpg)
Measure frequently - during build and in live
http://www.flickr.com/photos/chandramarsono/4324373384
![Page 136: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/136.jpg)
Make performance visible
Lara Hogan, Etsy
![Page 137: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/137.jpg)
������ ����������������!��������� ���������������������������
Lara Hogan, Etsy
![Page 138: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/138.jpg)
http://lafikl.github.io/perfBar
![Page 139: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/139.jpg)
Compare against competitors
![Page 140: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/140.jpg)
The Guardian display their performance on a monitor by FD’s office
![Page 141: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/141.jpg)
Remember the constraints of our medium
https://www.flickr.com/photos/33649815@N03/3367739514
![Page 142: Speed is Essential for a Great Web Experience](https://reader030.vdocuments.net/reader030/viewer/2022032419/55a20a031a28aba0368b460c/html5/thumbnails/142.jpg)
https://www.flickr.com/photos/basheertome/4762529213