High Performance Web Sites: Essential Knowledge for Front-End Engineers by Steve Souders explains how you can optimize the performance of the Ajax, CSS, JavaScript, Flash, and images that you've already built into your site.
This books has total 17 chapters out of which 14 chapters are dedicated for each rule. Each chapter explains importance of rules & how it plays role in web site performance. To explain, author gave real world examples of top 10 websites including Amazon, AOL, MSN, Yahoo & YouTube.
- Rule 1: Make Fewer HTTP Requests
Role of images / CSS / inline images. - Rule 2: Use a Content Delivery Network
Only 10–20% of the end user response time is spent downloading the HTML document. The other 80–90% is spent downloading all the components in the page.To measure the true impact of switching to a CDN, you need to measure the response times from multiple geographic locations. Services such as Keynote Systems and Gomez are helpful for conducting such tests.
- Rule 3: Add an Expires Header
- Rule 4: Gzip Components
- Rule 5: Put Stylesheets at the Top
The blank white screen phenomenon is due to browser behavior. Remember that our stylesheet wasn’t even used to render the page—only to affect the DHTML feature for sending email messages. Even when Internet Explorer had all the necessary components, it waited to render them until the unnecessary stylesheet was also downloaded. The location of the stylesheet in the page doesn’t affect download times, but it does affect rendering. David Hyatt has a great explanation of why the browser does this. - Rule 6: Put Scripts at the Bottom “How to configure Internet Explorer to have more than two download sessions,” http://support.microsoft.com/?kbid=282402
- Rule 7: Avoid CSS Expressions
- Rule 8: Make JavaScript and CSS External
- Rule 9: Reduce DNS Lookups
- Rule 10: Minify JavaScript
Dojo Compressor (renamed ShrinkSafe and moved to http://dojotoolkit.org/docs/shrinksafe) is the one I’ve seen used the most. For the purposes of our comparison, I used these two tools. - Rule 11: Avoid Redirects
Internet Explorer’s DNS cache is controlled by three registry settings: DnsCacheTimeout, KeepAliveTimeout, and ServerInfoTimeOut, which can be created in the following registry key: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\InternetSettings\ There are two Microsoft Support articles describing how these settings affect the DNS cache.* These articles report the following default values for these settings:- • DnsCacheTimeout: 30 minutes • KeepAliveTimeout: 1 minute • ServerInfoTimeOut: 2 minutes
The most popular tool for minifying JavaScript code is JSMin, developed by Douglas Crockford, a fellow Yahoo!. The JSMin source code is available in C, C#, Java, JavaScript, Perl, PHP, Python, and Ruby. The tool of choice is less clear in the area of JavaScript obfuscation. Dojo Compressor (renamed ShrinkSafe and moved to http://dojotoolkit.org/docs/shrinksafe) is the one I’ve seen used the most.
YSlow crawls the page’s DOM to find all the components in the page. It uses XMLHttpRequest to find the response time and size of each component, as well as the HTTP response headers. YSlow provides other tools as well, including a summary of the page’s components and an analysis of all the JavaScript in the page using JSLint.
Optimizing Wikipedia’s 12 PNG images brought the total size from 33K down to 28K, a 15% savings. There are several PNG optimizers available—I used PngOptimizer. Adding a PNG optimization step to their development process would improve Wikipedia’s performance.
Examples - http://stevesouders.com/hpws/combo-none.php
