Presentation is loading. Please wait.

Presentation is loading. Please wait.

CS193H: High Performance Web Sites Lecture 14: Rule 11 – Avoid Redirects Steve Souders Google

Similar presentations


Presentation on theme: "CS193H: High Performance Web Sites Lecture 14: Rule 11 – Avoid Redirects Steve Souders Google"— Presentation transcript:

1 CS193H: High Performance Web Sites Lecture 14: Rule 11 – Avoid Redirects Steve Souders Google souders@cs.stanford.edu

2 announcements midterm Friday 10/31 3:15-4:05pm 30-40 short answer questions 10/29 3:15pm (now) – check five Web 100 Performance Profile sites 11/3 – Doug Crockford from Yahoo! will be guest lecturer talking about "Ajax Performance"

3 3xx status codes "further action needs to be taken by the user agent in order to fulfill the request" 300 Multiple Choices (based on Content-Type) 301 Moved Permanently 302 Moved Temporarily (aka, Found) 303 See Other (clarification of 302) 304 Not Modified 305 Use Proxy 306 (no longer used) 307 Temporary Redirect (clarification of 302) http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.3 response for conditional GET request most popular HTTP/1.1

4 redirect example go to the new location instead of the original one why use redirects? prettier URLs track traffic authentication GET / HTTP/1.1 Host: astrology.yahoo.com Request HTTP/1.1 301 Moved Permanently Location: http://shine.yahoo.com/astrology/ Response

5 worst blocker inserting a redirect to the HTML document is worse than how stylesheets and scripts block all resources in the page are delayed the user gets very little feedback (nothing in the page) rendering, even the HTML text, is delayed 2 nd worse – redirecting to a script

6 caching redirects "Moved Permanently" – is it cached? no spec: "cacheable if indicated by a Cache-Control or Expires header field" GET / HTTP/1.1 Host: astrology.yahoo.com Request HTTP/1.1 301 Moved Permanently Date: Tue, 28 Oct 2008 07:39:53 GMT Location: http://shine.yahoo.com/astrology/ Cache-Control: private Connection: close Transfer-Encoding: chunked Content-Type: text/html; charset=utf-8 Response

7 caching: 301, 302, Expires past Expiresno Expiresfuture Expires 301 Moved Permanently don't cache: all don't cache: IE, FF3, Safari, Opera cache: FF2, Chrome don't cache: IE, FF3, Safari, Opera cache: FF2, Chrome 302 Moved Temporarily don't cache: all don't cache: IE, FF3, Safari, Opera, Chrome cache: FF2 don't cache: IE, FF3, Safari, Opera cache: FF2, Chrome IE 7 & 8(beta 2), Firefox 2.0 & 3.0, Safari 4, Opera 9.61, Chrome 0.2 FF2 and Chrome – only browsers to cache redirects * Firefox 3.1 fixes regression from FF2 to FF3 past Expiresno Expiresfuture Expires 301 Moved Permanently don't cache: all don't cache: IE, FF3, Safari, Opera cache: FF2, Chrome don't cache: IE, FF3 *, Safari, Opera cache: FF2, Chrome 302 Moved Temporarily don't cache: all don't cache: IE, FF3, Safari, Opera, Chrome cache: FF2 don't cache: IE, FF3 *, Safari, Opera cache: FF2, Chrome

8 redirect alternatives JavaScript document.location = "destination.php"; what if JavaScript is disabled or not present? meta refresh – put in document's HEAD in IE, causes conditional GET requests for all resources (similar to Reload button) # of seconds

9 cache workaround window.onload = function () { document.location = "destination.php"; } one last thing – make this document cacheable! need to let the page load so it can be cached

10 redirects in the top 10 mostly ads # redirects www.aol.com5 www.ebay.com www.facebook.com www.google.com/search search.live.com/results www.msn.com1 www.myspace.com en.wikipedia.org/wiki www.yahoo.com2 www.youtube.com

11 common uses 1.redirect from blah.com to www.blah.com 2.missing trailing slash 3.tracking internal traffic 4.tracking outbound traffic 5.prettier URLs, preserve old URLs 6.connecting web sites 7.ads 8.authentication

12 use 1: www GET / HTTP/1.1 Host: aol.com Request HTTP/1.x 301 Moved Permanently Date: Tue, 28 Oct 2008 23:01:42 GMT Expires: Tue, 28 Oct 2008 23:31:42 GMT Location: http://www.aol.com/ Response why redirect from http://aol.com/ to http://www.aol.com/? set cookies on www domain – non-issue cache resources once regardless of which URL is used http://aol.com/logo.gif http://www.aol.com/logo.gif

13 use 1: www in the top 10 statusExpires aol.com301+30 mins ebay.com301 facebook.com301July 1997 google.com301+30 days search.live.comna msn.com301 myspace.com301 wikipedia.org200 yahoo.com301 youtube.com303Apr 1971 303 See Other – "MUST NOT be cached" how is this possible?! which top 10 sites redirect from blah.com to www.blah.com?

14 use 1: www & Wikipedia all resources referenced via full URLs easy, if you're doing CDN domain sharding cookieless domain another alternative

15 use 2: missing trailing slash GET /msn HTTP/1.1 Host: astrocenter.astrology.msn.com Request HTTP/1.x 301 Moved Permanently Location: http://astrocenter.astrology.msn.com/msn/ Response reasons to redirect for missing trailing slash: autoindexing workaround: don't use autoindexing relative URLs for resources workaround: use base href, full URLs, or URLs relative to root

16 use 3: internal tracking GET /_ylt=Al…ume/**http%3A//tools.search.yahoo.com/abou t/forsearchers.html HTTP/1.1 Host: m.www.yahoo.com Request HTTP/1.x 302 Moved Temporarily Location: http://tools.search.yahoo.com/about/forsearchers.h tml Response "More" link on Yahoo! front page workaround: track referer [sic] on internal servers

17 use 4: outbound tracking GET /url?…url=http%3A%2F%2Fwww.npr.org/… HTTP/1.1 Host: www.google.com Request HTTP/1.x 302 Found Location: http://www.npr.org/ Response clicking on a Google search result workarounds: image beacon – race conditions XMLHttpRequest readyState 2 – faster, more complex HTML 5

18 use 5: prettier URLs GET / HTTP/1.1 Host: music.myspace.com Request HTTP/1.x 302 Moved Location: http://profile.myspace.com/index.cfm?fuseaction=music Response prettier URLs are easier to remember also, preserve old URLs when code changes workaround: mod_rewrite, cacheable redirects

19 use 6: connecting sites http://toolbar.google.com/ http://toolbar.google.com/index.html http://toolbar.google.com/T5/ http://toolbar.google.com/T5/intl/en/index.html http://www.google.com/tools/firefox/toolbar/F T3/intl/en/index.html redirects are an easy way to "integrate" separate teams (T4, T5), separate code bases (IE, FF), separate servers (toolbar, www) workarounds: CNAMEs, mod_rewrite

20 use 7: ads specifically, counting ad impressions advertisers and publishers have a hard time reconciling the count when do you count an ad impression? when a page containing an ad is served? what if the page never arrives? when a page containing an ad arrives at the client? what if the ad request fails, or the user stops the page? when the content of the ad (image, Flash) is requested from the advertiser? what if the user leaves the page before the content arrives? after the content arrives? is it the publisher's fault if the content is slow?

21 use 7: ads how do you count an ad impression? when a page containing an ad is served? count it on the publisher's backend when a page containing an ad arrives at the client? send a beacon from the client when the content of the ad (image, Flash) is requested from the advertiser? count it on the advertiser's backend after the content arrives? send a beacon from the client redirects can help count when content is served and reconcile the two parties

22 use 7: ads http://ad.doubleclick.net/im … 5|1;;cs=o%3fhttp://ad.do ubleclick.net/dot.gif?258824979 http://ad.doubleclick.net/dot.gif?258824979 http://eatps.web.aol.com:9000/open_web_adhoc?subt ype=40 … 458 http://www.aolcdn.com/pops_promo/pixel http://ad.doubleclick.net/ad/N553.AEAOLService/B277 5919.11;dcadv=1297440;sz=1x1;ord=4613012? http://m1.2mdn.net/viewad/1297440/1x1.gif from http://www.aol.com/ double logging?

23 use 7: ads http://ads.cnn.com/event.ng/Type=count&Clie … ARd http://i.cdn.turner.com/cnn/images/1.gif http://ad.doubleclick.net/ad/N3880.SD146.3880/B310 7454.25;dcove=o;sz=1x1;ord=dwgksue,beqpWcytARh? http://m1.2mdn.net/viewad/1139835/67-1x1.gif from http://www.cnn.com/ double logging?

24 use 8: authentication cookies are used for authentication cookies can only be set on the page's domain how authenticate someone on domain A if they're currently on domain B? redirects authentication is often on https servers how authenticate someone on https if they're currently on http? redirects

25 use 8: authentication https://www.google.com/accounts/ServiceLoginBoxAuth https://www.google.com/accounts/CheckCookie?con tinue=http%3A%2F%2Fgroups.google.com%2Fgroups %2Fauth%3F_done … http://groups.google.com/groups/auth?_done … http://groups.google.com/ one reason why redirects with Set-Cookie are sometimes not cached

26 avoid redirects eliminate the need base href or full URLs for resources referer tracking HTML 5 – A ping and LINK pingback CNAMEs mod_rewrite no autoindex make them cacheable 301 with future Expires JavaScript & meta refresh with future Expires

27 Homework study for midterm – 10/31 3:15-4:05pm 11/7 11:59pm – rules 4-10 applied to your "Improving a Top Site" class project

28 Questions What's the status text for 301 and 302? What HTTP response header contains the URL the user is redirected to? Why are redirects worse than stylesheets and scripts in terms of blocking? If a redirect is "Moved Permanently", does that mean it's cached? Which browsers today cache redirects? What are two other techniques for doing redirects? How do they compare to the 301/302 status approach?


Download ppt "CS193H: High Performance Web Sites Lecture 14: Rule 11 – Avoid Redirects Steve Souders Google"

Similar presentations


Ads by Google