Tuesday, 21 February 2012

10 Best Practices to speed up your website

Website loading speed has become the most important part of the website development from last few years. In other words the target is not only developing website but to code effectively in order to improve the response time of the website. As professional web design company has recommended a few essentials of how to optimize for website loading speed as mentioned below:
1. Make lower Http Requests
As website is composed of web elements or components like images, style sheets, scripts, Flash etc… If we tend to reduce these elements on a website it reduces the number of http requests to the server and thus in turns it increases the loading speed of the website at client’s browser.
Consider the following ways to reduce the http Requests to the web server.
Website Design
Make a simple web design which is the best way to reduce your http requests. Simple web design reduces the number of web elements on a web page & as a response user always get small html rendered page.
Combined Files
Using lower amount of script files like JavaScript or CSS is the good way to increase your website loading speed. For example make a single CSS external file of the website, Compiling a code into a single file can be a challenging work but it improves the response time.
CSS Sprites
CSS sprites are the best way to reduce your website images requests. First combine your images into a single background image and use CSS properties like CSS-background-image and background-position properties to display the desired image segment.

2. Reduce DNS Look ups
DNS stands for Domain Name System. It is the concept used for the URL resolution that is resolve domain name into IP address and vice versa. As to remember IP addresses for every website is a difficult task so DNS work exactly same like checking phone numbers for a person name in the telephone directory.
When a user enters a website address (URL) into the address bar, the DNS resolver takes 20 to 120 milliseconds to resolve the hostname into the IP address. Browser cannot download anything from the hostname until the DNS resolving process is completed.
To speed up the process of DNS Resolution, DNS lookups (Forward lookups, Reverse Lookups) are cached for the better performance. Internet caching Server is the option which can be installed either locally (LAN) or installed by the Internet Service Provider.
Following are ways that internet caching can be done to speed up the DNS Resolution process.
Caching on the Individuals Computer
DNS information is stored on every individual’s computer via DNS Client Service (Microsoft Windows) into the Operating System cache.
Browsers Cache
Many of the browsers allow for storing cache, As long as the cached data is remain inside the browser there is no need to consult Window Cache.
Microsoft Internet Explorer Browser Cache
IE Caches DNS lookup for 30 mins (By default).
The settings can be modified by the “DNSCacheTimeout” in the Registry Settings
Mozilla Firefox Browser
Firefox caches DNS lookups for 1 mins. The settings can be changed via “network.dnsCacheExpiration” and can be enhanced up to 1 hour.
When the Browser & the Computer DNS cache are empty, the DNS lookups will be equal to the unique host names in a web page.
And the number of sources that contain host names are as mentioned below:
  • Page Urls
  • Style sheets
  • Flash Objects
  • Script Files
  • Images
So always try to reduce the number of host names which in turns reduces the number of DNS lookups and as a result it improves the response time of the website.
3. Avoid Redirects
URL Redirection is the technique used for making the web page available under many URL’s. Moreover URL redirection is accomplished using 301 & 302 status code. Consider the following example of http headers in a 301 Response:
HTTP/1.1 301 Moved Permanently
Location: http://example1.com/newuri
Content-Type: text/html
URL redirection can be implemented for the following reasons:
  • Due to user typing mistakes for example if the domain is example.com, but user mistakenly type for “exampel.com” or “exemple.com” so he is redirected to the correct domain.
  • If the website has changed from old to the new domain address, here we can use URL redirection concept.
  • Search engines usually have the record of old URL address and it might be possible that in few years your URL address has changed, but when user comes from Search engine, he get the old URL, in this situation URL redirection is used.
Inspite of above mentioned reasons, it is not recommended to use URL Redirect because it slowdowns the user’s experience.
4. Reduce Cookie Size
Cookie is a piece of code that resides in the user’s computer and is used to save the important information about the user. For example few websites take personal information of a user on each visit to a website. When we click on “save for the next time”, the information is stored on the client’s pc as a cookie.
So http cookie is stored either for the personalization or authentication. But there are few important considerations while storing a cookie for a website (which are beneficial in improving the response time of the website):
  • Remove unnecessary Cookies
  • Make your cookie size as low as possible.
  • Place cookie at the appropriate domain level, so that it may not affect the other sub domains.
  • Set cookie valid expiry date.
5. Put Style sheets at the Top
Following are the necessary points for placing style sheets at the top:
  • It is recommended that style sheets are needed to be placed at the top of the html documents because it helps in rendering html in the progressive manner.
  • As internet users might have slow internet connection so they are required any visual feedback like a progress bar in percentage, but in our case html page is the progress indicator itself, because if we use to place our CSS at the top of the html page (in the head section), our html page will render in the progressive manner.
  • But if you place at the bottom of the page, it is expected that you will not get the fine page loading or either you will see the white blank page, just because of the reason mostly browsers do not render html in which CSS is placed at the bottom of the page.
6. Use Get for Ajax Request
There are two ways of submitting Html form. These ways are dependent on the Form attribute called Method which has two values, one is Get and other is Post.
Method = GET:
Get is the default method of posting the Form and used when there is requirement of getting/retrieving data.
Method = POST:
Whereas Post is used when there is a requirement of storing or updating data and/or ordering a product or sending an email. And post is the encoding way of sending values to the web server.
Recommendation of Using Ajax
It is recommended that when you use XMLHttpRequest, always go for Get Method. Because Post is two way process while Get takes only one tcp packets to send. The maximum length of a URL is 2k in IE, after that you will not be able to use GET.
Method Get is meant for retrieving data, so use Get when you are only requesting any information from Server.
7. Make JavaScript and CSS as an External File
CSS and JavaScript files should be used externally because it gives the benefit of improving response time of the website.
  • The reason is if you use JavaScript or CSS file externally, the browser usually caches these files and when user requests for the website, it renders the html in small size with less http Request (Due to the Browser Cache).
  • But if we use inline JavaScript or CSS file, these files are downloadable every time when users request for the website, thus it increases the size of the html page with less http requests (by  default).
8. Minimize DOM Access
Dom stands for Document Object Model. With the help of Dom you can access every piece of html. But it is recommended that our web page must have lower amount of DOM elements. In other words a complex web page means more bytes to download; also it means slower DOM access via JavaScript.
In order to check your DOM elements you can use command in the Mozilla firebug add-one as mentioned below:
For the optimize use of html elements you should compare your home page with the busiest page like Yahoo which is still under 700 html elements.
9. Optimize Images
  • Images are the important part of the website and thus are required to optimize before placing into the website.
  • It is not common that everybody have a high speed internet connection, in order to improve the response time for every user; Images need to be optimized accordingly.
  • Try to convert GIF into PNG. Mostly designers hesitate to using PNG Images because of the reason that it is not supported by majority browsers but it was the matter of past.
  • See your GIF images if they are using palette size corresponding to the no of colors in the image.
  • You can use imagemagick its easy to check with:
Identify -verbose image.gif
  • There is a room for improvement when you see an image with 4 colors and a 256 color slots in the palette.
10. Keep Components Under 25K
After the implementation of web 2.0, everybody likes to use web with their mobile phones, so you as a web designer or developer should optimized your website for the mobile phones. I Phone do not cache WebPages more than a size 25K. (Note that it is the uncompressed size). Here minification is important because gzip alone is not only the way to compress.
One of the main issues on the Internet is, still, website loading speed. So with the above mentioned practices you may get benefited for your website or page loading speed.


  1. Thank you for a great article. This is extremely helpful and very motivational. Once again I appreciate your idea. I have learnt a lot from it.
    Tech Info

  2. Great post!I am actually getting ready to across this information,i am very happy to this commands.Also great blog here with all of the valuable information you have.Well done,its a great knowledge.

    Digital Marketing Company in Chennai

  3. very very amazing explaintion....many things gather about yourself...yes realy i enjoy it
    Digital Marketing company in Chennai


  4. Its a wonderful post and very helpful, thanks for all this information. You are including better information regarding this topic in an effective way.Thank you so much

    Personal Installment Loans
    Payday Cash Advance loan
    Title Car loan
    Cash Advance Loan

  5. Very nice post really appreciate your hard work. Fixx Group is providing the Best Services of Web Design and Development in Bangalore. we are using latest technologies to build update websites. We are know as a Best Company of Web Development in Bangalore.
    Website Development Company Bangalore | Web design company bangalore

  6. Your new valuable key points imply much a person like me and extremely more to my office workers. With thanks from every one of us.

    Best AWS Training in Chennai | Amazon Web Services Training in Chennai

  7. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.

    rpa training in electronic city | rpa training in chennai

    rpa online training | selenium training in training

  8. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.
    Data Science training in rajaji nagar | Data Science with Python training in chenni
    Data Science training in electronic city | Data Science training in USA
    Data science training in pune | Data science training in kalyan nagar

  9. Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.
    java training in omr | oracle training in chennai

    java training in annanagar | java training in chennai

  10. Really great post, I simply unearthed your site and needed to say that I have truly appreciated perusing your blog entries. I want to say thanks for great sharing.
    python training Course in chennai
    python training in Bangalore
    Python training institute in kalyan nagar

  11. A very nice guide. I will definitely follow these tips. Thank you for sharing such detailed article. I am learning a lot from you.

    rpa training in electronic-city | rpa training in btm | rpa training in marathahalli | rpa training in pune

  12. This is very good content you share on this blog. it's very informative and provide me future related information.
    Best Devops Training in pune
    Devops Training in Chennai

  13. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging.
    python training in velachery | python training institute in chennai

  14. Really great post, Thank you for sharing This knowledge.Excellently written article, if only all bloggers offered the same level of content as you, the internet would be a much better place. Please keep it up!

    Java training in Indira nagar | Java training in Rajaji nagar

    Java training in Marathahalli | Java training in Btm layout

  15. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing.. Believe me I did wrote an post about tutorials for beginners with reference of your blog. 
    Data Science Training in Indira nagar | Data Science Training in Electronic city

    Python Training in Kalyan nagar | Data Science training in Indira nagar

    Data Science Training in Marathahalli | Data Science Training in BTM Layout

  16. Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot. it is really explainable very well and i got more information from your blog.

    rpa interview questions and answers
    automation anywhere interview questions and answers
    blueprism interview questions and answers
    uipath interview questions and answers
    rpa training in chennai

  17. Whoa! I’m enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and visual appeal. I must say you’ve done a very good job with this.

    AWS Training in Velachery | Best AWS Course in Velachery,Chennai

    Best AWS Training in Chennai | AWS Training Institutes |Chennai,Velachery

    Amazon Web Services Training in Anna Nagar, Chennai |Best AWS Training in Anna Nagar, Chennai

    Amazon Web Services Training in OMR , Chennai | Best AWS Training in OMR,Chennai