• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Speed matters - measuring front-end web performance
 

Speed matters - measuring front-end web performance

on

  • 2,182 views

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 ...

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/

Statistics

Views

Total Views
2,182
Views on SlideShare
2,153
Embed Views
29

Actions

Likes
7
Downloads
27
Comments
0

6 Embeds 29

http://127.0.0.1 11
http://imarkethost.com 8
http://www.google.com 7
http://www.socializedby.me 1
http://www.pulse.me 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Speed matters - measuring front-end web performance Speed matters - measuring front-end web performance Presentation Transcript

  • SPEED MATTERS
  • 100ms 1s 10s Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968 Instant Seamless Yawn! Our perception of response time 3s - Recommended Load Time 6.5s - Alexa 2000 Fall 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.50s 1.63s 1.95s 3.11s PageLoadTime 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 PageLoadTime(s) Round Trip Time (ms)
  • The front-end really matters
  • 80% of time is front-end 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 Backend Frontend
  • 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 we measure 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 across all 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