cs193h high performance web sites lecture 5 make fewer http requests l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests PowerPoint Presentation
Download Presentation
CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests

Loading in 2 Seconds...

play fullscreen
1 / 12

CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests - PowerPoint PPT Presentation


  • 212 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests' - kolton


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cs193h high performance web sites lecture 5 make fewer http requests

CS193H:High Performance Web SitesLecture 5: Make Fewer HTTP Requests

Steve Souders

Google

souders@cs.stanford.edu

announcements
Announcements

Second HTTPWatch request list was sent today

rule 1 make fewer http requests
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 requests4
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
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
MySpace

my "Improving Top Site" site

image maps
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
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
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
data: URLs

not just for images

Hammerhead:

<frame src="data:text/html,%3Chtml%3E%3Cbody%20style%3D%22background..."></frame>

homework
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