Web page loading performance is very important to the end user prospective. If the web page is too slow that makes bad impression to the user.  So we need to optimize the page. There is verity of tools like Yslow and Page Speed to check the page loading performance.  In this blog I will discuss about front-end page optimization because 80% of the web page loading time is due to front-end. Most of the time it downloads all the script, image, flash, fonts, stylesheet required in the web page. And also the number of http request will affect the page loading time.

How to optimize the web page (front-end):

  • Reduce the HTTP request:

Combine the external files like java script and css files. To combine this file will reduce the http request and that will decrease the page loading time.  Combine the background images to a single image (CSS Sprites) will reduce the total file size and also the number of http request.

  • Load javascript end of document

Best option is to load the script files at the end of the page; this allows the browser to render everything before starting the javascript. In some cases we have to bind some function with html elements so it is better if we load the javascript at end. Another problem caused by javascript is that they block parallel downloads. Because a browser can handle 2 parallel download for a particular domain.

  • Avoid blank  image src

Avoid blank image src
<img src=’’ />
It will make another http request to the server. And this will take extra loading time. Different browser behave differently in blank image src.

  • Use external javascript and css file

When the page was loaded first time the browser will cache the external files like css and javascript. So when the page was loaded next time then the external files are in the browser cashe so the files will not reload. Additional bonus is that it is easy to manage external js and css.

  • Compress or minify stylesheet and javascript

Compress javascript and stylesheet will reduce the external file size which will reduce overall page loading time. There are many compress tools for   javascript and css files like Yahoo’s YUI Compressor and JSMin for javascript and   YUI compressor can also compress CSS files.

Latest posts by rupak

  • Share/Bookmark