DESIGN A FAST LOADING WEBSITE

DESIGN A FAST LOADING WEBSITE

Designing a fast loading website is one of the most important aspects of web design, taking into account that most web surfers will not wait for more than 10 seconds for a website to load completely. Especially your home page must download completely within that timeframe.
Today, a lot of web surfers still use dial up modems for their Internet connections. At maximum download speed for a 56K modem (which is 7KB/s), webmasters are limited to a maximum web page size of 10 s x 7 KB/s = 70 KB. For older modems, the number is halved and even quartered. Therefore, you are required to design your websites as compact-sized as possible, if you want to appeal to a wider audiance.

Use Visual Items Efficiently

The first rule for designing a fast loading website is reducing the number and filesize of the images, Flash animations, sounds and videos you use. Actually, do not ever add a soundtrack to your homepage - not only for speed issues, but also for professionalism. If you absolutely must use a soundtrack, use MIDI files; avoid WAVE or MP3 formats, as they generally take a longer time to load. Under no circumstances add a streaming video file to your home page - it is the silliest thing you can do. You can and should use images and Flash - but do not OVERuse them. Use Flash to animate your logo, for instance; but never EVER make an entire website in Flash - Flash is not search engine friendly and the "loading... please wait" screens drive visitors away. Also note that Flash is not supported by older browsers.
Picking the right image formats goes a long way for designing a fast loading website. For small images (i.e. buttons, icons, etc.) and images that do not contain smooth transitions between colors, use the GIF image format. For photographs and other colorful graphics that have smooth transitions between colors, use the JPEG format. Lesson 1-07-04 explains the difference between the GIF and JPEG image formats in greater detail.
Sidenote: If you do not have a good image editing software, I recommend Macromedia Fireworks MX 2004. It's the best image editor I've ever used - great for creating and editing fast loading web graphics. You can optimize the filesize of any image by using Macromedia Fireworks MX 2004.
Another thing to keep in mind is that using image buttons for navigational menu items takes up much more bandwidth than navigational text links. Therefore, it is a much better idea to use text links for navigation; not only because they load faster, but also because text links are more search engine friendly than image links.
If you use multiple instances of the same image on a web page rather than using different images, you'll save bandwidth; as images get downloaded only once and used over and over again whenever necessary. Web browsers tend to cache all of the images they stumble upon, in order to avoid downloading the same image more than once.
Finally, do not forget to set the "width" and "height" attributes of your <img> tags. These attributes tell the browser how to render your web pages, so that the browser won't have to acquire this data and process it by itself. Setting the "width" and "height" attributes for your images will slightly increase the rendering speed of your website, so your web pages will load faster. Lesson 1-07-03 can help you set these attributes if you do not already know how to.

Clean Up & Compress Your Source Code

Fast loading websites generally contain "clean" markup, meaning they do not have any unnecessary HTML elements such as extra closing tags, too many meta keywords, unnecessary tables, etc... Therefore it is a good idea to check for these redundant HTML elements before publishing your web pages.
It is also possible to speed up your websites by "compressing" your source code. Compressing refers to removing unnecessary "spaces", "tabs", "returns" and "comment tags", which may take up considerable space in your source code. You can remove these manually or by downloading a free HTML compression software program such as Absolute HTML Compressor (you can download it at http://www.download.com).

Choose The Right Web Hosting Company

Sometimes, even if you have designed a fast loading website, your web hosting provider might be a bad web hosting provider and slow down your website; either because it can not handle the traffic your website is receiving, or because it is assigning a shared connection to your website, and the websites you are sharing the connection with are getting a high volume of traffic, therefore slowing down the web host and your connection altogether.
To avoid this problem, choose a quality and affordable web hosting company. Go check out Web Hosting Talk (http://www.webhostingtalk.com) which is a huge web hosting related discussion forum. You can read customer reviews and gather information about the best and the worst web hosting companies there.

The Bottom Line

Bottom line is... Make sure that the total size of your web pages (total size of the HTML document + images + any other items) does not exceed 70 KB. Note that this is the maximum size. Your web pages should average somewhere around 50 KB.
If you like this article, please link to it :)
To your success,