Presentation on theme: "CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests Steve Souders Google"— Presentation transcript:
CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests Steve Souders Google email@example.com
Announcements Second HTTPWatch request list was sent today
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/
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
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
inline images (data: URLs) embed the content of an HTTP response in place of a URL 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
Your consent to our cookies if you continue to use this website.