Download CS193H: High Performance Web Sites Class 1

CS193H:
High Performance Web Sites
Lecture 5: Make Fewer HTTP
Requests
Steve Souders
Google
[email protected]
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
MySpace
my "Improving Top Site" site
Image Maps
<img usemap="#map1" border=0 src="/images/imagemap.gif">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="home.html">
<area shape="rect" coords="36,0,66,31" href="gifts.html">
<area shape="rect" coords="71,0,101,31" href="cart.html">
<area shape="rect" coords="106,0,136,31" href="settings.html">
<area shape="rect" coords="141,0,171,31" href="help.html">
</map>
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
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;">
</div>
overall size reduced
generator: http://spritegen.website-performance.org/
http://stevesouders.com/examples/sprites.php
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
data: URLs
not just for images
Hammerhead:
<frame
src="data:text/html,%3Chtml%3E%3Cbody%20styl
e%3D%22background..."></frame>
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