The most important thing of a website is it's load time. Because if a user click on a URL and it take too long time to render then the user get bored and close the site,it's happen with everyone. But we focus most of our time for functional and UI developments.
So our all efforts waste if user got bore by the loading time and didn't open out website.
Now I will discuss about some basic tips for making your website fast and it's very easy, just need some care when developing a website.
1.Minimise HTTP Requests :
About 70-80% of the end user response time is spent on HTTP Requests. So it's very much important to minimise http requests.
Each unique object in a web page requires a round trip to the server, that is, an HTTP request and a reply. So we need to remove all the unnecessary objects from the page for less http requests and make our site faster. Some other very easy way to minimise http request describe below :-
Each unique object in a web page requires a round trip to the server, that is, an HTTP request and a reply. So we need to remove all the unnecessary objects from the page for less http requests and make our site faster. Some other very easy way to minimise http request describe below :-
a)Combine CSS style –
if we have more than one css file included in the page then we need more than one http request to load the style element.So we can combine all the css style to a single external file then only one http request is needed to load the style element of the page.
b)Use Image map instead of separate image –
A web page contain lots of small and medium size images.So if we have total 20 images in our web-page then 20 http requests generate to load the images.
But if we combine all the 20 images into a single image and use the image-position attribute to show the particular part of the image then only one http request need to load the all images.
But if we combine all the 20 images into a single image and use the image-position attribute to show the particular part of the image then only one http request need to load the all images.
c)Convert graphical text to styled text -
generally we used graphical text for header or menu item styles. But we use css text instead of graphical text it will be a good process to reduce http request.
And it's no need to say that remove all unnecessary and duplicate calls from your website.. :)
And it's no need to say that remove all unnecessary and duplicate calls from your website.. :)
You can check HTTP request by using firebug.The picture is given below
2.Use Inline Image :
Often we keep all images in a folder and call specific image from the page every time when need. But we can use Inline Images for small and medium size images. It save time and make our site faster.
This is called 'Data URL'.
Data URLs use the following syntax:
data:[mimetype][;base64],[data]
Let we have a image and we want to embed that to HTML document. Then at first we need to convert that image to inline image. There are many online free tools for converting image to Inline image then use that inline image to the src tag of the image.
The image tag look like
<img width="7" height="7" title="delete_image" alt="delete image" src="data:image/gif;base64,R0lGODlhBwAHAHAAACH5BAEAAPwALAAAAAAHAAcAhwAAAAAAMwAAZgAAmQAAzAAA/wArAAArMwArZgArmQArzAAr/wBVAABVMwBVZgBVmQBVzABV/wCAAACAMwCAZgCAmQCAzACA/wCqAACqMwCqZgCqmQCqzACq/wDVAADVMwDVZgDVmQDVzADV/wD/AAD/MwD/ZgD/mQD==" />
Online Free tool is:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
you can get more details from:
http://dataurl.net
Data URLs use the following syntax:
data:[mimetype][;base64],[data]
Let we have a image and we want to embed that to HTML document. Then at first we need to convert that image to inline image. There are many online free tools for converting image to Inline image then use that inline image to the src tag of the image.
The image tag look like
<img width="7" height="7" title="delete_image" alt="delete image" src="data:image/gif;base64,R0lGODlhBwAHAHAAACH5BAEAAPwALAAAAAAHAAcAhwAAAAAAMwAAZgAAmQAAzAAA/wArAAArMwArZgArmQArzAAr/wBVAABVMwBVZgBVmQBVzABV/wCAAACAMwCAZgCAmQCAzACA/wCqAACqMwCqZgCqmQCqzACq/wDVAADVMwDVZgDVmQDVzADV/wD/AAD/MwD/ZgD/mQD==" />
Online Free tool is:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
you can get more details from:
http://dataurl.net
3.Use Content Delivery Network(CDN) :
In previous days one website run from one server and all it's content located from that same server. But now the expectation of the end user increase and we need more fast site. So now we need to distribute the files and load across multiple systems.
For cost reason it's not possible to use own CDN for start-up companies and private website. But the big companies like yahoo, google, facebook use their own CDN.
For the private and start-up companies, there are a number of free CDNs offered by Google, Microsoft, Yahoo and other large web organisations. For example, few people host their own videos when YouTube and Vimeo offer amazing free services. Similarly, if you require jQuery, you can load it on any page using:
you can get more details of CDN from
http://en.wikipedia.org/wiki/Content_delivery_network
For cost reason it's not possible to use own CDN for start-up companies and private website. But the big companies like yahoo, google, facebook use their own CDN.
For the private and start-up companies, there are a number of free CDNs offered by Google, Microsoft, Yahoo and other large web organisations. For example, few people host their own videos when YouTube and Vimeo offer amazing free services. Similarly, if you require jQuery, you can load it on any page using:
you can get more details of CDN from
http://en.wikipedia.org/wiki/Content_delivery_network
4.Gzip Components :
The components of your web page came to the browser from the server through the http requests.
So bigger the file size it took longer time to download in browser. So if we Gzip all the server components then the size of the components reduce and it took less time to download and render in the browser.
Now the question may come how we Gzip the components
For IIS server we need to follow the following steps described in the TechNet document
http://technet.microsoft.com/en-us/library/cc771003%28WS.10%29.aspx
and for Apache server we need to add the following code to the .htaccess file
# compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
After you've saved your .htaccess file, test your site again in GTmetrix.com to make sure it has been properly compressed and also analyze the performance of your website.
Now the question may come how we Gzip the components
For IIS server we need to follow the following steps described in the TechNet document
http://technet.microsoft.com/en-us/library/cc771003%28WS.10%29.aspx
and for Apache server we need to add the following code to the .htaccess file
# compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
After you've saved your .htaccess file, test your site again in GTmetrix.com to make sure it has been properly compressed and also analyze the performance of your website.
5.Put Stylesheets at the Top and jquery at bottom :
Always need to put style sheets at the top of the page before scripts and other html object elements.
Because in that case which part of the page render ,that render with proper alignment and style. That is very important specially for the slow internet user or the page with lot's of heavy components.
For jquery we need to add the bottom of the page. Because at first the user need to see the components of the page. So it's completely all right if the jquery effect come little bit late to the web-page.
But some exceptional case may happened when we add html elements using jquery or add some handler to page. I will discuss about these conditions later.
The structure of page should be
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html” charset=UTF-8”>
<title>title of the page</title>
<link href=”css/style.css” rel=”stylesheet” media=”all” >
</head>
<body>
…............
<script type=”text/javascript” src=”js/jquery.js”></script>
</body>
</html>
For jquery we need to add the bottom of the page. Because at first the user need to see the components of the page. So it's completely all right if the jquery effect come little bit late to the web-page.
But some exceptional case may happened when we add html elements using jquery or add some handler to page. I will discuss about these conditions later.
The structure of page should be
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html” charset=UTF-8”>
<title>title of the page</title>
<link href=”css/style.css” rel=”stylesheet” media=”all” >
</head>
<body>
…............
<script type=”text/javascript” src=”js/jquery.js”></script>
</body>
</html>
6.Add Cache-Control Headers :
Cache-Control plays a vital role in terms of the speed of the website.
If we save the static data in the Cache then it will take very less time to render when your return to that web-page.
Read the details of Cache-Control from
http://www.mnot.net/cache_docs/
If we save the static data in the Cache then it will take very less time to render when your return to that web-page.
Read the details of Cache-Control from
http://www.mnot.net/cache_docs/
7.Use External CSS and Jquery Files :
For faster response we need to use external javascript and css files. Because in that case only once the files are loaded and cached in the browser.
for other pages to be render we don't need to generate any http request to server for style or script elements.
Also it decrease the size of the html file so it look less time to download from server and render quickly in browser.
But it also have some exception.Like if my home page is very simple and not same with the other pages of my site. And the other pages contains lots of jquery,css effects.
Then if we use external css and jquery at the time of load the home page. Then it took very long time to render first time and we need to remember that more than 60% user click our site with no cache in browser.
So in that case if we use inline or page level css in home page and use post-load components to load the external files for other pages will be a good practise.
we can use a settimeout function in this case in the bottom document.ready function to load the external css and jquery for other pages. So our home page will render first and when the browser is idle then it call the server to load the external css and jquery.
for other pages to be render we don't need to generate any http request to server for style or script elements.
Also it decrease the size of the html file so it look less time to download from server and render quickly in browser.
But it also have some exception.Like if my home page is very simple and not same with the other pages of my site. And the other pages contains lots of jquery,css effects.
Then if we use external css and jquery at the time of load the home page. Then it took very long time to render first time and we need to remember that more than 60% user click our site with no cache in browser.
So in that case if we use inline or page level css in home page and use post-load components to load the external files for other pages will be a good practise.
we can use a settimeout function in this case in the bottom document.ready function to load the external css and jquery for other pages. So our home page will render first and when the browser is idle then it call the server to load the external css and jquery.
8.Put defer attribute in script :
In HTML, the script element allows developer to include dynamic script in their documents. The defer attribute is Boolean attribute that indicates how the script should be executed. If the defer attribute is present, then the script is executed when the page has finished parsing.
Example :
<script>
//do stuff (runs first)
</script>
<script defer="defer">
//do stuff, but defer it (runs last)
</script>
<script>
//do more stuff (runs second)
</script>
So now we can define script any where in the page but with defer attribute we can ensure that the script will execute at the last.Is that not interesting?
Example :
<script>
//do stuff (runs first)
</script>
<script defer="defer">
//do stuff, but defer it (runs last)
</script>
<script>
//do more stuff (runs second)
</script>
So now we can define script any where in the page but with defer attribute we can ensure that the script will execute at the last.Is that not interesting?
9.Remove Duplicate Scripts :
It sound very funny that remove duplicate script. You may thing that way I add duplicate script in my page.
A review of the ten top U.S. web sites shows that two of them contain a duplicate script. I think the main reason behind it that if we add the script in page label then it may possible that we add the same script in the two separate page.
But when if your visit both of the page then he find one duplicate script because script is cache in the browser.
Another reason I can say if I add script in master page. But in any child page it didn't work properly then for quick fix may we add a script file to that page.
The solution of this problem includes all the script file in master page and no separate script file included in page label.
An alternative in PHP would be to create a function called insert Script.
<?php insertScript("menu.js") ?>
A review of the ten top U.S. web sites shows that two of them contain a duplicate script. I think the main reason behind it that if we add the script in page label then it may possible that we add the same script in the two separate page.
But when if your visit both of the page then he find one duplicate script because script is cache in the browser.
Another reason I can say if I add script in master page. But in any child page it didn't work properly then for quick fix may we add a script file to that page.
The solution of this problem includes all the script file in master page and no separate script file included in page label.
An alternative in PHP would be to create a function called insert Script.
<?php insertScript("menu.js") ?>
10.No 404(Element or Page not found) in the page :
If http request goes to the server for requesting some component and the element not present in that particular position then 404 error happened. It is totally unnecessary and will slow down the user experience without any benefit.
So we need to ensure that there no 404's in the page. We can check that using firebug in the browser.
So we need to ensure that there no 404's in the page. We can check that using firebug in the browser.
11.Use GET Request in Ajax call :
We use ajax request from the page to get content load faster to the page. As ajax is asynchronous then it loads faster.
But POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it's best to use GET, which only takes one TCP packet to send.
Again there are lot's of controversy like from GET have a fixed URL length and it less safe than post.
So we need to use the post in those exceptional condition where data size large or data is very sensitive .But for other cases we can use GET instead of POST request.
But POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it's best to use GET, which only takes one TCP packet to send.
Again there are lot's of controversy like from GET have a fixed URL length and it less safe than post.
So we need to use the post in those exceptional condition where data size large or data is very sensitive .But for other cases we can use GET instead of POST request.
12.Splitting components and increase parallel downloads :
But we need to remember that adding domain increase the DNS time. So the most efficient to add 2-4 domains. If we add more than 4 domains then it will increase DNS time and makes the process of rendering slow.
For more details you can see the flowing link
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
13.Minimise the Number of iframes :
Iframes allow an HTML document to be inserted in the parent document. It's important to understand how iframes work so they can be used effectively.
<iframe> pros:
Helps with slow third-party content like badges and ads
Security sandbox
Download scripts in parallel
<iframe> cons:
Costly even if blank
Blocks page onload
Non-semantic
<iframe> pros:
Helps with slow third-party content like badges and ads
Security sandbox
Download scripts in parallel
<iframe> cons:
Costly even if blank
Blocks page onload
Non-semantic
14.Not Scale Images in HTML :
Often we find that we scale images in HTML because the image size may be bigger.
Like
<img src="image.jpg" alt="example Image" height="20" width="20" />
So in this case we scale the image size 20x20 from the HTML image element. It's increase the render time of the web page.
The best practice is scale the actual image size to 20x20 and then use that image in web-page.
Like
<img src="image.jpg" alt="example Image" height="20" width="20" />
So in this case we scale the image size 20x20 from the HTML image element. It's increase the render time of the web page.
The best practice is scale the actual image size to 20x20 and then use that image in web-page.
15.Make favicon.ico Small and Cacheable :
We request for favicon.ico image each and every time even if we don't find the actual page in the domain.. :)
Need to make the favicon.ico image small and importantly cache the image in the server. So that the image need not to be requested every time.
Need to make the favicon.ico image small and importantly cache the image in the server. So that the image need not to be requested every time.
16.Split article into multiple pages :
If we have a very long article with lot's of images and jquery files. Then better to split that article in many pages with the next page link.
So it will reduce the render time for each page.
So it will reduce the render time for each page.
17.Avoid empty image tag :
This is a common problem of website. Many time we have html image tag with empty src tag.
This may occur for many reasons like:
In Html
<img src="" />
In Javascript
var img = new Image();
img.src = "";
If we planing to assign image source attribute from the server but it didn't assign correctly.
<img src="$imageUrl" >
So,It make unnecessary traffic to the server and slows down website dramatically.
For more information check:
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
In Html
<img src="" />
In Javascript
var img = new Image();
img.src = "";
If we planing to assign image source attribute from the server but it didn't assign correctly.
<img src="$imageUrl" >
So,It make unnecessary traffic to the server and slows down website dramatically.
For more information check:
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
18.Reduce cookie size :
HTTP Cookies are very important for website. We use cookies for authentication and personalisation. Information of cookies exchange in the header of http request. So it's very necessary to reduce the size of cookies.
For that we can follow following rules -
a)Eliminate unnecessary cookies.
b)Keep cookie sizes as low as possible to minimise the impact on the user response time.
c)Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time.
d)Setting cookies at the appropriate domain level so other sub-domains are not affected.
For that we can follow following rules -
a)Eliminate unnecessary cookies.
b)Keep cookie sizes as low as possible to minimise the impact on the user response time.
c)Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time.
d)Setting cookies at the appropriate domain level so other sub-domains are not affected.
There are some more points which we need to remember when creating or hosting websites. Those are -
19.Cache the ajax.
20.Reduce number of DOM elements if possible.
21.Use Cookie free domain for the components to be hosted.
22.For adding style sheet use over @import.
23.Optimise Images for getting a faster response.
After follow those steps you can measure the performance of your websites using various free online tools.
Likehttp://www.webpagetest.org/
http://gtmetrix.com/
http://whichloadsfaster.com/
Thanks for reading this blog.Hope you enjoy it.Follow this blog to get updated about design stuff.
No comments:
Post a Comment