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.

Index	Way	Description
1.	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.
2.	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.
3.	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.

Index	Way	Description
1.	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.
2.	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.
3.	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
4.	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:

Document.getElementByID(‘*’).length

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.

Conclusion

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.