Devit!

I was reading a recent study of some general statistics regarding web pages at www.websiteoptimization.com that helped confirm some feelings I was having with page load times. One of the conclusions this study came to was that the number of objects (images, external Javascript files, external CSS files, flash, etc…) has become the largest reason for load time delays.

The reason for this lies directly in the nature of an HTTP request. For each file the web page requests it has to make a round trip from the client to the server and back. Each time this happens there can be delays introduced.

There are a couple of simple ways we as web developers can look to solve this issue and keep load time swift.

1. CSS Sprites - This technique was perfected back in the days when video game consoles had limited memory. They ended up with little 16×16 pixel blocks with which to work in. Applying this technique to web page design we can combine similar images in the same file and use CSS to offset. This is most easily done with buttons or images of exactly the same size. Take a look at this technique for doing CSS sprite rollover menu buttons.
   
2. Combining CSS / Javascript files - For organizational purposes it usually makes sense to split Javascript and css files into separate files. However when it comes down to using that file in a web page, each file requires a separate HTTP request and therefore all the related overhead and delays. A simple solutions is to have a single file for Javascript and a single file for CSS. To take it a step further you could use server side includes to include the CSS and Javascript right into the main HTML file.

This entry was posted on Monday, April 28th, 2008 at 11:02 am and is filed under Devit!. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.