CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP by kp9T966

VIEWS: 3 PAGES: 12

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

         Steve Souders
            Google
    souders@cs.stanford.edu
             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

								
To top