A quick summary of Best Practices for Speeding up your Web Site.
1. Minimize HTTP Requests
a. Combine CSS, JS
b. CSS Sprites
c. Image Maps
d. Inline Images
Note:40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.
2. Reduce DNS Lookups
a. It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname.
b. DNS lookups are cached for better performance - even browser or OS cache.
c. Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times. My guideline is to split these components across at least two but no more than four hostnames. This results in a good compromise between reducing DNS lookups and allowing a high degree of parallel downloads.
3. Use a Content Delivery Network
Remember that 80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc
4. Add an Expires or a Cache-Control Header
a. For static components: implement "Never expire" policy by setting far future Expires header. This can be easily done in Apache configuration.
b. Keep in mind, if you use a far future Expires header you have to change the component's filename whenever the component changes.
c. By using a far future Expires header, you increase the number of components that are cached by the browser and re-used on subsequent page views without sending a single byte over the user's Internet connection.
5. Gzip Components
a. Compression reduces response times by reducing the size of the HTTP response.
b. It's worthwhile to compress any text response.
c. Image and PDF files should not be gzipped because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes.
6. Put Stylesheets at the Top
a. Moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
b. The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer.
c. The HTML specification clearly states that stylesheets are to be included in the HEAD of the page.
7. Put Scripts at the Bottom
a. The problem caused by scripts is that they block parallel downloads. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
b. In some situations it's not easy to move scripts to the bottom.
8. Avoid CSS Expressions
a. The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page.
b. One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression.
9. Make JavaScript and CSS External
a. Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser.
10. Minify JavaScript and CSS
a. Practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab)
b. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor.
c. In a survey of ten top U.S. web sites, minification achieved a 21% size reduction.
d. Even if you gzip your scripts and styles, minifying them will still reduce the size by 5% or more.
11. Avoid Redirects
a. Redirects are accomplished using the 301 and 302 status codes.
b. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.
12. Remove Duplicate Scripts
13. Configure ETags
a. ETags don't function well if site is hosted on multiple servers.
b. In Apache, to remove ETags add the following line to your Apache configuration file:
FileETag none
14. Make Ajax Cacheable
15. Flush the Buffer Early
a. Send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page.
b. A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.
16. Use GET for AJAX Requests
a. POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it's best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies).
b. The maximum URL length in IE is 2K, so if you send more than 2K data you might not be able to use GET.
17. Post-load Components
a. "What's absolutely required in order to render the page initially?". The rest of the content and components can wait.
b. JavaScript is an ideal candidate for splitting before and after the onload event.
18. Preload Components
a. Unconditional preload
b. Conditional preload
19. Reduce the Number of DOM Elements
a. Have lesser number of DOM elements.
b. Check by document.getElementsByTagName('*').length
20. Split Components Across Domains
a. Splitting components allows you to maximize parallel downloads. Make sure you're using not more than 2-4 domains because of the DNS lookup penalty.
21. Minimize the Number of iframes
22. Reduce Cookie Size
a. Eliminate unnecessary cookies
b. Keep cookie sizes as low as possible to minimize the impact on the user response time
c. Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected
d. Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time
23. Use Cookie-free Domains for Components
a. When the browser makes a request for a static image and sends cookies together with the request, the server doesn't have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there.
24. Minimize DOM Access
a. Accessing DOM elements with JavaScript is slow so in order to have a more responsive page.
25. Don't Scale Images in HTML
a. Don't use a bigger image than you need just because you can set the width and height in HTML
Sunday, May 16, 2010
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment