How to improve web server performance – Based on the 14 Steve Sounders’s Rules

2008 July 6

Today mostly of web sites the Web 2.0 Technology which combining the AJAX technology, RSS, Video steaming, and also containing many more rich images and flash.

The performance of the site will be decreased significantly if the sites is a popular site. The rules are getting from the Steve Sounders Presentation on Yahoo UI Blog and his book High Performance Web Sites – Essential knowledge for Front-End Engineers.

The rules as below :

  1. Make fewer HTTP requests
  2. Use a CDN
  3. Add an Expires header
  4. Gzip components
  5. Put CSS at the top
  6. Move JS to the bottom
  7. Avoid CSS expressions
  8. Make JS and CSS external
  9. Reduce DNS lookups
  10. Minify JS
  11. Avoid redirects
  12. Remove duplicate scripts
  13. Turn off ETags
  14. Make AJAX cacheable and small

Rule 1: Make fewer HTTP requests

  • Image maps
  • CSS sprites
  • Inline images
  • Combined scripts, combined stylesheets

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

CSS Sprites – Preferred

<span style=”

background-image: url(’sprites.gif’);

background-position: -260px -90px;”>

</span>

size of combined image is less

not supported in Opera 6

http://alistapart.com/articles/sprites

Inline Images

  • data: URL scheme
  • not supported in IE
  • avoid increasing size of HTML pages:
  • put inline images in cached stylesheets

Combined Scripts, Combined Stylesheets

Scripts

Stylesheets

amazon.com

3

1

aol.com

18

1

cnn.com

11

2

ebay.com

7

2

froogle.google.com

1

1

msn.com

9

1

myspace.com

2

2

wikipedia.org

3

1

yahoo.com

4

1

youtube.com

7

3

Average

6.5

1.5

combining six scripts into one eliminates five HTTP requests

challenges:

develop as separate modules

number of possible combinations vs. loading more than needed

maximize browser cache

one solution:

dynamically combine and cache

Rule 2: Use a CDN

amazon.com

Akamai

aol.com

Akamai

cnn.com

ebay.com

Akamai, Mirror Image

google.com

msn.com

SAVVIS

myspace.com

Akamai, Limelight

wikipedia.org

yahoo.com

Akamai

youtube.com

distribute your static content before distributing your dynamic content

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 days

aol.com

23/43

1/1

6/18

48%

217 days

cnn.com

0/138

0/2

2/11

1%

227 days

ebay.com

16/20

0/2

0/7

55%

140 days

froogle.google.com

1/23

0/1

0/1

4%

454 days

msn.com

32/35

1/1

3/9

80%

34 days

myspace.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/a

youtube.com

0/32

0/3

0/7

0%

26 days

Rule 4: Gzip components

You can affect users’ download times 90%+ of browsers support compression

Gzip vs. Deflate

Gzip

Deflate

Size

Size

Savings

Size

Savings

Script

3.3K

1.1K

67%

1.1K

66%

Script

39.7K

14.5K

64%

16.6K

58%

Stylesheet

1.0K

0.4K

56%

0.5K

52%

Stylesheet

14.1K

3.7K

73%

4.7K

67%

Gzip compresses more

Gzip supported in more browsers

Gzip: not just for HTML

HTML

Scripts

Stylesheets

amazon.com

x

aol.com

x

some

some

cnn.com

ebay.com

x

froogle.google.com

x

x

x

msn.com

x

deflate

deflate

myspace.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, PDF)

Gzip Configuration

Apache 2.x: mod_deflate

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

HTTP request

Accept-Encoding: gzip, deflate

HTTP response

Content-Encoding: gzip

Vary: Accept-Encoding

Gzip Edge 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.x

http://www.schroepl.net/projekte/mod_gzip/browser.htm

Consider adding Cache-Control: Private

Remove ETags (Rule 13)

Rule 5: Put CSS at the top

stylesheets block rendering in IE

http://stevesouders.com/examples/css-bottom.php

solution: put stylesheets in HEAD (per spec)

avoids Flash of Unstyled Content

use LINK (not @import)

Slowest is Fastest

Rule 6: Move scripts to the bottom

Scripts block parallel downloads across all hostnames. Scripts block rendering of everything below them in the page

IE and FF

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

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

used to set CSS properties dynamically in IE

width: 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

One-Time Expressions

Expression overwrites itself

<style>

P {

background-color: expression(altBgcolor(this));

}

</style>

<script>

function altBgcolor(elem) {

elem.style.backgroundColor = (new Date()).getHours()%2 ? “#F08A00″ : “#B8D4FF”;

}

</script>

Event Handlers

Tie behavior to (fewer) specific events

window.onresize = setMinWidth;

function setMinWidth() {

var aElements =

document.getElementsByTagName(“p”);

for ( var i = 0; i < aElements.length; i++ ) {

aElements[i].runtimeStyle.width = (

document.body.clientWidth<600 ?

“600px” : “auto” );

}

}

Rule 8: Make JS and CSS external

Inline: HTML document is bigger

External: more HTTP requests, but cached

Variables

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-Onload Download

Inline in front page

Download external files after onload

window.onload = downloadComponents;

function downloadComponents() {

var elem = document.createElement(“script”);

elem.src = “http://…/file1.js”;

document.body.appendChild(elem);

}

speeds up secondary pages

Dynamic Inlining

  • start with post-onload download
  • set cookie after components downloaded

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

Typically 20-120 ms

Block parallel downloads

OS and browser both have DNS caches

TTL (Time To Live)

www.amazon.com

1 minute

www.aol.com

1 minute

www.cnn.com

10 minutes

www.ebay.com

1 hour

www.google.com

5 minutes

www.msn.com

5 minutes

www.myspace.com

1 hour

www.wikipedia.org

1 hour

www.yahoo.com

1 minute

www.youtube.com

5 minutes

TTL – how long record can be cached browser settings override TTL

IE

  • DnsCacheTimeout: 30 minutes
  • KeepAliveTimeout: 1 minute
  • ServerInfoTimeout: 2 minutes

Firefox

  • network.dnsCacheExpiration: 1 minute
  • network.dnsCacheEntries: 20
  • network.http.keep-alive.timeout: 5 minutes
  • Fasterfox: 1 hour, 512 entries, 30 seconds

Reducing DNS Lookups

  • Fewer hostnames – 2-4
  • Keep-alive

Rule 10: Minify JavaScript

Minify External?

Minify Inline?

www.amazon.com

no

no

www.aol.com

no

no

www.cnn.com

no

no

www.ebay.com

yes

no

froogle.google.com

yes

yes

www.msn.com

yes

yes

www.myspace.com

no

no

www.wikipedia.org

no

no

www.yahoo.com

yes

yes

www.youtube.com

no

no

Minify inline scripts, too

Minify vs. Obfuscate

Original

JSMin Savings

Dojo Savings

www.amazon.com

204K

31K (15%)

48K (24%)

www.aol.com

44K

4K (10%)

4K (10%)

www.cnn.com

98K

19K (20%)

24K (25%)

www.myspace.com

88K

23K (27%)

24K (28%)

www.wikipedia.org

42K

14K (34%)

16K (38%)

www.youtube.com

34K

8K (22%)

10K (29%)

Average

85K

17K (21%)

21K (25%)

Minify – it’s safer

http://crockford.com/javascript/jsmin

http://dojotoolkit.org/docs/shrinksafe

Rule 11: Avoid redirects

  • 3xx status codes – mostly 301 and 302
  • HTTP/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

Redirects

www.amazon.com

no

www.aol.com

yes – secondary page

www.cnn.com

yes – initial page

www.ebay.com

yes – secondary page

froogle.google.com

no

www.msn.com

yes – initial page

www.myspace.com

yes – secondary page

www.wikipedia.org

yes – secondary page

www.yahoo.com

yes – secondary page

www.youtube.com

no

Avoid Redirects

Missing trailing slash

  • http://astrology.yahoo.com/astrology
  • use Alias or DirectorySlash
  • mod_rewrite
  • CNAMEs
  • Log referer – track internal links

Outbound links – harder

  • beacons – beware of race condition
  • XHR – bail at readyState 2

Rule 12: Remove duplicate scripts

Hurts performance

  • extra HTTP requests (IE only)
  • extra executions

A typical?

  • 2 of 10 top sites contain duplicate scripts
  • team size, # of scripts

Script Insertion Functions

<?php

function 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

Unique identifier returned in response

  • ETag: “c8897e-aee-4165acf0″
  • Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT
  • used in conditional GET requests
  • If-None-Match: “c8897e-aee-4165acf0″
  • If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT
  • if ETag doesn’t match, can’t send 304

The Problem with ETags

ETag for a single entity is always different across servers

ETag format

  • Apache: inode-size-timestamp
  • IIS: Filetimestamp:ChangeNumber

Sites with >1 server return too few 304s

  • (n-1)/n

Remove them

  • Apache: FileETag none
  • IIS: http://support.microsoft.com/kb/922703/

Rule 14: Make AJAX cacheable and small

XHR, JSON, iframe, dynamic scripts can still be cached, minified, and gzipped

a personalized response should still be cacheable by that person

AJAX Example: Yahoo! Mail Beta

address book XML request

→ GET /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 GMT

Cache-Control: private,max-age=0

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

Content-Type: text/xml; charset=utf-8

Content-Encoding: gzip

address book changes infrequently

  • cache it; add last-modified-time in URL

No comments yet

Leave a Reply

You must be logged in to post a comment.