Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Speed is Essential for aGreat Web Experience@andydaviesPort 80 (#p80N)May 2012                           http://www.flickr....
But sometimes other concerns take priority...                            http://www.flickr.com/photos/randomidea/247994072
“Are we there yet?”                      http://www.flickr.com/photos/sharynmorrow/643126727
Our perception of response time  Instant       Seamless                                                   Yawn!100ms 1s   ...
Our perception of response time  Instant       Seamless                                                           Yawn!100...
“50% more concentration when using       badly performing web sites”                                               Fovianc...
Effect of delay on abandonment rate...      Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http...
Google conducted an experiment +400ms                     -0.6%
Bing did some experiments too     +1s                          $/    - 2.8%                                         +
Shopzilla cut page load time by 5 seconds!  +12%          +25%                                -50%   $$$                  ...
Measuring page load time...
Measure Real Users’ Experience                         27%                                                                ...
Measuring Real Users - Google AnalyticsRelies on Navigation Timing API, can add extra timing calls to page
Measuring Real Users - Torbit Insight
Measuring Real Users - Torbit Insight                    (Check out at Log Normal too)
Measuring Real Users - New Relic
webpagetest.org
Waterfall for bbc.co.uk/news
www.blaze.io/mobile
Bigger, Faster Servers?                          http://www.flickr.com/photos/br1dotcom/4297736794
80% plus of page load time is on front-end                                                                 Backend news.bb...
Fix slow server responses first    4 seconds!
Bandwidth (often) isn’t the bottleneck2.01.51.00.5  0s                   5s                                       10s     ...
Minimum round trips to download a file                                                             (TCP Segments)285kB214kB...
Speeding Things Up - The Basics                              CSS at top                              Compress             ...
Proportion of URLs that can be compressed          ☺                                          ☹            http://zoompf.c...
What’s the web made of?                                                         Images                                    ...
Bitmapped Images    JPEG                            PNG                           GIF       Optimise, Optimise, Optimise! ...
CSS Sprites                    +       background-position: -408px 0;       width: 128px;       height: 128px;            ...
Data-URIs<img width="128" height="128"src="data:image/PNG;base64,iVBORw0KGgoAAAANSUhEUgAAAIAA            ...              ...
New Devices, New Challenges...                2 x Resolution = 4 x Pixels!                           http://www.flickr.com/...
Look Ma, No Images!border-radius: 20px;background: linear-gradient(left, #f06, #ff0);   Watch mobile performance. Remember...
Vector Graphics FTW?          SVG: 12 KB vs PNG: 86KB
What about icon / pictogram fonts?                                  ★ ★                                  ☆ ☆              ...
display:none - still downloads images     “‪#p80n‬ you do get adverts on the smashingmag       site on smaller viewports. ...
Don’t forget about favicon.ico        1.4 seconds for favicon!
Don’t forget about favicon.ico           1.4 seconds for favicon! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"...
Don’t block the browser...                             http://www.flickr.com/photos/barteko/6128499314
news.bbcimg.co.uk                         static.bbc.co.ukBrowsers can download resources in parallel
But Sometimes... The Waterfall of Doom!                  2 seconds! (nearly)
Social buttons break...                          http://bit.ly/yRjX63
Social buttons break...                          http://bit.ly/yRjX63
Load Third Party scripts asynchronously <script type="text/javascript">   function()     var js = document.createElement(s...
Argh... My brain hurts!                     http://www.flickr.com/photos/corneveaux/3248566797
Don’t have to do it all by hand            http://www.flickr.com/photos/simeon_barkas/2557059247
Performance isn’t just for Christmas                     Measure          Optimise             Analyse
http://www.flickr.com/photos/jurvetson/6212582593
@andydavies         andy@asteno.comhttp://www.slideshare.net/andydavies                       http://www.flickr.com/photos/...
CreditsAll photographs copyright original owners on flickr.comFollowing pictograms courtesy of The Noun Project
Upcoming SlideShare
Loading in …5
×

Speed is Essential for a Great Web Experience

32,992 views

Published on

Audio of the talk is available here - http://blog.port80events.co.uk/2012/07/05/2012-talk-andy-davies/

Published in: Technology, Art & Photos

Speed is Essential for a Great Web Experience

  1. Speed is Essential for aGreat Web Experience@andydaviesPort 80 (#p80N)May 2012 http://www.flickr.com/photos/44442915@N00/5214810596
  2. But sometimes other concerns take priority... http://www.flickr.com/photos/randomidea/247994072
  3. “Are we there yet?” http://www.flickr.com/photos/sharynmorrow/643126727
  4. Our perception of response time Instant Seamless Yawn!100ms 1s 10s Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
  5. Our perception of response time Instant Seamless Yawn!100ms 1s 10s 3s - Recommended 7s - Fortune 500 Load Time Average (2010) Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
  6. “50% more concentration when using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042
  7. Effect of delay on abandonment rate... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
  8. Google conducted an experiment +400ms -0.6%
  9. Bing did some experiments too +1s $/ - 2.8% +
  10. Shopzilla cut page load time by 5 seconds! +12% +25% -50% $$$ http://velocityconf.com/velocity2009/public/schedule/detail/7709
  11. Measuring page load time...
  12. Measure Real Users’ Experience 27% 24%Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)
  13. Measuring Real Users - Google AnalyticsRelies on Navigation Timing API, can add extra timing calls to page
  14. Measuring Real Users - Torbit Insight
  15. Measuring Real Users - Torbit Insight (Check out at Log Normal too)
  16. Measuring Real Users - New Relic
  17. webpagetest.org
  18. Waterfall for bbc.co.uk/news
  19. www.blaze.io/mobile
  20. Bigger, Faster Servers? http://www.flickr.com/photos/br1dotcom/4297736794
  21. 80% plus of page load time is on front-end Backend news.bbc.co.uk Frontend ebay.co.ukdebenhams.co.uk direct.gov.uk amazon.co.uk mumsnet.com guardian.co.uk 0 1.25 2.5 3.75 5 Measured on residential ADSL line using Chrome 19
  22. Fix slow server responses first 4 seconds!
  23. Bandwidth (often) isn’t the bottleneck2.01.51.00.5 0s 5s 10s news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artifact of testing)
  24. Minimum round trips to download a file (TCP Segments)285kB214kB143kB 71kB Size 1 2 3 4 5 6 7 8 9 10 11 Round Trips TCP and the Lower Bound of Web Performance John Rauser
  25. Speeding Things Up - The Basics CSS at top Compress Consilidate Minify Reduce Requests Cache Forever JS at bottom
  26. Proportion of URLs that can be compressed ☺ ☹ http://zoompf.com/blog/2012/05/http-compression-use-by-alexa-top-1000
  27. What’s the web made of? Images Scripts Stylesheets HTML Flash Other Composition of ‘average’ web page via httparchive.org
  28. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
  29. CSS Sprites + background-position: -408px 0; width: 128px; height: 128px; =
  30. Data-URIs<img width="128" height="128"src="data:image/PNG;base64,iVBORw0KGgoAAAANSUhEUgAAAIAA ... =GAA39eV7u4AAAAAElFTkSuQ" /> Should be served with GZIP
  31. New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
  32. Look Ma, No Images!border-radius: 20px;background: linear-gradient(left, #f06, #ff0); Watch mobile performance. Remember vendor prefixes!
  33. Vector Graphics FTW? SVG: 12 KB vs PNG: 86KB
  34. What about icon / pictogram fonts? ★ ★ ☆ ☆ ♥ ♥ ☁ ☁ Heydings by Heydon Works “Bog Standard Font”
  35. display:none - still downloads images “‪#p80n‬ you do get adverts on the smashingmag site on smaller viewports. They just hideously display:none; so you still down load them :-/” @sturobson ‬
  36. Don’t forget about favicon.ico 1.4 seconds for favicon!
  37. Don’t forget about favicon.ico 1.4 seconds for favicon! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  38. Don’t block the browser... http://www.flickr.com/photos/barteko/6128499314
  39. news.bbcimg.co.uk static.bbc.co.ukBrowsers can download resources in parallel
  40. But Sometimes... The Waterfall of Doom! 2 seconds! (nearly)
  41. Social buttons break... http://bit.ly/yRjX63
  42. Social buttons break... http://bit.ly/yRjX63
  43. Load Third Party scripts asynchronously <script type="text/javascript"> function() var js = document.createElement(script); js.async = true; js.src = myscript.js var e = document.getElementsByTagName(script)[0]; e.parentNode.insertBefore(js, first); })(); </script>
  44. Argh... My brain hurts! http://www.flickr.com/photos/corneveaux/3248566797
  45. Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
  46. Performance isn’t just for Christmas Measure Optimise Analyse
  47. http://www.flickr.com/photos/jurvetson/6212582593
  48. @andydavies andy@asteno.comhttp://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612
  49. CreditsAll photographs copyright original owners on flickr.comFollowing pictograms courtesy of The Noun Project

×