Presentation is loading. Please wait.

Presentation is loading. Please wait.

CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests Steve Souders Google

Similar presentations


Presentation on theme: "CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests Steve Souders Google"— Presentation transcript:

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

6

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

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 Red Star 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


Download ppt "CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests Steve Souders Google"

Similar presentations


Ads by Google