Overview

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.

Why Speed optimization of your website is Important?

At Pub Con, Matt Cutts from Google said there is strong attempt to
influence in Google to introduce a new ranking factor into the
algorithm. The new ranking factor has to do with how fast a site or page
loads.

Following are the few website speed factors which are If not handled properly may affect your website loading speed:

• Redirects
  
• Cookie Sizes
  
• Dom Access
  
• Use of Images
  
• Components size
  

We as a 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.