1. High Performance Websites (Based on Steve Souder’s lecture) By Bhoomi Patel

2. Exceptional Performance Quantify and improve the performance of products worldwide Center of expertise Build tools, analyze data Gather, research and practices

3. End User Evaluation

4. Optimize Front End 80-90% of the end user response time is spent on the front end More potential for improvement Require less time and resources How to optimize it ?! : There are 14 rules.

5. 14 Rules 1. Make fewer HTTP requests 2. Use a CDN 3. Add an Expires header 4. Gzip components 5. Put CSS at the top 6. Move JS to the bottom 7. Avoid CSS expressions 8. Make JS and CSS external 9. Reduce DNS lookups 10. Minify JS 11. Avoid redirects 12. Remove duplicate scripts 13. Configure ETags 14. Make AJAX cacheable and small

6. Rule 1: Make fewer HTTP requests CSS sprites inline images combined scripts, combined stylesheets

7. CSS Sprites – Preferred size of combined image is less http://alistapart.com/articles/sprites <span style=" background-image: url('sprites.gif'); background-position: -260px -90px;">

8. Combined Scripts, Combined Stylesheets ScriptsStylesheets amazon.com31 aol.com181 cnn.com112 ebay.com72 froogle.google.com11 msn.com91 myspace.com22 wikipedia.org31 yahoo.com41 youtube.com73 Average6.51.5

9. Combined Scripts, Combined Stylesheets combining six scripts into one eliminates five HTTP requests challenges: develop as separate modules maximize browser cache one solution: dynamically combine and cache

10. Rule 2: Use a CDN distribute your static content before dynamic content amazon.comAkamai aol.comAkamai cnn.com ebay.comAkamai, Mirror Image google.com msn.comSAVVIS myspace.comAkamai, Limelight wikipedia.org yahoo.comAkamai youtube.com

11. Rule 3: Add an Expires header not just for images ImagesStylesheetsScripts% Median Age amazon.com0/620/10/30%114 days aol.com23/431/16/1848%217 days cnn.com0/1380/22/111%227 days ebay.com16/200/20/755%140 days froogle.google.com1/230/1 4%454 days msn.com32/351/13/980%34 days myspace.com0/180/2 0%1 day wikipedia.org6/81/12/375%1 day yahoo.com23/231/14/4100%n/a youtube.com0/320/30/70%26 days

12. Rule 4: Gzip components You can affect users' download times 90%+ of browsers support compression

13. Rule 5: Put CSS at the top stylesheets block rendering in IE solution: put stylesheets in HEAD (per spec) avoids Flash of Unstyled Content use LINK (not @import)

14. Rule 6: Move scripts to the bottom scripts block parallel downloads across all hostnames scripts block rendering of everything below them in the page

15. Rule 7: Avoid CSS expressions used to set CSS properties dynamically in IE width: expression( document.body.clientWidth < 600 ? “600px” : “auto” ); Problem: expressions execute many times Mouse move, key press, resize, scroll, etc. Alternatives: One Time expressions Event Handlers

16. Rule 8: Make JS and CSS external Inline: HTML document is bigger External: more HTTP requests, but cached Variables page views per user (per session) empty vs. full cache stats component re-use External is typically better home pages may be an exception

17. Rule 9: Reduce DNS lookups typically 20-120 ms block parallel downloads OS and browser both have DNS caches

18. Rule 10: Minify JavaScript Minify External? Minify Inline? www.amazon.comno www.aol.comno www.cnn.comno www.ebay.comyesno froogle.google.comyes www.msn.comyes www.myspace.comno www.wikipedia.orgno www.yahoo.comyes www.youtube.comno minify inline scripts, too

19. Rule 11: Avoid redirects 3xx status codes – mostly 301 and 302 HTTP/1.1 301 Moved Permanently Location: http://xyz.com/newpage add Expires headers to cache redirects worst form of blocking

20. Rule 12: Remove duplicate scripts Hurts performance extra HTTP requests (IE only) extra executions Atypical? 2 of 10 top sites contain duplicate scripts

21. Rule 13: Configure ETags unique identifier returned in response ETag: "c8897e-aee-4165acf0" Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT used in conditional GET requests If-None-Match: "c8897e-aee-4165acf0" If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT if ETag doesn't match, can't send 304

22. Rule 14: Make AJAX cacheable and small XHR, JSON, iframe, dynamic scripts can still be cached, minified, and gzipped a personalized response should still be cacheable by that person

23. Firebug The Firebug extension for Firefox allows the debugging, editing, and modifying of any website's CSS, HTML, DOM, and JavaScript, and provides other web development tools.

24. YSlow WHY is it slow ? performance lint tool grades web pages for each rule Yahoo! internal tool Demo

25. References http://video.yahoo.com/watch/1040890 http://developer.yahoo.com/performance/rules.html http://developer.yahoo.com/yslow/ http://www.getfirebug.com/ High Performance Web Sites: Essential Knowledge for Front-End Engineers By Steve Souders

26. Thank You !