More Tips To Reduce Latency and Improve Web Site Performance
posted Sep 6, 2008 at 04:21:47 PM by Doug Gibson.
I was catching up on reading one of my favorite web development/performance related sites this weekend, High Scalability, and read some more gems on improving performance (perceived speed) of your web site. There's this massive article about latency to start, in which they state:
Latency matters. Amazon found every 100ms of latency cost them 1% in sales. Google found an extra .5 seconds in search page generation time dropped traffic by 20%. A broker could lose $4 million in revenues per millisecond if their electronic trading platform is 5 milliseconds behind the competition.
That will get your attention. I think the quote itself confuses the matter of latency with load time, and one must wonder how perceived load time of partial page rendering fits into the equation as well.
The article goes on to define latency and touch on a number of related topics and links to articles that go more in depth on various facets.
Many of these points are related to and boil down to Yahoo's Best Practices for Speeding Up Your Web Site, of which they've added another 20 to the original set of 14.
The original 14 rules were:
1. Make fewer HTTP requests
2. Use a CDN
3. Add an Expires header
4. Gzip components
5. Put CSS at the top
6. Move JS to the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10 Minify JS
11. Avoid redirects
12. Remove duplicate scripts
13. Turn off ETags
14. Make AJAX cacheable and small
The additional recommendations are:
1. Flush the buffer early [server]
2. Use GET for AJAX requests [server]
3. Post-load components [content]
4. Preload components [content]
5. Reduce the number of DOM elements [content]
6. Split components across domains [content]
7. Minimize the number of iframes [content]
8. No 404s [content]
9. Reduce cookie size [cookie]
10. Use cookie-free domains for components [cookie]
<link> over @import [css]
14. Avoid filters [css]
15. Optimize images [images]
16. Optimize CSS sprites [images]
17. Don't scale images in HTML [images]
18. Make favicon.ico small and cacheable [images]
19. Keep components under 25K [mobile]
20. Pack components into a multipart document [mobile]
This link summarizes them all.
There are definitely some interesting items in there that not everyone thinks about. Including your favicon.ico in your caching plan is something many people might not think about (if you even HAVE a caching plan). Avoiding @import and filters in CSS are certainly things one would not think would affect site performance.
I've actually used
<CFFLUSH> in an app or two to improve perceived load time - and it did considerably - but that was in a non-gzipped environment. I've been a bit wary about combining the two, but I may be worrying for nothing.
IMO, the biggest bang for your buck can come from grouping a number of these related items together: split up external assets onto multiple hosts (images, scripts, and css subdomains), serve some from a CDN, and do NOT use domain cookies. That should give any site a serious boost, as it takes advantage of request concurrency while reducing the overhead of cookie requests on potentially a large number of http calls.
It sounds like a lot of stuff to remember or a lot of items to actually do, but these are things best integrated into a best practices list and kept in the back of your mind going forward on new projects. Unless you might be leaving money on the table on existing sites, that is.