Mark Phillip markphillip.com 200s, 304s, Expires Headers, HTTP Compression, And You

” “ Well, I’m including a bunch of JavaScript and CSS, but users only have to download it once. After that, it’ll be really fast.

Web Browsing 101 Your 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 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 Response Codes & Headers

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

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

First Site Visit: 200s

Second Site Visit: 304s & 200s

Demo Let’s open up Firebug and understand the bandwidth difference 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.

Demo Just 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: Expires Here’s the file you requested. Enjoy. Oh yeah, and don’t ask for this file again until Tuesday.

Demo So 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 :00:00 GMT") JSP: response.setHeader("Last-Modified", "Mon, 26 Jul :00:00 GMT")

Channel Your Inner Columbo

RUWT? API: Hits

RUWT? API: Bytes

One-Size-Fits-All Coding HTTP Compression is your friend.

Final Paradox The number of hits on your site is not a badge of honor. Reducing the number of hits will improve the user experience.

Reduce Traffic. Increase Users.

Thanks! Mark Phillip markphillip.com

Yahoo! Exceptional Performance Team Blog Performance Rules Web-based Tool Mozilla Web Sniffer Firefox Add-ons Firebug YSlow IE Add-ons HttpWatch