cs193h: high performance web sites lecture 5: make fewer http requests steve souders google...
TRANSCRIPT
CS193H:High Performance Web Sites
Lecture 5: Make Fewer HTTP Requests
Steve SoudersGoogle
AnnouncementsSecond HTTPWatch request list was sent today
Rule 1: Make Fewer HTTP Requests
80-90% of load time is the frontendthe frontend time is dominated by HTTPHTTP requests growth since 2003: 25 to 50*
each HTTP request has overhead – even with persistent connections
reducing HTTP requests has the biggest impactbigger benefit for users with higher latencyparallelization 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, CSSimage mapsCSS spritesinline images
Combine JS and CSSnot combining scripts with stylesheetsmultiple scripts => one scriptmultiple stylesheets => one stylesheetapache module:
http://code.google.com/p/modconcat/
YUI Combo Handlerhttp://yuiblog.com/blog/2008/07/16/combohandler/
http://stevesouders.com/examples/combo.php
MySpacemy "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 preferredimage maps still useful when x,y coordinates are
useful, for example, in maps
http://stevesouders.com/examples/imagemap.php
CSS Spritesmultiple 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 reducedgenerator: 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 sizeworks in IE8 (not IE7 and earlier)
http://stevesouders.com/examples/inline-images.php
data: URLsnot just for imagesHammerhead:<frame src="data:text/html,%3Chtml%3E%3Cbody%20style%3D%22background..."></frame>
HomeworkCombine scripts and stylesheets on your
"Improving Top Site" class projectTest improvement using HammerheadAdd sheet to Web 100 spreadsheet for your web
site; record results