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
![Page 1: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/1.jpg)
SPEEDMATTERS
![Page 2: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/2.jpg)
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
![Page 3: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/3.jpg)
Bing did some experiments
+1s - 2.8%
+1s$/ Time to click +2s
Bing
![Page 4: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/4.jpg)
![Page 5: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/5.jpg)
WalmartWallmart made some improvements
-1s +2%
![Page 6: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/6.jpg)
Shopzilla
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
From 6-9s down to 1.2s
![Page 7: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/7.jpg)
Strangeloop Networks
![Page 8: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/8.jpg)
Strangeloop Networks
![Page 9: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/9.jpg)
Strangeloop Networks
![Page 10: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/10.jpg)
The network
![Page 11: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/11.jpg)
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)
![Page 12: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/12.jpg)
300k image downloading slowed 40x
Browser Server
![Page 13: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/13.jpg)
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
![Page 14: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/14.jpg)
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)
![Page 15: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/15.jpg)
![Page 16: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/16.jpg)
The front-endreally matters
![Page 17: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/17.jpg)
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
![Page 18: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/18.jpg)
Still got to fix the backend!
![Page 19: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/19.jpg)
327k (32%) bigger in one year
![Page 20: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/20.jpg)
Onload ≠ User perception
2.0s 88% rendered 5.2s window.onload
![Page 21: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/21.jpg)
So how do wemeasure speed?
![Page 22: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/22.jpg)
Uptime monitoring (Pingdom)
![Page 23: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/23.jpg)
Synthetic testing
![Page 24: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/24.jpg)
Only the HTML request measured
![Page 25: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/25.jpg)
Real user monitoring (RUM)
![Page 26: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/26.jpg)
New Relic RUM
![Page 27: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/27.jpg)
![Page 28: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/28.jpg)
APDEX
![Page 29: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/29.jpg)
GA site speed
![Page 30: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/30.jpg)
GA site speed
![Page 31: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/31.jpg)
GA site speed
![Page 32: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/32.jpg)
GA Site speed sample rate
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-XX']); _gaq.push(['_setSiteSpeedSampleRate', 100]); _gaq.push(['_trackPageview']);
![Page 33: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/33.jpg)
![Page 34: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/34.jpg)
![Page 35: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/35.jpg)
![Page 36: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/36.jpg)
1
2 3
4
5 6
10
8
9
4
11
13
12
7
14
7
![Page 37: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/37.jpg)
![Page 38: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/38.jpg)
GA User timing
_gaq.push([‘_trackTiming’, ‘jQuery’,‘Load Library’, 20, ‘Google CDN’,50]);
![Page 39: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/39.jpg)
GA User timing
![Page 40: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/40.jpg)
GA User timing
![Page 41: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/41.jpg)
Performance benchmarking
![Page 42: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/42.jpg)
How do I make it faster?
![Page 43: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/43.jpg)
Google PageSpeed Insight
![Page 44: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/44.jpg)
WebPagetest
![Page 45: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/45.jpg)
stevesouders.com/hpws/
![Page 46: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/46.jpg)
browserdiet.com
![Page 47: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/47.jpg)
How do I make it faster acrossall those devices?
![Page 48: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/48.jpg)
![Page 49: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/49.jpg)
Responsive Design
![Page 50: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/50.jpg)
![Page 51: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/51.jpg)
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
![Page 52: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/52.jpg)
Responsive Images using Picturefill & WebP
![Page 53: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/53.jpg)
Dynamic image generation
![Page 54: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/54.jpg)
CSS focal point
Adam Bradley
![Page 55: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/55.jpg)
github.com/blog/
Adaptive Design
![Page 56: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/56.jpg)
Device detection (WURFL)
![Page 57: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/57.jpg)
Going mobile first is harder than you think
![Page 58: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/58.jpg)
igvita.com
![Page 59: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/59.jpg)
igvita.com
![Page 60: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/60.jpg)
igvita.com
![Page 61: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/61.jpg)
![Page 62: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/62.jpg)
![Page 63: Speed matters - measuring front-end web performance](https://reader034.vdocuments.site/reader034/viewer/2022051322/53f00dda8d7f72a64f8b45df/html5/thumbnails/63.jpg)
speedcurve.com@markzeman