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

1
CS193HHigh Performance Web SitesLecture 5
Make Fewer HTTP Requests

• Steve Souders
• Google
• souders_at_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/a
verage-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 gt one script
• multiple stylesheets gt 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
(No Transcript)
7
MySpace

• my "Improving Top Site" site

8
Image Maps

• ltimg usemap"map1" border0 src"/images/imagemap
  .gif"gt
• ltmap name"map1"gt
• ltarea shape"rect" coords"0,0,31,31"
  href"home.html"gt
• ltarea shape"rect" coords"36,0,66,31"
  href"gifts.html"gt
• ltarea shape"rect" coords"71,0,101,31"
  href"cart.html"gt
• ltarea shape"rect" coords"106,0,136,31"
  href"settings.html"gt
• ltarea shape"rect" coords"141,0,171,31"
  href"help.html"gt
• lt/mapgt
• 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 gt one image
• ltdiv style"background-image
• url('a_lot_of_sprites.gif')
• background-position
• -260px -90px
• width 26px
• height 24px"gt
• lt/divgt
• overall size reduced
• generator http//spritegen.website-performance.or
  g/
• http//stevesouders.com/examples/sprites.php

10
inline images (data URLs)

• embed the content of an HTTP response in place of
  a URL
• ltIMG ALT"Red Star"
• SRC"dataimage/gifbase64,R0lGODl...wAIlEEADs
  "gt
• if embedded in HTML document, probably not cached
  gt 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
• ltframe src"datatext/html,3Chtml3E3Cbody20sty
  le3D22background..."gtlt/framegt

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