speed is essential for a great web experience
Post on 12-Jul-2015
5.170 Views
Preview:
TRANSCRIPT
http://www.flickr.com/photos/barkaway/342359810
Speed is Essential for a Great Web Experience
Andy Davies NCC Group
https://www.flickr.com/photos/joelhughes/8743984985
http://www.flickr.com/photos/randomidea/247994072
Performance isn’t always a priority
https://www.flickr.com/photos/sharynmorrow/643126727
“Has it loaded yet?”
100ms1s 10s
Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
Instan
tSea
mless
Yawn!
How we perceive response times
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.
“50% more concentration when using badly performing web sites”
Foviance
http://www.flickr.com/photos/yourdon/3366991042
Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
Delay increases abandonment rate...
…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
We’re more tolerant as we get further into funnels
Less Tolerant
More Tolerant
and suspicious if something’s too fast
and suspicious if something’s too fast
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
Faster experiences improve conversion
Walmart 2012
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
Bing carried out some experiments
+1s - 2.8%
$/
Shopzilla cut page load time by 5 seconds!
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
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
�
But I’m frustrated…
http://www.flickr.com/photos/sybrenstuvel/2468506922
The Web is Too Slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
Too many sites are too slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
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
“We’re not being deliberate about performance”! Tim Kadlec
https://www.flickr.com/photos/lukew/7382528728
But only if we build it that way…
http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg
We need to understand our fundamental building blocks
https://www.flickr.com/photos/ogimogi/2253657555
Everyone has fast broadband now… Right?
https://www.flickr.com/photos/98640399@N08/9287370881
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
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
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
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
Which will be faster?
1Mbps 10Mbps
Which will be faster?
1Mbps 10Mbps
Which will be faster?
1Mbps 10Mbps/ 28ms RTT / 280ms RTT
We often think of the network as a pipe
https://www.flickr.com/photos/63567936@N00/4181042889
that’s sometimes really bad
https://www.flickr.com/photos/chesh2000/4487000196
but the reality is closer to
http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_0492.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
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
http://www.vectortemplates.comBT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml
Latency increases with distance
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
There’s the last mile latency too (and routers, other networking kit, mobile latencies too)
https://www.flickr.com/photos/kiwanja/3170292282
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
Latency is one of our greatest enemies
https://www.flickr.com/photos/jjvaca/728072059
We can cheat the latency penalty (sometimes)
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
User gets feedback
User gets feedback
Network request still in progress
But there’s plenty of recipes to work around it
Some of the optimisations are hacks!
https://www.flickr.com/photos/rocketnumber9/13695281
Browsers support more parallel connections
Old browsers - 2 parallel connections
Today’s browsers - 4 plus connections
We split resources across domains
www.bbc.co.uk!static.bbci.co.uk!news.bbcimg.co.uk!node1.bbcimg.co.uk
DataURIs
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)
=
DataURIs
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)
=
Larger downloads (needs gzip)!Overrides browser priorities
Create CSS and JavaScript bundles
++++
= =
Create CSS and JavaScript bundles
++++
= =More to download and parse
Create CSS and JavaScript bundles
++++
= =More to download and parse x+!
!
Whole bundle is invalidated if a
single file changes
CSS Sprites
CSS Sprites
To get just one sprite …
CSS Sprites
Browser must download and decode the whole image
To get just one sprite …
There’s a tension between development and delivery
https://www.flickr.com/photos/domiriel/7376397968
Build tools and optimisation services help plug gaps
and won’t be going away…
But couldn’t we be more efficient?
https://www.flickr.com/photos/belsymington/4102783610
HTTP/2(Evolved from Google’s SPDY)
Single multiplexed connection to host
HTTP/1.1
HTTP/2
Multiplexing offers interesting possibilities
How much of an image do we need to make it usable - 5%?
Experiment by John Mellor at Google
How much of an image do we need to make it usable - 15%?
How much of an image do we need to make it usable - 25%?
How much of an image do we need to make it usable - 80%?
There are some questions over the user experience with progressive images
How much of an image do we need to make it usable - 80%?
HTTP/1.1 - browser sets priorities
HTTP/2 - browser hints priorities server can override them
Adds header compression too
Google and Mozilla will only support over HTTPS
http://www.flickr.com/photos/forsytht/4553656244
HTTP/2 rollouts will start next year - we still have a lot to learn
http://www.flickr.com/photos/atoach/6014917153
???
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>
… into Document Object Model (DOM)
html
head body
meta link script title h1 p
img
Convert CSS …
body { font-size: 16px } h1 { text-decoration: underline} p { font-weight: bold } p > span { color: #000 } img { border: 1px solid #ccc }
… 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
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
Render the Page
HTML
CSS
DOM
CSSOM
Render!Tree
Layout Paint
But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!Tree
Layout PaintJavaScript
HTML
CSS
DOM
CSSOM
Render!Tree
Layout PaintJavaScript
DOM
CSSOM
JavaScript
JavaScript blocks DOM construction!CSSOM construction blocks JavaScript execution
But what about JavaScript?
Let’s pretend we’re a browser (with the preloader switched off)
https://www.flickr.com/photos/mozillaeu/11171168996
Two key rules to remember
Constructing CSS Object Model (CSSOM) blocks JavaScript execution!!
JavaScript blocks DOM construction
GET example.html HTTP/1.1
GET example.html HTTP/1.1
GET example.html HTTP/1.1
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
http://www.flickr.com/photos/nozzer/3990622685
Pre-loader hides some of the latency penalty So our pages load 20% faster
Structure pages for the browser’s critical path
HTML
CSS
DOM
CSSOM
Render!Tree
Layout PaintJavaScript
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
!
. . . !
<script src="restofscript.js"></script> !
</body> </html> One file or many?
Load remaining JavaScript late as possible
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
HTML
CSS
DOM
CSSOM
Render!Tree
Layout PaintJavaScript Render!Tree
HTML
CSS
DOM
CSSOM
Render!Tree
Layout PaintJavaScript Render!Tree
Fonts and background images discovered
when render tree builds
And we all hate this… right?
Use font foundries that prioritise our visitor’s experience
http://www.flickr.com/photos/splorp/4951916342
https://www.flickr.com/photos/steveweaver/2915792034
Browsers pull resources from the server but …
https://www.flickr.com/photos/christian_bachellier/582457911
What if the server could push them?
Browser Server
Server builds page
GET index.html
<html><head>…
Loading a web page
Request other page resources
Browser Server
Server builds page
GET index.html
<html><head>…
Network Idle
Request other page resources
Loading a web page
Browser Server
Server builds page
GET index.html
<html><head>…
Server Push
Request other page resources
Push critical resource e.g. CSS
Browser Server
Server builds page
GET index.html
<html><head>…
Request other page resources
Push critical resource e.g. CSS
Server Push
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
We need to be deliberate, to design for performance
https://www.flickr.com/photos/9760699@N08/3748770917
http://www.flickr.com/photos/communityfriend/2342578485
Set performance budgets
Setting a budget
An event that matters to the visitor!within a set time!under defined network conditions
“Usable within 10 seconds on GPRS connection”!BBC News
“SpeedIndex under 1000”!Paul Irish
Could use page size or number of objects but…
…how well would they work here?
Measure frequently - during build and in live
http://www.flickr.com/photos/chandramarsono/4324373384
Make performance visible
Lara Hogan, Etsy
������ ����������������!��������� ���������������������������
Lara Hogan, Etsy
http://lafikl.github.io/perfBar
Compare against competitors
The Guardian display their performance on a monitor by FD’s office
Remember the constraints of our medium
https://www.flickr.com/photos/33649815@N03/3367739514
https://www.flickr.com/photos/basheertome/4762529213
http://www.flickr.com/photos/nzbuu/4093456029
Thank You!
@andydavies andy.davies@nccgroup.com
top related