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

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

End User Evaluation

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.

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

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

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

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

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

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

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

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

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

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

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

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

Rule 9: Reduce DNS lookups typically ms block parallel downloads OS and browser both have DNS caches

Rule 10: Minify JavaScript Minify External? Minify Inline? froogle.google.comyes minify inline scripts, too

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

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

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

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

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.

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

References High Performance Web Sites: Essential Knowledge for Front-End Engineers By Steve Souders

Thank You !