1 / 29

Web Performance 101

Web Performance 101. Jeremy Solarz @jeremysolarz. What next?. What is “Web Performance” Money ≠ Performance? Experiments Where is the time? Follow the Rules! Toolbelt. What is performance. for the JavaScript folks… Stoyan Stefanov, JSMentors.

hei
Download Presentation

Web Performance 101

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Performance 101 Jeremy Solarz @jeremysolarz Web Performance Group @ Meetup

  2. What next? • What is “Web Performance” • Money ≠ Performance? • Experiments • Where is the time? • Follow the Rules! • Toolbelt Web Performance Group @ Meetup

  3. What is performance for the JavaScript folks… Stoyan Stefanov, JSMentors http://velocityconf.com/velocity2010/public/schedule/detail/13019 Web Performance Group @ Meetup

  4. What means slow • Pain = slow, Study form User Interface Engineering http://www.uie.com/articles/download_time/ • More on that at… http://www.phpied.com/psychology-of-performance/ Web Performance Group @ Meetup

  5. What’s “Good Performance” • 0.1 seconds, instantaneous response • 1 second keeps the user's flow of thought seamless. • 10 seconds keeps the user's attention. • Compared to “Blink of an eye”: 0.3 – 0.4s http://www.useit.com/alertbox/response-times.html Web Performance Group @ Meetup

  6. Tip • Progressive Rendering Part 1 Part 3 Part 2 Web Performance Group @ Meetup

  7. Money ≠ Performance? Web Performance Group @ Meetup

  8. http://velocityconf.com/velocity2010/public/schedule/detail/13023http://velocityconf.com/velocity2010/public/schedule/detail/13023 Web Performance Group @ Meetup

  9. http://velocityconf.com/velocity2010/public/schedule/detail/13023http://velocityconf.com/velocity2010/public/schedule/detail/13023 Web Performance Group @ Meetup

  10. http://velocityconf.com/velocity2010/public/schedule/detail/13023http://velocityconf.com/velocity2010/public/schedule/detail/13023 Web Performance Group @ Meetup

  11. What does this mean? • Losing Visitors • Losing Sales • Losing Ad-revenue • Wasting SEO/SEM effort • Much more $$$ on bandwidth and servers Web Performance Group @ Meetup

  12. Example • “A 1-second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions” Aberdeen Group http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx Web Performance Group @ Meetup

  13. What MS did.. • Artificial 1s delay = 2.8% reduction in revenue/user (Bing) http://velocityconf.com/velocity2009/public/schedule/detail/8523 Web Performance Group @ Meetup

  14. What Google did… Web Performance Group @ Meetup

  15. Where is the time? • 80% of the page load time is spent outside the data centre!!! Steve Souders “High-Performance Websites Web Performance Group @ Meetup

  16. The Building Blocks of #WebPerf http://www.slideshare.net/sthair/web-performance-101-ldn-webperf-steve-thair Web Performance Group @ Meetup

  17. Follow the Rules! Web Performance Group @ Meetup

  18. Avoid bad requests Avoid CSS expressions Combine external CSS Combine external JavaScript Defer loading of JavaScript Enable compression Leverage browser caching Leverage proxy caching Minify CSS Minify HTML Minify JavaScript Minimize request size Minimize DNS lookups Minimize redirects Optimize images Optimize the order of styles and scripts Parallelize downloads across hostnames Put CSS in the document head Remove unused CSS Serve resources from a consistent URL Serve scaled images Serve static content from a cookieless domain Specify a character set early Specify image dimensions Use efficient CSS selectors Gooles Rules http://code.google.com/speed/page-speed/docs/rules_intro.html Web Performance Group @ Meetup

  19. Minimize HTTP Requests Use a Content Delivery Network Add an Expires or a Cache- Control Header Gzip Components Put StyleSheets at the Top Put Scripts at the Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript and CSS Avoid Redirects Remove Duplicate Scripts Configure ETags Make AJAX Cacheable Use GET for AJAX Requests Reduce the Number of DOM Elements No 404s Reduce Cookie Size Use Cookie-Free Domains for Components Avoid Filters Do Not Scale Images in HTML Make favicon.ico Small & Cacheable Yahoo’s Rules http://developer.yahoo.com/yslow/help/#guidelines Web Performance Group @ Meetup

  20. What is important?! • Reduce Page Size (<500Kb) • Enable (Gzip) Compression, even behind Proxies, http://velocityconf.com/velocity2010/public/schedule/detail/14334 • Reduce the number of roundtrips (<40 per page…) • Structure the page (to improve render & download) • CSS First • Javascript last • Lossy Images, http://www.phpied.com/overlooked-optimizations-images/ • Cache, Cache, Cache Web Performance Group @ Meetup

  21. Impact? • Your page download times will drop by ~50% Web Performance Group @ Meetup

  22. Toolbelt Web Performance Group @ Meetup

  23. Client-side • ySlow (Firefox) • PageSpeed (Firefox) • Firebug (Firefox) • HTTPWatch (Firefox & IE) • Dynatrace Ajax Edition (IE only, Firefox) Web Performance Group @ Meetup

  24. Check first • Analysis the waterfall graph • Look for render start time • Script blocking • # objects, http://mir.aculo.us/dom-monster/ • Headers • Not Gzip’d • No Expires or Cache Control Headers • 2 seconds Keep-Alive?? Web Performance Group @ Meetup

  25. Online • WebPageTest.org, http://www.webpagetest.org/ • Showslow, http://www.showslow.com/ • Pagespeed Online, http://pagespeed.googlelabs.com/pagespeed/ • Smush It (image analysis) - http://www.smushit.com/ysmush.it/ • Browsermob, https://browsermob.com/performance-testing • HTTP Archive, http://httparchive.org/ • GTMetrix - http://gtmetrix.com/ • Yottaa - http://www.yottaa.com/ • RedBot (cache analysis), http://redbot.org/ Web Performance Group @ Meetup

  26. Out of the box • Google Mod_pagespeed - http://code.google.com/speed/pagespeed/docs/module.html • Aptimize – www.aptimize.com • Webo - http://www.webogroup.com/home/site-speedup/ • Strangeloop - http://www.strangeloopnetworks.com/ • Blaze IO - http://www.blaze.io/ • DSA “Dynamic Site Acceleration” – Cotendo, Akamai, Limelight, CDNetworks etc Web Performance Group @ Meetup

  27. Reference • Steve Souder’s blog, http://www.stevesouders.com/blog/ • http://www.phpied.com/category/performance/, Stoyan Stefanov • WebPerformanceToday, http://www.webperformancetoday.com/ • Performance Planet (WebPerf Blogs) - http://www.perfplanet.com/ • Sergey Chernvshev, http://www.sergeychernyshev.com/talks/Web_Performance • http://zoompf.com/blog, Billy Hoffman • http://developer.yahoo.com/performance/Yahoo Performance Team • http://velocityconf.com, Conference about performance => Velocity (awesome slides + videos for free…) • TheOpsMgr Blog - http://theopsmgr.seriticonsulting.com/ • UK Broadband stats - http://www.broadbandspeedchecker.co.uk/speed_ratings.aspx • Browser Usage Stats - http://www.w3counter.com/globalstats.php • http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/, More stats about impact of Web Performance Web Performance Group @ Meetup

  28. ? Web Performance Group @ Meetup

  29. Last words Please review the Meetup on Meetup.com Next Meetup => Thursday, Oktober 6th 2011 Web Performance Group @ Meetup

More Related