Web Performance 101

1,570 views

Published on

By Gil Givati
IL Tech Talks at PicScout

Published in: Technology, Design
  • Be the first to comment

Web Performance 101

  1. 1.  What is Web Performance How does Web Performance affects our bottom line The web Performance building blocks Knowing your audience: understanding Browser behaviors Measuring Performance using YSlow and Google PageSpeed Understanding Waterfalls Knowing Fiddler/HttpWatch Working with WebPageTest Working with DynaTrace Ajax Edition
  2. 2. Efficens Software      www.efficens-software.com  Twitter: efficens  Facebook 
  3. 3. Stephan Thair, Seriti consulting
  4. 4. http://velocityconf.com/velocity2010/public/schedule/detail/13019
  5. 5. “Brain wave analysis from the experiment revealed that participants had to concentrate up to 50% more when using badly performing websites, while facial muscle and behavioural analysis of the subjects also revealed greater agitation and stress in these periods.http://www.ca.com/Files/SupportingPieces/final_webstr ess_survey_report_229296.pdf
  6. 6. Performanc e improvemen 6 secs 8 secs 2 secs 4 secs t (seconds) -8% - - -25% - -33% Percentage -38% change in - page abandonme - nt - - -urce: Gomez 2010 Study of 500 Million End-User Interactions Across 200+ Web Sites
  7. 7. http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
  8. 8. http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
  9. 9. http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
  10. 10.    Jakob Neilsen. http://www.useit.com/alertbox/response-times.html
  11. 11. Web performance anatomy Latency HTTP AJAX/XHR IE FirefoxChrome Browser Internet Server Safari Opera Images CSS JavaScript Cache Flash Parsing DNS 3rd-party Layouting Server servers Rendering
  12. 12. Web 2.0Server side Content delivery Rendering - 18
  13. 13. Bandwidth & Latency
  14. 14. 200KB1.5Mb/Sec
  15. 15. It’s a Multi-Browser World: Different for Each Customer BaseGlobal Browser Market Share Jan 2010 - Jan 2011 % IE Firefox IE IE Firefox Firefox Chrome Chrome Chrome Safari Safari Chrome Chrome Opera Firefox Opera Opera Chrome Firefox Opera Source: http://arstechnica.com/web/news/2011/02/chrome-takes-10-usage-share-ie-continues-to-haemorrhage.ars; http://gs.statcounter.com/#browser_version-ww-monthly-201001-201101
  16. 16. Load Time Perceived RenderSeconds Source: Gomez Real-User Monitoring Real users around the world 466 million page measurements Broadband connections only 200+ sites
  17. 17. Fragmented, ra • Who is #1 today? Tomorrow?pidly-changing 7market • Who is #1 with your customers? 6 8Different • Number of parallel connectionsoperational • JavaScript processingcharacteristics • Etc.  BrowserProcessing • Percentage of totalmoving to the  Networkbrowser response time  Infrastructure • PerformanceMajor impact on • Functionalityuser experience • Appearance
  18. 18. • Time to first byte •Time to first impression • onLoad • Fully loaded time • • Yahoo! YSlow • Google Page Speed •dynaTrace AJAX edition •
  19. 19. Minimize HTTP Requests Remove Duplicate Scripts Use a Content Delivery Network Configure ETags Add an Expires or a Cache- Make AJAX Cacheable Control Header Use GET for AJAX Requests Gzip Components Reduce the Number of DOM Put StyleSheets at the Top Elements Put Scripts at the Bottom No 404s Avoid CSS Expressions Reduce Cookie Size Make JavaScript and CSS Use Cookie-Free Domains for External Components Reduce DNS Lookups Avoid Filters Minify JavaScript and CSS Do Not Scale Images in HTML Avoid Redirects Make favicon.ico Small & Cacheablehttp://developer.yahoo.com/yslow/help/#guidelines
  20. 20. Avoid bad requests Minimize redirects Avoid CSS expressions Optimize images Combine external CSS Optimize the order of styles and scripts Combine external JavaScript Parallelize downloads across Defer loading of JavaScript hostnames Enable compression Put CSS in the document head Leverage browser caching Remove unused CSS Leverage proxy caching Serve resources from a consistent Minify CSS URL Minify HTML Serve scaled images Minify JavaScript Serve static content from a cookieless domain Minimize request size Specify a character set early Minimize DNS lookups Specify image dimensionshttp://code.google.com/speed/page-speed/docs/rules_intro.html Use efficient CSS selectors
  21. 21. http://www.httpArchive.org
  22. 22. http://www.httpArchive.org
  23. 23. 1.Reduce Page Size (<500Kb)2.Enable (Gzip) Compression3.Reduce the number of roundtrips (<40 per page…)4.HTTP Cache Headers (cache long & prosper!)5.Structure the page (to improve render & download) a) CSS First b) Javascript last
  24. 24. Http KeepAlive •Async JS Load •DOM Elements • CDN •
  25. 25. http://www.efficens-software.com/2011/07/understanding_waterfall_charts/
  26. 26. https://developers.google.com/pagespeed/
  27. 27. http://www.gomez.com/instant-test-pro/
  28. 28. - Google Page Speed Tools Family http://code.google.com/speed/page-speed/ dynaTrace AJAX Edition http://ajax.dynatrace.com/ajax/en/ Yahoo! YSlow http://developer.yahoo.com/yslow/ WebPagetest http://www.webpagetest.org/ Show Slow http://www.showslow.com/ Lets Make the Web Faster http://code.google.com/intl/en-EN/speed/tools.html
  29. 29.  Books - High Performance Web Sites - Even Faster Web Sites - Website Optimization - Complete Web Monitoring -High Performance JavaScript
  30. 30. gil@efficens-software.com 054-2552060 @efficens

×