sprites-web-design-example

It can be very frustrating for a user to wait for an age and a half for a web page to load. Even in today’s world of high speed broadband it is imperative that you build your web pages to load as fast as possible. No website user wants to sit waiting for a page to load. Most users would not return to your site if it doesn’t load fast.

Here are top 5 ways in which you can dramatically speed up your website and keep user’s with the slowest of internet connections happy and keep them returning for more.

1. Images. Optimizing your images is the best way to improve the download speed of your Web pages. A good rule of thumb is to strive for no one image being larger than 10 Kb. This is especially hard with animations, but if you can do it, you’ll have some great fast images. You should call them in your HTML with the height and width specified in the image tag.
2. Use CSS. Clean semantic markup will not only make your web pages render faster in the browser but it will also make maintenance of your site easier. Semantic markup means that you choose your tags according to there meaning. By using CSS to separate the style from the markup it allows you to do more with less.
3. Reduce http requests to the server. When you load a web page for the first time each individual component has to be downloaded. This includes images, style sheets, external scripts and flash. By combining these files into one single (eg: all javascript code in one external file and all css code in one external file) file you would reduce the number of http request dramatically.
4. Size matters. Smaller the size of a web page and its scripts, the faster it will load up. Any external CSS or javascript files can be minified to reduce the file size.
5. Combine your images into sprites (in CSS). CSS image sprites is essentially a technique where you combine multiple images into a single image and by use of the CSS properties background-image and background-position you can display only the relevant part of the combined image. The use of image sprites enables web masters to create a single image that is easy to maintain and update. It will reduce the number of http requests to the server and speed up your website.

Tweet This Post