So if it means to sacrifice ,giveaway something for faster loading time of webpage , it should be done.In fact by following some simple facts a web page can be set to load in blazing fast.
Basic concept-to load webpage faster
We can use a lighter webpage with only text to load fast but that is not going to happen.Webpage need dynamic contents ,videos,images and other items powered by javascript,ajax etc.At first categorize the webpage contents:
We can divide the web element in to 3 category.- Main content: Text,small thumbnail image that the reader wants in a particular webpage.
- Supporting content:Like heavy imges,video,javascript application,slideshow.
- Regular content: Banner,ads,Navigation,styling features-Common for all pages.
What should we do-basic:
Let the main component load faster within few seconds,then the supporting content and lastly heavier regular content.Thats it.When the main content like text,small thumbnail image loads first in few seconds,then the visitor will be busy reading or surfing through your authentic content and information.In the mean time the supporting content will be loaded and then the heavier content.It may take to complete webpage load in 1 minute to several minutes-but I think its okay . :) .As the main content loads in seconds.
Things to do and follow and to sacrifice to make webpage load faster
1.Top Section of webpage:
This section loads first and it is same through out the webpages.If you place heavy banner,images and javascript in this section-loading time will be more.While loading,top section will be seem to be hanging for several seconds.Try to make the top section light with simple text navigation,light banner and ads.
2.Layout:
Two column layout is preferable with the main content placed in left column.The sequence of webpage loading occurs one by one from top to bottom.First element loads first.There are no parallel loading available till now.
If you use 3 column layout,loading sequence will be like this-
top section >>left column >> middle column>> third column >>footer elements.
So it is recommended to place the main content in left column,so that it load first to attract visitors while you buy some time to load the rest of the webpage.
3.CSS:
CSS must be placed top section of webpage.If CSS placed bottom it will be accessed after a while.In this case,Without CSS version of Webpage will be seen first.Later accessing the CSS files the browser will refresh the whole webpage.Thats a wastage of loading time plus annoying too.
Generally CSS file size are very low ,you can place a link to external CSS file in top section of webpage.
4.Javascript and Ajax application:
- Place Javascript / Ajax files bottom section of webpage to load.
- Set Javascript / Ajax Applications like slideshow,dynamic content bottom or below section of viewable content area.
As the javascript files are external and heavier sized, if a browser persist problem loading ,it will just hang on to try for some time.Only Opera supports parallel loading of external files mechanism.
5.Image Size:
Compress the image size with favourite image compressor.If many images to apply in a page then use thumbnail of images in page and provide the link to main image.This is better practice-you can save lots of space.With thumbnail provide original image size,resolution and resolution.It will be loved by visitors.
Google Picasa is a better option to compress and resize images,its free to use.
6.Image Dimension:
In image html declaring height and width value is a good practice.What happens when you don't:The browser will place image where it is defined but it does not know the image size as it is not accessed yet.So the image location in page will be minimum then when the complete image is accessed ,browser tends to be refreshed to readjust.This cost some time and also annoy the visitor.
No comments:
Post a Comment