High Performance Web Sites 4352

8/14/2019 High Performance Web Sites 4352

1/97

High Performance Web Sites

14 rules for faster-loading pages

Steve [email protected]

Tenni [email protected]


2/97

Introduction


3/97

Exceptional Performance

started in 2004quantify and improve the performance of

all Yahoo! products worldwide

center of expertisebuild tools, analyze data

gather, research, and evangelize bestpractices


4/97

Scopeperformance breaks into two categories

response time efficiency

current focus is response timeof web products


5/97

Rough Cuts: now

Hardcopy: Summer 2007

http://www.oreilly.com/catalog/9780596514211/


6/97

T he Importance of Front- E ndPerformance


7/97

percentage of time spent on the front-end

Back-end vs. Front-end

E mpty Cache Full Cacheamazon.com 82% 86%

aol.com 94% 86%cnn.com 81% 92%ebay.com 98% 92%google.com 86% 64%msn.com 97% 95%myspace.com 96% 86%wikipedia.org 80% 88%

yahoo.com 95% 88%youtube.com 97% 95%


8/97

The Performance Golden Rule

80-90% of the end - user response time is

spent on the front - end. Start there.

G reater potential for improvementSimpler

Proven to work


9/97

ScheduleP erformance Researchb reak

14 Rules

b reakCase Studies

Live Analysis


10/97

P erformance R

esearch


11/97

perceived response time

what is the end users e x perience?

slow crawl boring snailstagnant une x ceptionalyawn unresponsive

impatient delay moderateblah subdue drag apathetic

prolong slack load sluggishsleepy late une x citingreduced lag complex heavy

unmemorable obscurewhy wait

performance speedenjoyable urgent instantaccelerate perception snapachievement better improve

action pleasant pace quick

promote swift coolma x imum drive promptadvance fast hurry rush

satisfying feel e x ceptionalbrisk rapid exciting


12/97

User Perception

U sability and perception are important for

performance.

The users perception is more relevant thanactual unload-to-onload response time.

Definition of "user onload" is undefined orvaries from one web page to the next.


13/97

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/


14/97

80/20Performance Rule

Vilfredo P areto:80% of consequences come from 20% of causes

Focus on the 20% that affects 80% of theend-user response time.

Start at the front - end.


15/97

11user requests

www.yahoo.com

22user requests

other web pages

33user re-requestswww.yahoo.com

E mpty vs. Full Cache


16/97

11user requests

www.yahoo.com

22user requests

other web pages



0 0.5 1 1.5 2 2.5 3

imagestylesheet

scriptscript

dns lookupimageimageimage

imageimage

dns lookupscript

imageimageimageimageimageimageimageimagescript

imageimageimageimageimageimageimageimagescriptdns lookup

imageimage

htmldns lookup

with an empty cache


17/97

11user requests

www.yahoo.com

22user requests

other web pages




18/97


0 0.5 1 1.5 2 2.5 3

imageimage

html

Expires header

11user requests

www.yahoo.com

22user requests

other web pages


with a full cache


19/97


empty cache

2.4 seconds

full cache0.9 seconds

83% fewer bytes90% fewer HTTP requests


20/97

How much does this benefit our users?

It depends on how many users havecomponents in cache.

W hat percentage of users view a page withan empty cache *?* Empty cache means the browser has to request the componentsinstead of pulling them from the browser disk cache.

W hat percentage of page views are donewith an empty cache *?


21/97



22/97

Add a new image to your page

with the following response headers:

Exp ires: Thu, 15 A p r 2004 20:00:00 GMTLast-Modified: Wed, 28 Se p 2006 23:49:57 GMT

}1 px

B rowser Cache Ex periment


23/97


Requests from the browser will haveone of these response status codes:

200 The browser does not have the imagein its cache.

30 4 The browser has the image in its cache,but needs to verify the last modified date.


24/97


W hat percentage of usersview with an empty cache?

# unique users with at leastone 200 response

total # unique users

W hat percentage of pageviews are done with anempty cache?

total # of 200 responses# of 200 + # of 304responses

}1 px


25/97

0.0%

10.0%

20.0%

30.0%

40.0%

50.0%

60.0%

70.0%

80.0%

90.0%

100.0%

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

day of exper i ent

p e r c e n

t a g e

un ique users w ith empty cache

page v iews w ith empty cache

Surprising Results

page views withempty cache

40-60% ~20%

users withempty cache


26/97

Ex periment T akeaways

Keep in mind the empty cache user

experience. It might be more prevalentthan you think!

U se different techniques to optimize fullversus empty cache experience.


27/97

http://yuiblog.com/blog/2007/03/01/performance-research-part-3


28/97

11user requests

www.yahoo.com

HTT P Quick Review

HTTP response header sent by the web server:HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8

Set-Cookie: C=abcdefghijklmnopqrstuvwxyz; domain=.yahoo.com


29/97

11user requests

www.yahoo.com

HTT P Quick Review

22user requests

finance.yahoo.com

HTTP request header sent by the browser:GE T / HTTP/1.1Host: finance.yahoo.com

User-Agent: Mozilla/4.0 (compatible; MSIE

6.0; Cookie: C=abcdefghijklmnopqrstuvwxyz;


30/97

11user requests

www.yahoo.com

33user requests

autos.yahoo.com

HTT P Quick Review

HTTP request header sent by the browser:GE T / HTTP/1.1Host: autos.yahoo.com


6.0; Cookie: C=abcdefghijklmnopqrstuvwxyz ;


31/97

11user requests

www.yahoo.com

44user requests

mail.yahoo.com

HTT P Quick Review

HTTP request header sent by the browser:GE T / HTTP/1.1Host: mail.yahoo.com




32/97

11user requests

www.yahoo.com

55user requests

tech.yahoo.com

HTT P Quick Review

HTTP request header sent by the browser:GE T / HTTP/1.1Host: tech.yahoo.com




33/97

Impact of Cookies on Response T ime

80 ms delay dialup users

Cookie Size T ime Delta0 bytes 78 ms 0 ms

500 bytes 79 ms +1 ms1000 bytes 94 ms +16 ms1500 bytes 109 ms +31 ms

2000 bytes 125 ms +47 ms2500 bytes 141 ms +63 ms3000 bytes 156 ms +78 ms

keep sizes low


34/97

.yahoo.com cookie sizes

28 .86%

51 .80%

17 .79%

1 . %

0%

100%

p e r c e n t a g e

f p a g e v

i e w s o ver 1501 b tes

1001-1500 b tes

501-1000 b tes1-500 b tes


35/97

Analysis of Cookie Sizes across the Web

Total Cookie SizeAmazon 60 bytesG oogle 72 bytesYahoo 122 bytesCNN 184 bytes

YouTube 218 bytesMSN 268 byteseBay 331 bytesMySpace 500 bytes


36/97


eliminate unnecessary cookies

keep cookie sizes lowset cookies at appropriate domain level

set Expires date appropriately earlier date or none removes cookie sooner


37/97



38/97

Pa ra ll l l ad s

Tw o ompon n t n p r p r ho tn m

G IF G IF

G IF

G IF

G IF

G IF

HTTP/ 1.1


39/97

Parallel Downloads

0 0 .

0.

0.

0.

.

.

c

tc

tc

tc

tc

tc

tc

tc

tc

tc

tt

l

0 0 .

0.

0.

0.

.

.

c

tc

tc

tc

tc

tc

tc

tc

tc

tc

tt

l

Two in parallel

Four in parallelE ight in parallel 0 0 . 0. 0. 0. . .

c tc tc tc tc t

c tc tc tc tc t

!

t

l


40/97

Max imizing Parallel Downloads

r es se t e(sec ds)

aliases


41/97


r es se ti e(sec ds)

aliases

0.00

0.20

0.40

0.60

0.80

1.00

1.20

1.40

1 2 4 5 1"

36 x 36 px ( .9 Kb) 116 x 61 px (3.4 Kb)


42/97


r es se ti e

(sec ds)

aliases

0.00

0.20

0.40

0.60

0.80

1.00

1.20

1.40

1 2 4 5 1#

average 36 x 36 px ( .9 Kb) 116 x 61 px (3.4 Kb)


43/97


r es se ti e

(sec ds)

r le f t : use a t leas t tw bu t r e t a f u r aliases

0.00

0.20

0.40

0.60

0.80

1.00

1.20

1.40

1 2 4 5 1$

average 36 x 36 px ( .9 Kb) 116 x 61 px (3.4 Kb)


44/97


consider the effects of C P U thrashing

DNS lookup times vary across ISP s andgeographic locations

domain names may not be cached


45/97

Summary

W hat the 80/20 Rule Tells U s about

Reducing HTT P Requestshttp://yuiblog.com/blog/2007/04/11/performance-research-part-4/Browser Cache U sage Exposed!


W hen the Cookie Crumbleshttp://yuiblog.com/blog/2007/01/04/performance-research-part-2/

Maximizing P arallel Downloads in theCarpool Lanehttp://yuiblog.com/blog/2007/04/11/performance-research-part-4/


46/97

14 Rules


47/97

14 Rules1. Make fewer HTT P requests2. U se a CDN3. Add an Expires header

4. G zip components5. P ut CSS at the top6. Move JS to the bottom7. Avoid CSS expressions8. Make JS and CSS external9. Reduce DNS lookups10. Minify JS

11. Avoid redirects12. Remove duplicate scripts13. Turn off ETags14. Make AJAX cacheable and small


48/97

Rule 1: Make fewer HTTP requests

image maps

CSS spritesinline images

combined scripts, combined stylesheets


49/97

Image maps

server-side< a href="navbar.cgi"> < img ismap src="imagemap.gif"> < /a>

http://.../navbar.cgi?127,13

client-side preferred< img usemap="#map1" border=0 src="/images/imagemap.gif">< map name="map1">

< area shape="rect" coords="0,0,31,31" href="home.html" title="Home">

< /map>

drawbacks: must be contiguous defining area coordinates tedious, errors

http://www.w3.org/T R /html401/struct/objects.html#h-13.6


50/97

CSS Sprites Preferred

size of combined image is lessnot supported in Opera 6http://alistapart.com/articles/sprites

< span style="background-image: url('sprites.gif');background-position: -260px -90px;">

< /span>


51/97

Inline Images

data: U RL schemedata:[ < mediatype>][;base64], < data>

< IMG ALT=Red StarSRC="data:image/gif;base64,R0l G ODlhDAAMALMLAPN8ffBiYvWWlvrKy/FvcPewsO9VVf

ajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BA E AAAsALAAAAAAMAAwAAAQzcE lZyryTE HyTUgknHd9x G V+qKsYirKkwDYiKDBiatt2H1KBLQRFIJAIKywRgmhwAIl EE ADs=">

not supported in IEavoid increasing size of HTML pages:

put inline images in cached stylesheets

http://tools.ietf.org/html/rfc2397

Combined Scripts,


52/97

Combined Scripts,

Combined StylesheetsScripts Stylesheets

amazon.com 3 1

aol.com 18 1

cnn.com 11 2

ebay.com 7 2

froogle.google.com 1 1msn.com 9 1

myspace.com 2 2

wikipedia.org 3 1yahoo.com 4 1

youtube.com 7 3Average 6.5 1.5

Combined Scripts,


53/97

Combined Scripts,

Combined Stylesheetscombining six scripts into one eliminates

five HTTP requestschallenges:

develop as separate modules number of possible combinations vs. loading

more than needed maximize browser cache

one solution: dynamically combine and cache

R l 2 U CDN


54/97

Rule 2: Use a CDN

distribute your static content before

distributing your dynamic content

amazon.com Akamaiaol.com Akamaicnn.com

ebay.com Akamai, Mirror Imagegoogle.commsn.com SAVVI S

myspace.com Akamai, Limelightwikipedia.orgyahoo.com Akamaiyoutube.com

R l 3 Add E i h d


55/97

Rule 3: Add an Expires header not just for images

Images Stylesheets Scripts % Median Age

amazon.com 0/62 0/1 0/3 0% 114 daysaol.com 23/43 1/1 6/18 48% 217 dayscnn.com 0/138 0/2 2/11 1% 227 daysebay.com 16/20 0/2 0/7 55% 140 daysfroogle.google.com 1/23 0/1 0/1 4% 454 days

msn.com 32/35 1/1 3/9 80% 34 daysmyspace.com 0/18 0/2 0/2 0% 1 day

wikipedia.org 6/8 1/1 2/3 75% 1 day

yahoo.com 23/23 1/1 4/4 100% n/ayoutube.com 0/32 0/3 0/7 0% 26 days

R l 4 G i t


56/97

Rule 4: Gzip components

you can affect users' download times

90%+ of browsers support compression

G i D fl t


57/97

Gzip compresses moreG zip supported in more browsers

Gzip vs. Deflate

Gzip Deflate

Size Size Savings Size SavingsScript 3.3 K 1.1 K 67% 1.1K 66%

Script 39.7 K 14.5 K 64% 16.6K 58%

Stylesheet 1.0 K 0.4 K 56% 0.5K 52%

Stylesheet 14.1 K 3.7 K 73% 4.7K 67%

Gzip: not just for H T ML


58/97

Gzip: not just for H T MLHT ML Scripts Stylesheets

amazon.com x

aol.com x some somecnn.comebay.com x

froogle.google.com x x x

msn.com x deflate deflatemyspace.com x x x

wikipedia.org x x x

yahoo.com x x x

youtube.com x some some

gzip scripts, stylesheets, XML, JSON (not

images, P DF)

Gzip Configuration


59/97

Gzip Configuration

Apache 2.x: mod_deflateAddOutputFilterByType D E FLAT E text/html text/css

application/x-javascript

HTTP requestAccept- E ncoding: gzip, deflate

HTTP responseContent- E ncoding: gzipVary: Accept- E ncoding

needed for proxies

Gzip E dge Cases


60/97

Gzip E dge Cases

< 1% of browsers have problems with gzip

IE

5.5:http://support.microsoft.com/default.aspx?scid=kb;en-us;Q313712 IE 6.0:

http://support.microsoft.com/default.aspx?scid=kb;en-us;Q31249

Netscape 3.x, 4.xhttp://www.schroepl.net/projekte/mod_gzip/browser.htm

consider adding Cache-Control: Private

remove ETags ( Rule 13)hard to diagnose; problem getting smaller

Rule 5: Put CSS at the top


61/97

Rule 5: Put CSS at the top

stylesheets block rendering in IEhttp://stevesouders.com/examples/css-bottom.php

solution: put stylesheets in H EAD (per spec)avoids Flash of U nstyled Contentuse L INK (not @import)

Slowest is Fastest


62/97

Slowest is Fastest

Rule 6: Move scripts to the bottom


63/97


scripts block parallel downloads across all

hostnamesscripts block rendering of everything below

them in the pageIE and FF

http://stevesouders.com/examples/js-middle.php



64/97


script defer attribute is not a solution blocks rendering and downloads in FF slight blocking in IE

solution: move them as low in the page as

possible

Rule 7: Avoid CSS expressions


65/97

Rule 7: Avoid CSS expressions

used to set CSS properties dynamically in IEwidth: expression(

document.body.clientWidth < 600 ?600px : auto );

problem: expressions execute many times mouse move, key press, resize, scroll, etc.

http://stevesouders.com/examples/expression-counter.php

O ne- T ime Ex pressions


66/97

ne ime pressions

expression overwrites itself< style>P {

background-color: expression(altBgcolor(this));}< /style>

< script>function altBgcolor(elem) {

elem.style.backgroundColor = (newDate()).getHours()%2 ? "#F08A00" : "#B8D4FF";

}< /script>

E vent Handlers


67/97

vent Handlers

tie behavior to (fewer) specific eventswindow.onresize = setMinWidth;function setMinWidth() {

var a E lements =document.get E lementsByTagName("p");

for ( var i = 0; i < a E lements.length; i++ ) {

a E lements[i].runtimeStyle.width = (document.body.clientWidth < 600 ?"600px" : "auto" );

}}

Rule 8: Make JS and CSS external


68/97

Rule 8: Make JS and CSS external

inline: HTML document is bigger

external: more HTT P requests, but cachedvariables

page views per user (per session) empty vs. full cache stats component re-use

external is typically better home pages may be an exception

Post- O nload Download


69/97

Post nload Download

inline in front page

download external files after onloadwindow.onload = downloadComponents;function downloadComponents() {

var elem = document.create E lement("script");

elem.src = "http://.../file1.js";document.body.appendChild(elem);...

}

speeds up secondary pages

Dynamic Inlining


70/97

y g

start with post-onload download

set cookie after components downloadedserver-side:

if cookie, use external else, do inline with post-onload download

cookie expiration date is key

speeds up all pages

Rule 9: Reduce DNS lookups


71/97

p

typically 20-120 ms

block parallel downloadsOS and browser both have DNS caches

TT L (T ime T o L ive)


72/97

( )www.amazon.com 1 minutewww.aol.com 1 minutewww.cnn.com 10 minuteswww.ebay.com 1 hourwww.google.com 5 minuteswww.msn.com 5 minutes

www.myspace.com 1 hourwww.wikipedia.org 1 hourwww.yahoo.com 1 minutewww.youtube.com 5 minutes

TTL how long record can be cachedbrowser settings override TTL

B rowser DNS Cache


73/97

IE

DnsCacheTimeout: 30 minutes KeepAliveTimeout: 1 minute Server InfoTimeout: 2 minutes

Firefox network.dnsCache Expiration: 1 minute network.dnsCache Entries: 20 network.http.keep-alive.timeout: 5 minutes Fasterfox: 1 hour, 512 entries, 30 seconds

Reducing DNS L ookups


74/97

g p

fewer hostnames 2-4

keep-alive

Rule 10: Minify JavaScript


75/97

M inifyEx ternal?

M inifyInline?

www.amazon.com no no

www.aol.com no nowww.cnn.com no nowww.ebay.com yes nofroogle.google.com yes yeswww.msn.com yes yeswww.myspace.com no nowww.wikipedia.org no no

www.yahoo.com yes yeswww.youtube.com no no

minify inline scripts, too

M inify vs. O bfuscate


76/97

O riginal JS M in Savings Dojo Savings

www.amazon.com 204 K 31K (15%) 48K (24%)

www.aol.com 44 K 4K (10%) 4K (10%)

www.cnn.com 98 K 19K (20%) 24K (25%)

www.myspace.com 88 K 23K (27%) 24K (28%)

www.wikipedia.org 42 K 14K (34%) 16K (38%)

www.youtube.com 34 K 8K (22%) 10K (29%)Average 8 5K 17K ( 2 1%) 2 1K (2 5%)

minify it's saferhttp://crockford.com/javascript/jsminhttp://dojotoolkit.org/docs/shrinksafe

Rule 11: Avoid redirects


77/97

3xx status codes mostly 301 and 302HTTP/1.1 301 Moved Permanently

Location: http://stevesouders.com/newuri

add Expires headers to cache redirects

worst form of blocking

http://www.w3.org/ Protocols/rfc2616/rfc2616-sec10.html

Redirects


78/97

Redirects

www.amazon.com no

www.aol.com yes secondary pagewww.cnn.com yes initial pagewww.ebay.com yes secondary page

froogle.google.com nowww.msn.com yes initial pagewww.myspace.com yes secondary pagewww.wikipedia.org yes secondary pagewww.yahoo.com yes secondary pagewww.youtube.com no

Avoid Redirects


79/97

missing trailing slash http://astrology.yahoo.com/astrology

use Alias or DirectorySlashmod_rewrite

CNAMEslog referer track internal links

outbound links harder beacons beware of race condition XHR bail at readyState 2

Rule 12: Remove duplicate scripts


80/97

hurts performance extra HTT P requests ( IE only) extra executions

atypical?

2 of 10 top sites contain duplicate scriptsteam size, # of scripts

Script Insertion Functions


81/97

< ?phpfunction insertScript($jsfile) {

if ( alreadyInserted($jsfile) ) { return; }

pushInserted($jsfile);

if ( hasDependencies($jsfile) ) {$dependencies = getDependencies($jsfile);for ( $i = 0; $i < count($dependencies); $i++ ) {

insertScript($dependencies[$i]);}

}

echo ' < script type="text/javascript" src="' .getVersion($jsfile) . '"> < /script>";

}?>

Rule 13: Turn off ETags


82/97

unique identifier returned in responseE Tag: "c8897e-aee-4165acf0"

Last-Modified: Thu, 07 Oct 2004 20:54:08 G MT

used in conditional G ET requestsIf-None-Match: "c8897e-aee-4165acf0"If-Modified-Since: Thu, 07 Oct 2004 20:54:08 G MT

if ETag doesn't match, can't send 304

T he Problem with E T ags


83/97

ETag for a single entity is always differentacross servers

ETag format Apache: inode-size-timestamp

IIS: Filetimestamp:ChangeNumberSites with >1 server return too few 304s

(n-1)/nRemove them

Apache: File E Tag none IIS: http://support.microsoft.com/kb/922703/

Rule 14: Make AJAX cacheable


84/97

and smallXHR , JSON, iframe, dynamic scripts can

still be cached, minified, and gzippeda personalized response should still be

cacheable by that person

AJ AX Ex ample: Yahoo! Mail Beta


85/97

address book XML requestGE T /yab/[...]&r=0.5289571053069156 HTTP/1.1

Host: us.xxx.mail.yahoo.com HTTP/1.1 200 OK

Date: Thu, 12 Apr 2007 19:39:09 G MTCache-Control: private,max-age=0

Last-Modified: Sat, 31 Mar 2007 01:17:17G

MTContent-Type: text/xml; charset=utf-8Content- E ncoding: gzip

address book changes infrequently cache it; add last-modified-time in U RL


86/97

Live

Analysis

IB M Page Detailer


87/97

packet sniffer

W indows onlyIE , FF, any .exe

c:\windows\wd_ W S2s.ini

Executable=(N ETSCAP E . EXE),(NETSCP 6. EXE),(firefox.exe)free trial, $300 license

http://alphaworks.ibm.com/tech/pagedetailer


88/97

http://alphaworks.ibm.com/tech/pagedetailer

Fasterfo x


89/97

measures load time of pages

alters config settings for faster loadingFirefox extension

free

http://fasterfox.mozdev.org/

L iveH TT PHeaders


90/97

view HTTP headers

Firefox extensionfree

http://livehttpheaders.mozdev.org/

Firebug


91/97

web development evolved

inspect and edit HTMLtweak and visualize CSS

debug and profile JavaScriptmonitor network activity (caveat)Firefox extensionfree

http://getfirebug.com/


92/97

http://getfirebug.com/

YSlow


93/97

performance lint tool

grades web pages for each ruleFirefox extensionYahoo! internal tool


94/97


95/97

Conclusion

T akeaways


96/97

focus on the front-end

harvest the low-hanging fruityou do control user response timesLOFNO be an advocate for your users

L inks


97/97

book: http://www.oreilly.com/catalog/9780596514211/examples: http://stevesouders.com/examples/image maps: http://www.w3.org/T R /html401/struct/objects.html#h-13.6

CSS sprites: http://alistapart.com/articles/spritesinline images: http://tools.ietf.org/html/rfc2397jsmin: http://crockford.com/javascript/jsmindojo compressor: http://dojotoolkit.org/docs/shrinksafeHTTP status codes: http://www.w3.org/ P rotocols/rfc2616/rfc2616-sec10.htmlIBMP age Detailer: http://alphaworks.ibm.com/tech/pagedetailerFasterfox: http://fasterfox.mozdev.org/LiveHTTP Headers: http://livehttpheaders.mozdev.org/Firebug: http://getfirebug.com/YUI Blog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

http://yuiblog.com/blog/2007/01/04/performance-research-part-2/http://yuiblog.com/blog/2007/03/01/performance-research-part-3/http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

YDN:http://developer.yahoo.net/blog/archives/2007/03/high_performanc.htmlhttp://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html

High Performance Web Sites 4352

Documents