Optimize the website to load fast

Website load time is very important factor which even decides the revenue of the business. Statistical data tells that high-speed loading websites have a quantifiable result on revenue and user experience. Everyone hates a slow loading websites and applications. Though we have several programming scripts like PHP, asp.net, JSP etc., but the browsers understands only HTML, Javascipt and the CSS nothing else. Browser is not smart as we are ūüėČ . The browser never cares about your programming language or the database we use. No matter what technologies we use the web server just takes your server side code and generates simple mark up language (HTML). So the optimization can be done in server side and client side to make a website load fast.

website-optimization

  1. Optimizing the server side  (to reduce the webserver execution time)
  2. Optimizing client side  (HTML, Javascript, CSS, Images)

The recommended size of the web page is less than 1MB.

How to optimize the website to load fast?


Optimize the Client Side Stuffs first.

1.  Reduce the image size

Image consumes the major part of the page size.  Images are always looks nice but it definitely increases the page load time at a greater extent. Reduce your image size without compromising the quality. Try service like http://www.jpegmini.com/ & http://www.smushit.com/ysmush.it/ to compress your images.

2.  Use CSS for Background Images

Applying background pattern to websites looks really cool; it avoids the boredom of the typical background. But it really kills when you use a big background images. Instead use small image may be 50*50 and use CSS to apply it on the entire website background without stretching the image.

Sample Code

body

{background-image:url(‘wood.gif’);

background-repeat:repeat-y repeat-x;}

Alternatively you can use the CSS patterns for the background like this. This pattern is actually one among the Lea Verou’s CSS 3 Pattern.

3. Reduce the number of http calls

One way of reducing the http calls is reducing the number of small images. Instead of using many small images club it as one using CSS image sprites concept. A good place to start with http://www.w3schools.com/css/css_image_sprites.asp

The other way is combining the different small JS files into a single file and this applies for CSS files too.

4. Avoid using absolute path wherever possible

Using absolute paths forces the web server to establish a connection, send and receive the HTTP requests. If using relative, the connection is already established,

¬†5.¬†¬†Use CDN for all the scripts wherever it is possible ‚Äď Jquery, Dojo, prototype and much more

CDN ‚Äď Content delivery network. Akamai and google are the major CDN providers. They simply host the famous libraries on their own set up and share you the link. The famous libraries are often used in various site we visit, so when you use CDN based libraries. The download doesn‚Äôt happen each time. So your website loads faster. CDN also reduces the DNS lookup counts. Some sample CDN

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js"></script>

More insight about CDN http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

6.  Combine all the files

Minification is the technique to remove unwanted characters from the source code. Spaces, new line characters, tabs all are really needed for human to interpret but not for the parser/interpreter/compiler. Mainly JS and CSS can be minified to chunk the file size. Compressed javascript/CSS files are ideal for production environments since on average it reduces the size of the file by 30-90%.  Some online tools are listed below,

http://jscompress.com/

http://jsmini.com/

7.  Gzip Compression

Include this line in your .htaccess file to enable the gzip compression.

# ———————————————————————-
# Gzip compression
# ———————————————————————-
<IfModule mod_deflate.c>
  # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
  <IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
¬†¬†¬†¬†¬†¬†RequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-Encoding
    </IfModule>
  </IfModule>
  # Compress all output labeled with one of the following MIME-types
¬†¬†# (for Apache versions below 2.3.7, you don’t need to enable `mod_filter`
  # and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines as
  # `AddOutputFilterByType` is still in the core directives)
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE application/atom+xml \
                                  application/javascript \
                                  application/json \
                                  application/rss+xml \
                                  application/vnd.ms-fontobject \
                                  application/x-font-ttf \
                                  application/xhtml+xml \
                                  application/xml \
                                  font/opentype \
                                  image/svg+xml \
                                  image/x-icon \
                                  text/css \
                                  text/html \
                                  text/plain \
                                  text/x-component \
                                  text/xml
  </IfModule>
</IfModule>

 

 

8. Yslow tool

This is really a great tool for assessing your website load and optimizes the website.

Before Optimizing the website

After Optimizing the website

Case Study

I have applied the so far techniques and achieved really a great amount of speed for one of our client’s website. Initially the site was 1298.8 K and with 54 HTTP requests after optimizing the website the size becomes 752.8 K and with 51 HTTP requests.

Related Links

https://addons.mozilla.org/en-US/firefox/addon/yslow/