1 / 12

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

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

kolton
Download Presentation

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

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS193H:High Performance Web SitesLecture 5: Make Fewer HTTP Requests Steve Souders Google souders@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/average-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 => 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

  6. MySpace my "Improving Top Site" site

  7. 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

  8. 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

  9. 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

  10. data: URLs not just for images Hammerhead: <frame src="data:text/html,%3Chtml%3E%3Cbody%20style%3D%22background..."></frame>

  11. 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

More Related