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
Top Related