Improve Your Page Performance

by Curtiss   |   last updated March 29, 2010   |   Web Tutorials ·

The other day, Glen Campbell (no, not “Rhinestone Cowboy” Glen Campbell) posted some tips on Friendfeed to help people improve the performance of their Web pages. I can’t say I completely agree with every single one of the suggestions across all situations, but they are definitely a great place to start. Glen indicated to me that his tips are “basically a distallation of the Yahoo! Developer Network “Best Practices”“, but I think he’s done a really good job of pulling out the meat of those best practices and putting them in a language that can be easily understood. I hope you will evaluate the tips and best practices for yourself and use the tips that apply to your situation as well as you can.

Following are the tips Glen posted:

1. Only ONE CSS file, at the very top of the page. EDIT: if it’s a frequently-accessed page, include all the CSS inline. (avoid @include, too)
2. Only ONE Javascript file, at the very bottom of the page (below the </html> tag if you can arrange it)
3. All static content (images, CSS, JS, Flash) served with a Cache-Control: max-age= header; set the max-age to a VERY long time.
4. NEVER, EVER, EVER allow <script> tags in the middle of the page or directly associated with a link (e.g., no <a href=”javascript:….”> functions).
5. Store your static content (images, CSS, JS) on an edge-cache — you can do this pretty cheaply via Amazon S3.
6. Optimize your images and compress your CS and JS files so that consume as little space as possible.
7. Turn all your frequently-used images (icons, not content images) into sprites: the result is ONE download from the server per session, instead of dozens per page view. TCP connections are the real killer.
8. One of the big killers is inline Javascript: browsers will do most things in parallel; however, if it encounters a <script> tag, it must halt all ongoing parallel operations, fetch and execute the script in single-threaded mode, and then go back to reading the page in parallel.
9. There. I just saved you $750.00 for your next “Web Programming for Performance” workshop.

Thanks again to Glen for posting these tips and allowing me to share them on our blog; and thanks to Yahoo! for the original “best practices” documentation.