How to make your website load fast?

Post Date: Sep 23 2009
Total Visit: 6604

The websites load faster is most important factors affecting its usability and make traffic in your website more and more... Today users are so lazy and they do want to wait for your website. Most of the Internet users will just skip a site altogether if it fails to load within a couple of seconds. Because of these problems you are losing visitors day by day.

Below you will find the summary of the "Website Load Faster" series. Those are simple yet effective ways to make sure that your website is running fast.

Minimize HTTP Requests

Most of the end-user response time is spent on the front end and this time is used in downloading images, style sheets (CSS), scripts, Flash, etc. so that HTTP requests is the most important key or guideline for improving website performance. Here are some techniques for reducing the number of HTTP requests.

  • By combining all scripts into a single script, and similarly combining all CSS into a single style sheet.
  • Combine your background images into a single image and use it as CSS background-image.
  • Combine multiple images into a single image

Use a Content Delivery Network (CDN)

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users and it is used for improving download performance of website.

Add an Expires or a Cache-Control Header

There are two rules for Cache-control header one for static components: implement "Never expire" and another for dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests.

Gzip Components

Gzip is the compression technique which is simple, effective way to save bandwidth and speed up your site.

Put Style Sheets at the Top

The HTML specification clearly states that style sheets are to be included in the HEAD of the page. Make all CSS in to single file and try to manage front end image from CSS.

Put Scripts at the Bottom

The bottom of documents are ideal locations for JavaScript. However, this is not always possible, depending on the functions in your scripts.

Avoid CSS Expressions

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. To reduce number of CSS expressions use event handlers instead of CSS expressions.

Make JavaScript and CSS External

JavaScript and CSS files can be cached by the browser so using external files in the real world can produces faster pages. Inline JavaScript and CSS (like suggested on another rule above) get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document.

It really depends on the size and frequency of use of your css and javascript code. We opted to maintain them in separate files allowing for browser caching.

Reduce DNS Lookups

Reducing the number of DNS lookups cuts response times but  increasing the number of parallel downloads can decrease response times. We've  opted to use a couple of sub-domains increasing the number of requests but  increasing the number of parallel downloads as you can see in the next point.

Minify JavaScript and  CSS

By removing unnecessary characters from code we reduce its size and improve  loading time. We’re currently using a packed version of the jQuery library. We will soon be moving to the  minified version that takes more time to load but can be faster to read by the  browser.

To compress the CSS (to some extension) we used CSSTidy.

Remove Duplicate  Scripts & Style Sheet

A review of the ten top U.S. web sites shows that two of  them contain a duplicated script as well as style sheet. Two main factors  increase the odds of a script being duplicated in a single web page: team size  and number of scripts. When it does happen, duplicate scripts hurt performance  by creating unnecessary HTTP requests and wasted JavaScript execution. To avoid  duplicate JavaScript and CSS file you must have to check in each page and  remove it.

Using Sub domains for parallel downloads

Splitting components allows you to maximize parallel downloads. Make sure  you're using not more than 2-4 domains because of the DNS lookup penalty. For  example, you can host your HTML and dynamic content on www.example.org and split static  components between static1.example.org  and static2.example.org

Don't Scale Images in HTML

Don't use a bigger image than you need just because you can set the width  and height in HTML. If you need
<img width="100"  height="100" src="image1.jpg" alt="My image"  />then your image (image1.jpg) should be 100x100px rather than a scaled down  500x500px image.

Avoid Redirects

No matter if you do a server-side header redirect, a JS  redirect, or an HTML meta redirect, your site is going to load a header with a  blank page, then load your new page, increasing the time it takes for a user to  get to the actual page they want to go to - So completely avoid this at all  costs.

Also you have to

  • Configure Entity tags (ETags)
  • Make Ajax Cacheable
  • Flush the Buffer Early
  • Use GET for AJAX Requests
  • Optimize Images
  • Reduce the Number of DOM Elements
  • Minimize the Number of iframes
  • Reduce Cookie Size
  • Make favicon.ico Small and Cacheable
  • Verify that Your Web Host is not Slow
  • Use <Link> Instead of @import
  • Optimize any Dynamic Scripts
  • Optimize calls to Database
  • Compress File Size: Server Site Script & Client Side  Script

Tags: Make your website load faster, Best Practices for Speeding Up Your Web Site, Web Site Optimization Bookmark and Share

To do articles more effectively, we need your comments or suggestions on how to improve the articles and make it more useful, or what other articles you would like in the future. Please CLICK HERE and leave your feedback. Thanks!!!