Fast loading web page

Now our internet access speed has gone up but still the loading speed of page does matter a lot for visitors and for search engine robots. We can create web pages for fast loading without sacrificing much on graphics or animation part of the site. Images or animations are not the only reason for slow loading of the web pages, so we will discuss all other accepts which affect the speed of a webpage.

Less code or tags

To display different ways our text and images we need html tags or JavaScript codes. Now as we use different styles and layouts for our content we need more tags. Finally when we save the page the file size increases. This is not because of content or text we have but for the tags we used. Then how to reduce the tags or codes without sacrificing the layout , style and design of the page ? There are some solutions to this problem. We will use style sheet for this

Use style sheet

We can define style property for every tag we use in an external style sheet. We need not define the styles for each and every tag all the time we use them. By keeping the styles in an external file we get the advantage of not reloading style sheet file for all the pages. Browsers download the external style sheet once and cache them for repeated use. The required formatting code in every page drastically reduces as styles are declared at a common place.

External Linkages

If your page has code which collects content from other sites then that can slow down your page loading if the others sites are not as fast as yours. Speed of affiliated links, external ads, RSS feeds etc plays important role in fast displaying your page in browser. Take care while using these codes and check how fast they are loading. Some external links display small images or buttons and on further click only it downloads to full content related to that image. This helps is saving initial loading time of the page. The css file having all the style properties is cached by the browser helping in reducing the loading process of subsequent pages of the site.

Script at the end

As far as possible scripts to track visitors or counters or analytic software should be kept at the end to allow fast loading of content at the starting.

Optimizing Images

We can't ignore images in our web pages but we can change these images to load fast without compromising on quality of it. For displaying on web pages a resolution of 72 dpi image is enough, higher resolution than this will only increase the file size of the image without much improvement in quality.

Always define the height and width of the images within the image tag. This helps the browser to adjust the text around it before loading the image.

If you want to display high resolution images or wants your visitors to download high quality images then you can display a low resolution sample of thumbnail of the image and visitor will click the image to get the better quality one. This will help in saving the bandwidth as all high resolution images need not be downloaded.

We can keep our site logos and other common images in a common file and link them from all our pages. These images as required by all the pages the browser will load them from browser cache and every time it will not download these common images as visitors move from one page to other within your site. This will help in improving the speed of the site.

A good idea is to keep the content at the top of the page. This can be achieved by carefully designing the page and allowing the content to load first. Pushing content up

Try to use less tags as possible and maintain a good content to tags ratio. CSS helps in this direction. Any javascript or any other script can be kept in external files so spider need not download them all the time. A fast loading page ads lot of value to user experience in your site.

Using framework Bootstrap

There are open source frameworks which can be downloaded or linked to get the style or script library. These are developed by experts so no need to invest in designing them again. You can customize them to match your changes or requirements. With the popularity of Mobile devices these frameworks helps in keeping your site mobile friendly.
Bootstrap
Because of its popularity and uses in other sites, when visitor visit your site chance that visitor browser already have these frame works in its cache so the page will load fast.

Firefox add-on Firebug and Page Speed

Firefox browser has some excellent tools in terms of add-ons know as Firebug, to this we can add page speed to identify and monitor cause of slow speed of the web pages. Check this google page on links for Analyze and optimize your website with PageSpeed tools


Number of User Comments : 3

plus2net.com



Search Engine Optimization and google articles
fabio

20-05-2009

the "Script at the end" i figured out by myself it's obvious in adition to that people can use ajax aproach to make updates after the page is loaded using the onready statement with js :)
sagar

22-06-2010

how to load page fast in Internet Explorer
mohammed S. yaghi

20-07-2010

nice article

Post your comments , suggestion , error , requirements etc here




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer