speed matters - measuring front-end web performance
DESCRIPTION
Why speed matters, examples of the impact saving a few seconds of load time has had on revenue and engagement. The network constraints and what makes the web slow? Bandwidth, latency and it's fundamental impact on the speed of the web. An overview of tools for measuring performance, uptime monitoring, real user monitoring and performance benchmarking. How to make your website faster. Optimization tools and techniques. Muti-device challenges. Responsive vs Adaptive and delivering to mobile within a second. Drop that donut superman! Learn more on the SpeedCurve blog http://speedcurve.com/blog/TRANSCRIPT
SPEEDMATTERS
100ms 1s 10s
Response Time in Man-computer Conversational TransactionsRobert B. Miller, 1968
Instant
Seamless Yawn!
Our perception of response time
3s - RecommendedLoad Time
6.5s - Alexa 2000Fall 2012
Miller Response Time 1968
Bing did some experiments
+1s - 2.8%
+1s$/ Time to click +2s
Bing
WalmartWallmart made some improvements
-1s +2%
Shopzilla
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
From 6-9s down to 1.2s
Strangeloop Networks
Strangeloop Networks
Strangeloop Networks
The network
1 2 3 4 5 6 7 8 9 10
1.36s1.37s1.38s1.39s1.41s1.44s1.50s1.63s
1.95s
3.11s
Page
Loa
d T
ime
Bandwidth (Mbps)
Bandwidth doesn’t matter(much)
300k image downloading slowed 40x
Browser Server
Minimum round trips to download a file
71kB
143kB
214kB
285kB
1 2 3 4 5 6 7 8 9 10 11
(TCP Segments)
Round Trips
Size
Impact of latency
1
2
3
4
0 20 40 60 80 100 120 140 160 180 200 220 240
Page
Loa
d T
ime
(s)
Round Trip Time (ms)
The front-endreally matters
80% of time is front-end
Measured via residential ADSL line using Google Chrome
news.bbc.co.uk
ebay.co.uk
debenhams.co.uk
direct.gov.uk
amazon.co.uk
mumsnet.com
guardian.co.uk
0 1 2 3 4 5
BackendFrontend
Still got to fix the backend!
327k (32%) bigger in one year
Onload ≠ User perception
2.0s 88% rendered 5.2s window.onload
So how do wemeasure speed?
Uptime monitoring (Pingdom)
Synthetic testing
Only the HTML request measured
Real user monitoring (RUM)
New Relic RUM
APDEX
GA site speed
GA site speed
GA site speed
GA Site speed sample rate
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-XX']); _gaq.push(['_setSiteSpeedSampleRate', 100]); _gaq.push(['_trackPageview']);
1
2 3
4
5 6
10
8
9
4
11
13
12
7
14
7
GA User timing
_gaq.push([‘_trackTiming’, ‘jQuery’,‘Load Library’, 20, ‘Google CDN’,50]);
GA User timing
GA User timing
Performance benchmarking
How do I make it faster?
Google PageSpeed Insight
WebPagetest
stevesouders.com/hpws/
browserdiet.com
How do I make it faster acrossall those devices?
Responsive Design
1. Build mobile first responsive designs
2. Keep CSS background images in scoped media queries
3. Conditionally load JavaScript and even HTML fragments based on screen size and capabilities
4. Implement a responsive images solution
5. Handle retina images very carefully and err on the side of performance
Jason Grigsby
Responsive Images using Picturefill & WebP
Dynamic image generation
CSS focal point
Adam Bradley
github.com/blog/
Adaptive Design
Device detection (WURFL)
Going mobile first is harder than you think
igvita.com
igvita.com
igvita.com
speedcurve.com@markzeman