So, you’ve got a web site and wonder how you can improve the load times of your web pages. In recent weeks, we’ve played around with a variety of techniques to optimize web pages for our clients and our own projects.
First, you should run a few analysis on your web page to make sure that the HTML and CSS syntax is correct and that all URLs can be found.
Then, you can use some other external services to discover if there are any problems with load times and the number of items on your web page.
- Online check by WebSiteOptimization.com (and their technical articles)
- Pingdom Full Page Test (it also allows you to save your results so you can compare the past performance)
You’ll notice that the greater the number of items on your page, the longer it takes to load. You can use caching headers, gzip compression and parallel downloads to speed up your pages.
Although the online page checker by WebSiteOptimization.com doesn’t allow your to compare historical results for your URLs, it’ll give you some interesting insights and also explains the results briefly. Their advice is excellent to start your optimization process.
I recommend looking at combining images, splitting the load for images on different virtual domains (allows for parallel downloads) and using compression for HTML, JavaScripts and CSS.
Port80Software provides some more detailed insight into caching and compression. They sell add-on products for Microsoft’s Internet Information Server (ISS) but many of these tools are available in the standard distribution of Apache.
Quick Checklist
- write valid HTML, JavaScript and CSS code
- optimize your images, scale them down, combine them if possible (Photoshop Elements has some good features to preview images in various qualities)
- compress all text output before sending it to the browser
- combine multiple JavaScripts into a single file — the same is true for CSS
- use CSS sprites for decorative images which allows you to reduce the number of HTTP requests
- don’t use text for header images if you could write the text on a simple (reuseable) background image
- employ caching on the server (for PHP and/or SQL requests) — RAM-based caches are best or use a disk cache for database requests which are not frequently modified.
- use virtual hosts like img1.domain.com, img2.domain.com, img3.domain.com to allow parallel downloads of your images (these domains can point to your main www.domain.com directory tree)
- use dedicated servers for static content distribution (such as lighttpd)
- use caching/expiry headers for your static content so that they are loaded directly from the browser’s cache
- setup mirror servers worldwide for your static content and output your HTML, JavaScript and CSS code dynamically with the name of the closest mirror server dynamically inserted through geo mapping
These are just some ideas to get you started. There are more things to watch out for and to optimize once you’ve finished the basic optimization process.
Check out this excellent link at Yahoo for lots of optimization ideas…
If you would like us to have a look at your web site and analyze the performance, please get in touch with us for a quote.