Last week I attend the Percona conference in Santa Clara. The purpose of this conference was to talk about performance related to databases specifically mySQL. Most of the talks went over my head. However, there was one talk I attended “Website on Speed” by Philip Tellis from Yahoo! that I thought was outstanding. In his 20 minute presentation he covered some key optimization techniques to speed up website and improve latency for users, that don’t require time-consuming back-end database restructuring. Here are some of the ideas I found useful:
1. Reduce the number of domains your site has. Having numerous domains requires a lot of DNS lookups, which makes the site seem slow to users.
2. Avoid redirects or point to a load balancer. Redirects cause the site loading to slow down user experience. Load balancers handle request processing by distributing them based on the current capacity of each server.
3. Combine CSS and JavaScript into a single file. Having a file for each increases the time it takes to download the site content.
4. Combine decorative images into sprites.
5. Cache aggressively. This of course depends on the content of your site, and how much data is being manipulated by users. But I would recommend caching static data for as long as possible, which will speed up download time and improve the user’s experience.
6. gZip content over the wire.
7. Minify CSS and JavaScript using a YUI compressor.
8. Reduce cookie size.
9. Post-load components after on-load.
10. Put CSS on top so the browser will download it first, and page has rendered. This improves user experience, because they can at least start to view the page, even if they can’t interact with it yet.
11. The corollary to #11 is to put JavaScript at the bottom so that it doesn’t block rendering.
12. Avoid using tables for layout in HTML, because you have to wait for the entire table to download before the page can be loaded.
13. Attach events on a container rather than on each element.
14. Use specific HTML elements e.g. unordered list (ul) vs. many divs, this reduces the number of elements that need to be loaded.
15. Profile your JavaScript using YUI profiler, there is also another new profiler called YSlow.
