Web Site Performance

The 35 steps to improve the download speed of your Web site.

The descriptions in this article describe common approaches to improve the download speed of Web pages.

1. Minimize HTTP Requests: 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the entire page.
2. Use a Content Delivery Network: The user's proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user's perspective.
3. Add an Expires or a Cache-Control Header: Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views.
4. Gzip Components: Compression reduces response times by reducing the size of the HTTP response.
5. Put Stylesheets at the Top: While researching performance at Yahoo!, it was discovered that 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.
6. Put Scripts at the Bottom: The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname.
7. Avoid CSS Expressions: CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. They were supported in Internet Explorer starting with version 5, but were deprecated starting with IE8.
8. Make JavaScript and CSS External: Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested.
9. Reduce DNS Lookups:DNS lookups are cached for better performance. This caching can occur on a special caching server, maintained by the user's ISP or local area network, but there is also caching that occurs on the individual user's computer.
10. Minify JavaScript and CSS:Minification is the 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). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.
11. Avoid Redirects: The main thing to remember is that redirects slow down the user experience. 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: It hurts performance to include the same JavaScript file twice in one page.
13. Configure ETags: Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser's cache matches the one on the origin server.
14. Make Ajax Cacheable: One of the cited benefits of Ajax is that it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server.
15. Flush the Buffer Early: When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive. In PHP you have the function flush(). It allows you to 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.
16. Use GET for AJAX Requests: The Yahoo! Mail team found that when using XMLHttpRequest, 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).
17. Post-load Components: JavaScript is an ideal candidate for splitting before and after the onload event.
18. Preload Components: By preloading components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you'll need in the future.
19. Reduce DOM Elements: A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example.
20. Split Components Across Domains: 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: iframe block pages on load even if empty
22. No 404s: HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit.
23. Reduce Cookie Size: It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.
24. Use Cookie-free Domains for Components: 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.
25. Minimize DOM Access: Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should Cache references to accessed elements
26. Develop Smart Event Handlers: Sometimes pages feel less responsive because of too many event handlers attached to different elements of the DOM tree which are then executed too often. That's why using event delegation is a good approach.
27. Choose link over import: In IE @import behaves the same as using at the bottom of the page, so it's best not to use it.
28. Avoid Filters: The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7. The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded.
29. Optimize Images: Images are often the most second most significant source of download requirement.
30. Optimize CSS Sprites: Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
31. Don't Scale Images in HTML: Don't use a bigger image than you need just because you can set the width and height in HTML.
32. Make favicon.ico Small and Cacheable: The favicon.ico is an image that stays in the root of your server. It's a necessary evil because even if you don't care about it the browser will still request it, so it's better not to respond with a 404 Not Found.
33. Keep Components under 25K: This restriction is related to the fact that iPhone won't cache components bigger than 25K.
34. Pack Components into a Multipart Document: Packing components into a multipart document is like an email with attachments, it helps you fetch several components with one HTTP request (remember: HTTP requests are expensive).
35. Avoid Empty Image src: Cripple your servers by sending a large amount of unexpected traffic, especially for pages that get millions of page views per day.

Other Topics