“Don’t make me wait”

or

Building High-Performance

Web Apps

Stoyan Stefanov, Yahoo! Voices That Matter San Francisco, June 29, 2009 http://slideshare.net/stoyan/

About me •  Yahoo! Search •  Yahoo! Exceptional Performance •  YSlow 2.0 architect •  http://smush.it •  Books, articles •  http://phpied.com

Why?

Importance of performance

1sec = -2.8% revenue

Importance of performance

Gets worse with time

After-effect

Importance of performance

•  Yahoo!: 400 ms slower = 5-9% drop in full-page traffic

Importance of performance

Slower pages get less traffic

Importance of performance

From 4-6 seconds to 1.5 seconds

Importance of performance

•  Psychology, physiology •  Effects of waiting •  “Time is money” •  Make people happy

Importance of performance

•  SEO •  Speed is a ranking factor

Where to start?

Ashton Kutcher’s Twitter

First visit, empty cache

10% 90%

Repeat visit, full cache

38% 62%

Front-end performance

•  Where 80% time is spent •  Easier •  Works

The Waterfall

The Waterfall

1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early

The Waterfall

1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early

Fewer components

•  HTTP requests are expensive •  Combine components

The Golden Rule:

Reduce the number of HTTP requests

Fewer components

•  Before:

<script src="jquery.js"></script> <script src="jquery.twitter.js"></script> <script src="jquery.cookie.js"></script> <script src="myapp.js"></script> 

Fewer components

•  After:

<script src="all.js" type="text/javascript">

</script>

Fewer components

•  Saved 3 HTTP requests 

Fewer components

•  repeat for CSS:

<link href="all.css" rel="stylesheet" type="text/css"

/>

Fewer components

•  CSS sprites for background images

background-position: -22px -0px;width: 12px;height: 10px;

Fewer components

CSS sprites •  Before: 15 requests, 6.8 K •  After: 1 request, 1.4 K 

Fewer components

•  CSS sprites are a pain but there are tools

http://csssprites.com/

Less stuff – duh!

•  No 404s •  No duplicates •  No near-duplicates

Near duplicates

•  30x30 vs. 49x49

•  Rounded corners, shadows

The Waterfall

1.  Less stuff ✔ 2.  Smaller stuff 3.  Out of the way 4.  Start early

The Waterfall

1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early

Gzip

•  Server compression

Gzip

•  What to gzip?

HTML, XHTML, XML, W00TChaMaCallitML, CSS, JS, JSON, HTC,

plain text… all but binary

fonts too

Gzip

•  How to gzip?

AddOutputFilterByType DEFLATE text/html text/… 

http://www.sitepoint.com/article/web-site-optimization-steps

Minify

•  Before

Minify

•  After

Minify

•  YUI Compressor •  Minifies both JS and CSS

http://developer.yahoo.com/yui/compressor/http://tools.w3clubs.com/cssmin/

Gzip or minification?

•  62,885 bytes - jQuery

•  31,822 - minified •  19,758 - original gzipped

•  10,818 - minified and gzipped

http://www.julienlecomte.net/blog/2007/08/13/

FTW

Gzip + minification

•  Filesize reduction: - 85% for JavaScript - 80% for CSS •  Almost a crime if you don’t

Optimizing image file sizes

Now lossless

Rule #1: No GIFs

$ optipng *.gif

PNG-8

•  Palette image (like GIF) •  256 colors (like GIF) •  Smaller than GIF •  Alpha transparency

Rarely PNG-24

•  Truecolor

OptiPNG

PNGOut

PNGCrushPNGRewrite

DeflOpt

PNGOptimizer

AdvPNG

PNGSlim

JPEG

•  The format for photos •  Run through JPEGTran

Study of the images on the top

1000 sites Q: How many GIFs are out there? Q: What if we make them PNG? Q: Are PNGs optimized? Q: Are JPEGs optimized?

Top 1000 – GIF vs. PNG?

GIF 73%

Animated GIF 3%

PNG 24%

Top 1000 – GIF vs. PNG vs. JPG?

GIF 40%

Animated GIF 1% PNG

13%

JPEG 46%

Top 1000 – GIF to PNG

$ optipng *.gif$ pngoptimizercl –file:"*.png”(1 min/1000 files)

23.79% savings

http://www.youtube.com/watch?v=bPdkWJe9XH0

Top 1000 – Optimizing PNG

$ pngoptimizercl –file:"*.png"

16.90% savings

Top 1000 – Optimizing JPG

$ jpegtran –copy none -optimize

13.08% savings

Images – progressive JPEG

•  for images ~10K+

Images

•  It’s only human to forget •  Best to have a process so

you don’t have to remember

Web Fonts

•  Don’t go overboard!•  Subset •  Gzip!

http://snook.ca/archives/html_and_css/screencast-converting-ttf2eot

The Waterfall

1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way 4.  Start early

The Waterfall

1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early

Free-falling waterfalls

•  Serve components from not more than 2-4 domains

•  Fewer redirects

JavaScript rocks!

•  But also blocks

html

js

png

png

JavaScript at the bottom

html

js

png

png

Non-blocking JavaScript

•  Asynchronous JavaScript

var js = document.createElement('script'); js.src = 'myscript.js'; var h = document.getElementsByTagName('head')[0]; h.appendChild(js); 

html

js

png

png

The Waterfall

1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way ✔ 4.  Start early

The Waterfall

1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early

flush() early

html

png

js

css

html

png

js

css

✔

flush() <html><head> <script src="my.js"

type="text/javascript"></script> <link href="my.css"

type="text/css" rel="stylesheet" /></head>

<body> ....

<?php flush() ?>

Progressive rendering Chunk #1

Chunk #2

Chunk #3

Progressive + source order 1

2 3

4

The Waterfall

1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way ✔ 4.  Start early ✔

Tools

Waterfall view

Firebug Net Panel

Web Inspector

Fiddler, HTTPWatch, WebPageTest.com

YSlow

•  Firebug extension

•  Why (is my page) slow?

http://developer.yahoo.com/yslow/

YUICompressor Desktop

Words of Wisdom

What not to say…

•  “Everyone is on high-speed these days” •  “It’s all in the cache”

Speed matters

•  It affects the user happiness •  It affects the bottom line •  It affects search engine rankings

Front-end

•  That’s where the time is spent •  Good news: - we control it - cheap

Thank you!

Stoyan Stefanov @stoyanstefanov http://www.phpied.com