Mark Phillipmarkphillip.com

200s, 304s,Expires Headers,HTTP Compression,And You

”“Well, I’m including a bunch of

JavaScript and CSS, but usersonly have to download it once.

After that, it’ll be really fast.

Web Browsing 101Your HTML is a shopping list.

Yahoo! Extreme Performance

Make Fewer HTTP Requests

Use a Content Delivery Network

Add an Expires or a Cache-Control Header

Gzip Components

Put Stylesheets at the Top

Put Scripts at the Bottom

Avoid CSS Expressions

Make JavaScript and CSS External

Reduce DNS Lookups

Minify JavaScript and CSS

Avoid Redirects

Remove Duplicate Scripts

Configure ETags

Make Ajax Cacheable

Flush the Buffer Early

Use GET for AJAX Requests

Post-load Components

Preload Components

Reduce the Number of DOM Elements

Split Components Across Domains

Minimize the Number of iframes

No 404s

Reduce Cookie Size

Use Cookie-free Domains for Components

Minimize DOM Access

Develop Smart Event Handlers

Choose <link> over @import

Avoid Filters

Optimize Images

Optimize CSS Sprites

Don't Scale Images in HTML

Make favicon.ico Small and Cacheable

Keep Components under 25K

Pack Components into a Multipart Document

Time-based graph of HTTP traffic as a visitor hits yahoo.com

Servers are Overrated

HTTP ResponseCodes & Headers

HTTP Code: 200Here’s the file you requested. Enjoy.

HTTP Code: 304This file hasn’t changed since the last time youasked about it. Just use the cached version you

have.

First Site Visit: 200s

Second Site Visit: 304s & 200s

DemoLet’s open up Firebug and understand the

bandwidthdifference between the first and second visits.

”“Wait, what else do we

need?

My 25 images and stylesheets weigh in at 100KB. That shouldn’t take more than a couple seconds to download.

After it’s cached, it should be pretty much instant.

DemoJust how long does it take to communicate with a server?Is it fast enough that we can do it 20 times on one page?

Give me a ping, Vasili.One ping only, please.

HTTP Header: ExpiresHere’s the file you requested. Enjoy.

Oh yeah, and don’t ask for this file again until Tuesday.

DemoSo how does the Expires Header change things?

What determines the 304?

When Was My PHP Modified?

How do we make more 304s?PHP: header("Last-Modified: Mon, 26 Jul 2008 05:00:00 GMT")

JSP: response.setHeader("Last-Modified", "Mon, 26 Jul 2008 05:00:00 GMT")

Channel Your Inner Columbo

RUWT? API: Hits

RUWT? API: Bytes

One-Size-Fits-All CodingHTTP Compression is your friend.

Final ParadoxThe number of hits on your site is not

a badge of honor. Reducing the numberof hits will improve the user experience.

Reduce Traffic. Increase Users.

Thanks!

Mark Phillipmarkphillip.com

Yahoo! Exceptional Performance TeamBlog

http://developer.yahoo.net/blog/archives/performance/

Performance Rules http://developer.yahoo.com/performance/rules.html

Web-based ToolMozilla Web Sniffer http://web-sniffer.net/

Firefox Add-onsFirebug

https://addons.mozilla.org/en-US/firefox/addon/1843

YSlow https://addons.mozilla.org/en-US/firefox/addon/5369

IE Add-onsHttpWatch http://httpwatch.com