subject: Why Have Slow Loading Websites? [print this page] Everybody wants to have an attractive website that leave visitors impressed and astounded. Usually, a striking website will involve many graphical elements which will increase the overall page size and cause the page to download slowly into the browser. The purpose of this article is to provide some useful tips on how to maintain web page attractiveness, but still have a web page that will download quickly.
As the standard internet bandwidth rate per computer rises, increasingly more webmasters allow themselves to develop much more complex websites loaded with heavy graphic elements. In acute cases you find websites that take as much as a few minutes to load content into a browser. Obviously, a user will not want to wait that long for a particular website to load and will then move on to the next website that has come up in the search results.
The big question is why some webmasters are still continuing to develop slow loading web pages? This is mainly due to lack of knowledge regarding simple graphic optimisation techniques that would have allowed them to retain an attractive web page, but at the same time keeping the page size smaller.
How many people are aware that a box with rounded corners can be created merely by using CSS code only without the need for any graphic image. Yes, this is possible! Before those of you who are familiar with CSS state that this cannot be done for all types of browsers, I would say that dealing with common mistakes by webmasters can have a trouble-free and effortless solution.
Web designers should never be limited by having restrictions placed on the final design. People may think that web designers can produce with graphic software something that it impossible to create by code. I disagree. When the design is finished and ready to be sliced into small images to be used in the html code, your creativity has already been tested. Everything done at this stage affects the total page size. If a design contains rounded shapes that overlap or encroach onto area with colour gradients, then it must be sliced carefully so the outcome has a small file size.
What does efficient slicing mean? Lets look at this thorny question:
a)Dont make large slices containing many different colours. Use a small amount of slices where each slice contains a limited number of colours.
b)Dont make a large slice containing the same graphic structure. Slice a small portion of it and then duplicate the code. This is a common mistake that many webmasters make when they have to deal with a gradient colour background.
c)Dont use JPEG file format all the time. In many cases, a GIF format will be much smaller in size. Generally, a slice with a high amount of colours will be smaller in size using the JPEG formal as opposed to the GIF format and the reverse is true so check each option carefully. Every 1KB that you can reduce from the image file size will have a significant effect on reducing the page size.
d)When you have text on a solid coloured background, then dont slice it at all. Instead, use code to create the background. Remember, you can define both background colour and font style by using CSS.
More Advanced Techniques
Optimising a site graphically requires more than just knowing how to manage image optimisations. There are some quite advanced techniques that require a high level of programming. CSS2 has a lot more to offer than CSS. Although many browsers havent adopted this as standard yet, we should be ready for when they do. Javascript also gives a set of options that create great effects without the need to overload the page with Flash.
