1. CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests Steve Souders Google souders@cs.stanford.edu

2. Announcements Second HTTPWatch request list was sent today

3. Rule 1: Make Fewer HTTP Requests 80-90% of load time is the frontend the frontend time is dominated by HTTP HTTP requests growth since 2003: 25 to 50 * each HTTP request has overhead – even with persistent connections reducing HTTP requests has the biggest impact bigger benefit for users with higher latency parallelization reduces the need for this * http://www.websiteoptimization.com/speed/tweak/average-web-page/

4. Rule 1: Make Fewer HTTP Requests But... is it possible to reduce HTTP requests without reducing richness? Yes: combine JS, CSS image maps CSS sprites inline images

5. Combine JS and CSS not combining scripts with stylesheets multiple scripts => one script multiple stylesheets => one stylesheet apache module: http://code.google.com/p/modconcat/ YUI Combo Handler http://yuiblog.com/blog/2008/07/16/combohandler/ http://stevesouders.com/examples/combo.php

7. MySpace my "Improving Top Site" site

8. Image Maps old school, CSS sprites is preferred image maps still useful when x,y coordinates are useful, for example, in maps http://stevesouders.com/examples/imagemap.php

9. CSS Sprites multiple CSS background images => one image <div style="background-image: url('a_lot_of_sprites.gif'); background-position: -260px -90px; width: 26px; height: 24px;"> overall size reduced generator: http://spritegen.website-performance.org/ http://stevesouders.com/examples/sprites.php

10. inline images (data: URLs) embed the content of an HTTP response in place of a URL <IMG ALT="Red Star" SRC="data:image/gif;base64,R0lGODl...wAIlEEADs="> if embedded in HTML document, probably not cached => embed in stylesheet instead base64 encoding increases total size works in IE8 (not IE7 and earlier) http://stevesouders.com/examples/inline-images.php

11. data: URLs not just for images Hammerhead:

12. Homework Combine scripts and stylesheets on your "Improving Top Site" class project Test improvement using Hammerhead Add sheet to Web 100 spreadsheet for your web site; record results

13. Questions