10+1 tips to optimize your website for speed (or how to keep your visitors from hating you)
Tuesday, May 6th, 2008
Posted by Milan Vrekic
Optimizing your website load time can be an important factor when it comes to overall potential for your websites success. Todays average web surfer is impatient and needs to have an interaction with your website within seconds.
From my experience, around 70%-80% of the ‘waiting time’ is spent downloading all the components on the page: images, style sheets, scripts, Flash, etc. Thus, reducing the number of these components on the page reduces the number of HTTP requests required to render the page. This is the key to faster pages.
The easiest way to achieve this is by taking the ‘less is more’ approach and simplify the site design. However, sometimes a client will insist on media and feature loaded pages. Here are some tricks to minimize the impact of this on the page load time. Remember, the final goal is to decrease the number of HTTP requests.
- Combine files - There is no need to have 10 separate style sheets or a separate Javascript files for your menu items, form evaluations… instead, combine them all into one functions.js file. Do the same with CSS.
- No tables please - Most browsers (ok, let’s say most browsers that matter) will display a <table> element only once it’s fully loaded and rendered. And that can result in a prolonged load time especially if your table contains a lot of images. HTML Tables are blast from the past so learn how to use CSS element positioning. Besides better load time you will also solve a lot of cross-browser incompatibilities.
- Image Maps - Use image maps instead of a bunch of small images. The combined size of the images will stay the same (even smaller since your one big image will have only one file header) while the number of HTTP requests will be reduced. Avoid using image maps for navigation components.
- Use a content delivery network - A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. Remember how we said that 70%-80% of the ‘waiting time’ is the time spent downloading page components? This means that the geographic location of the user in relation to the geographic location of the server is important. Using a CDN such as Amazon AWS or EdgeCast to host your media files will greatly improve the overall experience of user.
- Put style sheets at the top of the page - Now this does not sound THAT important but it is. While working on a web kiosk project I noticed that when the style sheet is found anywhere other than in the header, it causes the browser to refresh and re-render the page before displaying it and then if the browser finds another CSS reference below it, it will then re-render the page once again and so on. ‘Nuff said.
- Put JS scripts at the bottom - The HTTP/1.1 specification says that browser cannot download more than two components in parallel per hostname. The idea behind this suggestion is to display the visual elements first and then load the JS behaviors. Now, this is not always possible, especially when you are using document.write for example to control the layout of the page.
- Reduce DNS Lookup requests - For those who don’t know, DNS server is like a phone book for the internet, when you type in google.com for example, the DNS server will match that domain name with the correct IP address and send the browser on it’s way to download the content. Your browser cannot download anything before it resolves the DNS name. It typically takes 20-120 milliseconds for the DNS to lookup the IP address for a given hostname. Reducing the number of hostnames will reduce the number of DNS lookups, thus reducing the amount of parallel downloading that takes place in the page. Another thing most people don’t know is that if you perform too many DNS queries in a really short period of time most DNS servers will penalize you with 100-500ms pause.
- Use <link> instead of @import - this will enable progressive rendering rather than waiting for the component to be loaded and then render the page.
- Optimize images - this is the most obvious one and probably the one that can have most impact on the page loading time. Most of the image editing software supports saving images ‘for the web’ or with optimized color palette.
- Split components over multiple sub-domains - We said above that you can download only two components at a time from a single hostname in parallel. So splitting components over multiple domains will result increase of parallel downloads (for example, you can use images.yoursite.com, images2.yoursite.com…)
- Designing for iPhone? - Safari on iPhone simply wont cache components over 25k in size. Keep the size of your components below 25k or if you have to, split them into two or more files where each is smaller than 25k.
