Speed is Essential for aGreat Web Experience@andydaviesDigicureOct 2012                           http://www.flickr.com/pho...
Performance isn’t always a priority                           http://www.flickr.com/photos/randomidea/247994072
“Has it loaded yet?”                       http://www.flickr.com/photos/kindofindie/4099768084
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”                                                    Fo...
Effect of delay on abandonment rate...      Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http...
Bing did some experiments     +1s                            $/                             - 2.8%                        ...
Wallmart made some improvements     -1s                      +2%
Shopzilla cut page load time by 5 seconds!  +12%          +25%                                -50%   $$$                  ...
Measuring page load time...                              http://www.flickr.com/photos/wwarby/7109538317
Synthetic Monitoring                    4                    3Response Time (s)                    2                    1 ...
But these aren’t our visitors…                            http://www.flickr.com/photos/br1dotcom/4297736794
These are our visitors                         http://www.flickr.com/photos/yourdon/2681687374
Measure Real Users’ Experience                         27%Visitors (%)                               13%                  ...
Measure Real Users’ Experience                         27%                                                                ...
Measuring Real Users - Google AnalyticsRelies on Navigation Timing API, can add extra timing calls to page
Looking Deeper                 http://www.flickr.com/photos/ohhector/3149051855
webpagetest.org
Waterfall for bbc.co.uk/news
mobitest.akamai.com
Bigger, Faster Servers?                          http://www.flickr.com/photos/getbutterfly/6317955134
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      ...
“More Bandwidth Doesn’t Matter (much)”                                                                                    ...
Impact of Latency                     4                     3Page Load Time (s)                     2                     ...
Minimum round trips to download a file                                                             (TCP Segments)285kB214kB...
Going Faster…                http://www.flickr.com/photos/mikebaird/2464769129/
Put your pages on a diet                           http://www.flickr.com/photos/europedistrict/4537909259
Cut down number of HTTP requests
Move the content closer                          http://www.flickr.com/photos/jamesjordan/2198988999
Organise content so it’s easy to load                            http://www.flickr.com/photos/jemsweb/4363548805
What’s the web made of?                                                         Images                                    ...
Images are 64% of an ‘average’ web page                        http://www.flickr.com/photos/zaprittsky/4520788183/
Bitmapped Images    JPEG                            PNG                           GIF       Optimise, Optimise, Optimise! ...
New Devices, New Challenges...                2 x Resolution = 4 x Pixels!                           http://www.flickr.com/...
Some Alternatives     CSS                SVG                Fonts   Watch SVG sizes not always smaller than bitmap!
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)
The Script Tag        <script src=″…″></script>
The Script Tag         <script src=″…″></script>    Until the script has executed, the rendering of            all element...
“Virgin Media Broadband ISP UsersAffected by Website Routing Woes”                                                        ...
Impact on The Telegraph…                           http://bit.ly/Ncy7Rd
Impact on The Telegraph…                           http://bit.ly/Ncy7Rd
Impact on The Telegraph…Same issue affected many other sites   http://bit.ly/Ncy7Rd
Load Third Party scripts asynchronously <script type="text/javascript">   function() {     var js = document.createElement...
The Challenge of Mobile                          http://www.flickr.com/photos/cubicgarden/3281555681
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
Measure Impact on Business Goals                           http://www.flickr.com/photos/safari_vacation/5961260280
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

581

Published on

Andy Davies' slides fra Digicures web performance seminar på Bella Sky, 24. oktober 2012.

Den engelske ekspert og freelance konsulent, Andy Davies, har været bidt af emnet om god web performance siden 90'erne. Andy hjælper virksomheder med at måle, analysere og forbedre performance og stabiliteten af deres websites.

Selvom hastighed er vigtig for en god online oplevelse, bliver det ofte overset. Andy Davies vil fortælle hvordan hastighed påvirker brugeroplevelsen på et website og afdække hvordan hastighed kan måles og analyseres.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
581
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Andy Davies\n\nSpecialise in making web sites faster, more reliable and helping them scale as they grow\n\nSlides complete will go on Slideshare in the next day or so\n\nIf anyone has any questions or comments feel free to send me a tweet...\n\n\n
  • \n
  • \n
  • How we perceive response times\n\nStrangeloop Networks research into load times of Alexia Top 2000 ecommerce sites \n - Average page load time 11.21s\n - Best 2.2x, worst 40.2s!\n - Only 13 loaded in less that 5s\n\nOur perception of load time is off:\n- Our expectation is faster\n- Perceive load time as 15% slower than reality\n- Recount experience as 35% slower\nStoyan Stefanov - Psychology of Performance\n
  • Retail task - find and buy a laptop on a leading e-commerce site\nInsurance task - find and buy personal travel insurance on an insurance website. \nEEG &amp; EOG, camera\n
  • \n\nAlso people&amp;#x2019;s perception of time is faulty... (Stoyan Stefanov, Psychology of Performance)\n - Average person perceives page takes 15% longer to load that reality\n - Will recount it as 35% longer when talking to others\n\n
  • Google - 400ms delay- searches down 0.6%\nAmazon - 100 ms delay - sales down 1%\n
  • Walmart2% increase in conversion rate for every 1 second reduction\n
  • ShopzillaUptime 99.51% &gt; 99.97\n\nMozillareduced load time by 2.2 secs = 60 million extra downloads / year\n\nYahootraffic went up 9% for every 400ms improvement\n\nNetflix: Reduced outbound bandwidth by 43%\n\nKerboodle: Reduced hosting costs by over &amp;#x20AC;30,000 per year\n\n
  • How many have websites?\n\nHow many think theirs is fast?\n\nHow many measure?\n
  • \n
  • \n
  • \n
  • We are not real users...\n\n&amp;#x201C;My own developer hardware is not representative of the real world, and will be mindful of limited hardware, poor latency, and low bandwidth situations&amp;#x201D;\nA Front End Engineer&amp;#x2019;s Manifesto\n@zachleat\nhttp://f2em.com/\n\nActual page load times from a real site, note huge peak of over 10 seconds\n\nMany external factors can affect page load time:\n\n- Browser\n- How they are connected ADSL / mobile / public WiFi\n- Bandwidth\n- Latency\n- Anti-virus\n- Network kit\n- etc\n\nThese factors are beyond our control but to get a true picture of page load times we must measure them in the visitors browser.\n
  • \n
  • Navigation Timing API \n - Firefox 7+, IE9+, Chrome 6+, Chrome on ICS\n - NO SAFARI - OS X or iOS!!!\n\nCan script to add extra timings\n\nLow sample rate\n\nAverages!!!\n\nIncrease sample rate from 1% to 100% add:\n\n_gaq.push([&apos;_setSiteSpeedSampleRate&apos;, 100]);\n\nPage load time data collected by default since 16th Nov 2011\n\nGood description of how it works on StackOverflow\n\n
  • \n
  • \n
  • \n
  • \n
  • Some server performance issues can be improved by throwing hardware at it e.g. faster processors, more RAM (Databases love RAM), faster disks.\n\nBut should still look at optimising the back-end as it&amp;#x2019;s an important part of the picture e.g. DB tuning, architectures, reverse proxies etc.\n\nEven without tuning the server can still improve page load times by &amp;#x201C;flushing early&amp;#x201D;\n\n
  • Even higher on mobile\n
  • \n
  • Bursting over 1.5Mbps = Testing Artefact\n
  • Mike Belshe - &amp;#x201C;More Bandwidth Doesn&amp;#x2019;t Matter (much)&amp;#x201D;\n(http://www.chromium.org/spdy/More_Bandwidth_Doesn_t_Matter_2_%282%29.pdf)\n\nBandwidth - Throughput, how much can be download in a given time\nLatency - Time between making the request and receiving the response\nTCP Slow-start - new connections take time to work up to &amp;#x2018;max&amp;#x2019; throughput\n\nConnections aren&amp;#x2019;t synchronous e.g. ADSL - faster download than upload, so requests are much slower (but fortunately generally smaller)\n\n\n
  • Mike Belshe - &amp;#x201C;More Bandwidth Doesn&amp;#x2019;t Matter (much)&amp;#x201D;\n(http://www.chromium.org/spdy/More_Bandwidth_Doesn_t_Matter_2_%282%29.pdf)\n\nBandwidth - Throughput, how much can be download in a given time\nLatency - Time between making the request and receiving the response\nTCP Slow-start - new connections take time to work up to &amp;#x2018;max&amp;#x2019; throughput\n\nConnections aren&amp;#x2019;t synchronous e.g. ADSL - faster download than upload, so requests are much slower (but fortunately generally smaller)\n\n\n
  • \n
  • \n
  • Compress (gzip / deflate) all text based content - html, js, css, xml, json (and other uncompressed components e.g. ico)\n\nMinify JS and CSS (not everyone can get gzipped content)\n\nOptimise images: correct format + tools \n- jpg: lossy\n- png: lossless (often more efficient than gif. Photoshop screws up transparency)\n- gif:animated \n\nGreat reference for image optimisation - http://www.bookofspeed.com/chapter5.html\nhttp://jpegmini.com is a new tool for crunching jpegs, uses perceptual encoding, good results\n\nUse CSS / SVG / Canvas instead of images e.g. rounded corners\n\nLean markup\n- html: avoid DIVitis, HTML5 can be more brief\n- css: @stubornella&amp;#x2019;s OOCSS (https://github.com/stubbornella/oocss/wiki/faq)\n\nStatic content from cookieless domains (but should CSS come from the same domain?)\n\nRemove superfluous headers\n
  • Merge up\n - CSS\n - JS\n\n - CSS sprites\n - Datauri&amp;#x2019;s\n - Pictogram fonts \n - Standard characters\n\nLazy load e.g. images\n\n
  • \n
  • \n
  • 64%\n
  • Images form on average 59% of site content (exc video and audio) \n\nRetina displays complicate things - time for vectors / fonts?\n
  • What about PNGs and transparency? - need to cover the issues\n
  • \n
  • Watch CSS effects on mobile\n\nCheck size - map is actually smaller as PNG 22.7KB / SVG 108KB!\n\nFont - Heydings by Heydon Works\n
  • \n
  • \n
  • \n
  • \n
  • Also CSS and fonts - anything that can block\ncg-global.maxymiser.com\n
  • What if they are slow? down? Or even blocked - country, corporate firewall etc.?\n\nStart render 3.7s vs 24.5s\n\nLoad8s vs 30.4s\n\nLateRooms, Autotrader plus many others... for three days (started on a Fri)!!!\n
  • What if they are slow? down? Or even blocked - country, corporate firewall etc.?\n\nStart render 3.7s vs 24.5s\n\nLoad8s vs 30.4s\n\nLateRooms, Autotrader plus many others... for three days (started on a Fri)!!!\n
  • Don&amp;#x2019;t blindly add third party scripts to a site\n\nMany social sites now have async versions, use the latest snippet.\n\nAddThis doesn&amp;#x2019;t - don&amp;#x2019;t use it\n\nOpenDNS blocked Google&amp;#x2019;s jQuery CDN!\n\nh5bp includes html5shiv from googlecode - it&amp;#x2019;s only 1KB, quicker to load from own site\n
  • \n
  • \n
  • Some things can be automated e.g. compression, minification, merging, image compression plus more sophisticated optimisations.\n\nFrom plugins for Wordpress and web servers, appliances that sit in front of your server farm through to cloud-based optimisation services.\n\nOther are a little more difficult e.g. flush early, improving backed performance, asynchronous loading scripts etc.\n\nAutomation products / tools...\n\nFramework support\n Asset pipeline (Rails)\n Resources plugin (Grails)\n Webassets (Python)\n Assetic (PHP)\n\nCMS plugins\n - W3 Total Cache for Wordpress\n\nServer plugins\n - mod_pagespeed (Apache)\n - reduce requests (IIS)\n - Aptimize (IIS) (&amp;#xA3;)\n - Webo (&amp;#xA3;)\n\nAppliances\n - Strangeloop (&amp;#xA3;)\n - Traditional ADCs do some of this e.g. compression\n\nCloud services\n - Strangeloop (&amp;#xA3;)\n - Torbit (&amp;#xA3;)\n - Blaze.io (&amp;#xA3;)\n - Yotta (&amp;#xA3;)\n - Google&amp;#x2019;s PageSpeed service\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Speed is Essential for a Great Web Experience

    1. 1. Speed is Essential for aGreat Web Experience@andydaviesDigicureOct 2012 http://www.flickr.com/photos/ahockley/3576838608
    2. 2. Performance isn’t always a priority http://www.flickr.com/photos/randomidea/247994072
    3. 3. “Has it loaded yet?” http://www.flickr.com/photos/kindofindie/4099768084
    4. 4. Our perception of response time Instant Seamless Yawn!100ms 1s 10s Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
    5. 5. Our perception of response time Instant Seamless Yawn!100ms 1s 10s 3s - Recommended 6.5s - Alexa 2000 Load Time Fall 2012 Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
    6. 6. “50% more concentration when using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042
    7. 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. 8. Bing did some experiments +1s $/ - 2.8% +
    9. 9. Wallmart made some improvements -1s +2%
    10. 10. Shopzilla cut page load time by 5 seconds! +12% +25% -50% $$$ http://velocityconf.com/velocity2009/public/schedule/detail/7709
    11. 11. Measuring page load time... http://www.flickr.com/photos/wwarby/7109538317
    12. 12. Synthetic Monitoring 4 3Response Time (s) 2 1 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 16 27 28 29 30 September 2012
    13. 13. But these aren’t our visitors… http://www.flickr.com/photos/br1dotcom/4297736794
    14. 14. These are our visitors http://www.flickr.com/photos/yourdon/2681687374
    15. 15. Measure Real Users’ Experience 27%Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 Load Time (s)
    16. 16. 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)
    17. 17. Measuring Real Users - Google AnalyticsRelies on Navigation Timing API, can add extra timing calls to page
    18. 18. Looking Deeper http://www.flickr.com/photos/ohhector/3149051855
    19. 19. webpagetest.org
    20. 20. Waterfall for bbc.co.uk/news
    21. 21. mobitest.akamai.com
    22. 22. Bigger, Faster Servers? http://www.flickr.com/photos/getbutterfly/6317955134
    23. 23. 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
    24. 24. Fix slow server responses first 4 seconds!
    25. 25. 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 artefact of testing)
    26. 26. “More Bandwidth Doesn’t Matter (much)” Mike Belshe 3.11sPage Load Time 1.95s 1.63s 1.50s 1.44s 1.41s 1.39s 1.38s 1.37s 1.36s 1 2 3 4 5 6 7 8 9 10 Bandwidth (Mbps)
    27. 27. Impact of Latency 4 3Page Load Time (s) 2 1 0 20 40 60 80 100 120 140 160 180 200 220 240 Round Trip Time (ms)
    28. 28. 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
    29. 29. Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/
    30. 30. Put your pages on a diet http://www.flickr.com/photos/europedistrict/4537909259
    31. 31. Cut down number of HTTP requests
    32. 32. Move the content closer http://www.flickr.com/photos/jamesjordan/2198988999
    33. 33. Organise content so it’s easy to load http://www.flickr.com/photos/jemsweb/4363548805
    34. 34. What’s the web made of? Images Scripts Stylesheets HTML Flash Other Composition of ‘average’ web page via httparchive.org
    35. 35. Images are 64% of an ‘average’ web page http://www.flickr.com/photos/zaprittsky/4520788183/
    36. 36. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
    37. 37. New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
    38. 38. Some Alternatives CSS SVG Fonts Watch SVG sizes not always smaller than bitmap!
    39. 39. Don’t block the browser... http://www.flickr.com/photos/barteko/6128499314
    40. 40. news.bbcimg.co.uk static.bbc.co.ukBrowsers can download resources in parallel
    41. 41. But Sometimes... The Waterfall of Doom! 2 seconds! (nearly)
    42. 42. The Script Tag <script src=″…″></script>
    43. 43. The Script Tag <script src=″…″></script> Until the script has executed, the rendering of all elements below is blocked!
    44. 44. “Virgin Media Broadband ISP UsersAffected by Website Routing Woes” ISP Review, May 26, 2012Customer jcmm33 said:“Same issue here as well, been like this all day. Sites likeautotrader.co.uk don’t appear to be accessible, others likethe telegraph.co.uk are waiting on other components todownload (content from sites like cg-global.maxymiser.com,pixel.quantserve.com).” http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html
    45. 45. Impact on The Telegraph… http://bit.ly/Ncy7Rd
    46. 46. Impact on The Telegraph… http://bit.ly/Ncy7Rd
    47. 47. Impact on The Telegraph…Same issue affected many other sites http://bit.ly/Ncy7Rd
    48. 48. 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> async attribute may be option but not supported by IE & Opera
    49. 49. The Challenge of Mobile http://www.flickr.com/photos/cubicgarden/3281555681
    50. 50. Argh... My brain hurts! http://www.flickr.com/photos/corneveaux/3248566797
    51. 51. Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
    52. 52. Performance isn’t just for Christmas Measure Optimise Analyse
    53. 53. Measure Impact on Business Goals http://www.flickr.com/photos/safari_vacation/5961260280
    54. 54. http://www.flickr.com/photos/jurvetson/6212582593
    55. 55. @andydavies andy@asteno.comhttp://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612
    56. 56. CreditsAll photographs copyright original owners on flickr.comFollowing pictograms courtesy of The Noun Project
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×