290 likes | 395 Views
200s, 304s, Expires Headers, HTTP Compression, And You. Mark Phillip markphillip.com. “. 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.
E N D
200s, 304s, Expires Headers, HTTP Compression, And You Mark Phillip markphillip.com
“ 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.
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 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
Time-based graph of HTTP traffic as a visitor hits yahoo.com
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.
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?
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?
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")
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.
Thanks! Mark Phillip markphillip.com
Yahoo! Exceptional Performance Team Blog http://developer.yahoo.net/blog/archives/performance/ Performance Rules http://developer.yahoo.com/performance/rules.html Web-based Tool Mozilla Web Sniffer http://web-sniffer.net/ Firefox Add-ons Firebug https://addons.mozilla.org/en-US/firefox/addon/1843 YSlow https://addons.mozilla.org/en-US/firefox/addon/5369 IE Add-ons HttpWatch http://httpwatch.com