Hi,
In my pervious post I had explained few reasons of slow server response time along with its solution. In this I will discuss how even after the response is received from the server, the page tend to load in the browser slowly. Following can be the reasons for that:
1. Heavy CSS and Javascript files
Sometimes using too many javascript libraries increases the size of Javascripts resulting in slow page. The best solution for this is choosing the Javascript framework smartly. If you are using common layout for multiple pages, then put only those JS files in the layout which will be common to all pages e.g. jquery.js. If you are using a package which is used only in few pages and not all, then do not put those in the layout, instead put them indivisually in each page e.g. the google map js.
Second and probably the best way to optimize JS and CSS usage is by JS/CSS compression. If you use gzip compression for CSS and Javascript, on an average it reduces the size by 80%, which really boosts up the speed. Click here to view my article on JS/CSS compression. It is really easy and extremely effective.
Install firebug in your Mozilla browser to analyze the above.
2. Too many images
This is pretty basic problem. Too many images always slows the page down. Here are few tips for fixing it. Whenever you are using background images using CSS, always try to use sprites. CSS sprite is an effective idea used by many big websites. What you have to do is, group images into one single image. For example create an image which contains all the icons and when you are calling the image through a CSS, just specify the "X" and "Y" coordinate of a particular icon in that image. That means whenever a single icon gets loaded all the icons gets loaded. You can make as many groups of image you want and use them as sprite.
Here is what I mean. Following is a snap from facebook:
All the icons they have used are in a single file as:
CSS sprites not only optimizes you page but also improves your page ranking.
For big banner images, it advisable to break the big image in a smaller chunks and then arranging them accordingly while HTML-ing the page.
3. Extensive DHTML processing loops
This probably won't be the case most of the time, but if you are using DHTML components, which makes a search through the entire web page, it tends to slow the page. But as I said before, this might not be the case always.
Codes such as the following:
jQuery(document).ready(function(){
jQuery('a[rel=lightbox]').css(...some code......);
})
can slow the page load, as the code traverses through each element of the webpage, hence effecting the performance.
That's it for now folks. Hope it helped.
Really looking forward for your response. Cheers!!
In my pervious post I had explained few reasons of slow server response time along with its solution. In this I will discuss how even after the response is received from the server, the page tend to load in the browser slowly. Following can be the reasons for that:
1. Heavy CSS and Javascript files
2. Too many images
3. Extensive DHTML processing loops
1. Heavy CSS and Javascript files
Sometimes using too many javascript libraries increases the size of Javascripts resulting in slow page. The best solution for this is choosing the Javascript framework smartly. If you are using common layout for multiple pages, then put only those JS files in the layout which will be common to all pages e.g. jquery.js. If you are using a package which is used only in few pages and not all, then do not put those in the layout, instead put them indivisually in each page e.g. the google map js.
Second and probably the best way to optimize JS and CSS usage is by JS/CSS compression. If you use gzip compression for CSS and Javascript, on an average it reduces the size by 80%, which really boosts up the speed. Click here to view my article on JS/CSS compression. It is really easy and extremely effective.
Install firebug in your Mozilla browser to analyze the above.
2. Too many images
This is pretty basic problem. Too many images always slows the page down. Here are few tips for fixing it. Whenever you are using background images using CSS, always try to use sprites. CSS sprite is an effective idea used by many big websites. What you have to do is, group images into one single image. For example create an image which contains all the icons and when you are calling the image through a CSS, just specify the "X" and "Y" coordinate of a particular icon in that image. That means whenever a single icon gets loaded all the icons gets loaded. You can make as many groups of image you want and use them as sprite.
Here is what I mean. Following is a snap from facebook:
CSS sprites not only optimizes you page but also improves your page ranking.
For big banner images, it advisable to break the big image in a smaller chunks and then arranging them accordingly while HTML-ing the page.
3. Extensive DHTML processing loops
This probably won't be the case most of the time, but if you are using DHTML components, which makes a search through the entire web page, it tends to slow the page. But as I said before, this might not be the case always.
Codes such as the following:
jQuery(document).ready(function(){
jQuery('a[rel=lightbox]').css(...some code......);
})
can slow the page load, as the code traverses through each element of the webpage, hence effecting the performance.
That's it for now folks. Hope it helped.
Really looking forward for your response. Cheers!!
No comments:
Post a Comment