WebSite Loading Time OptimizationBy Damith Rushika Kothalawala for UCSC2011/MIT/027 – 11550271

Inspired by ICTer 2011 and my daily works

Version 1.0 ( 12/12/2013)

Introduction

Nowadays people more in to use Open Source Content Management Systems (CMS) rather than creating site from starch.

It is always seems to be slower than hand coded web-site with same look and feel due to some un-avoidable and avoidable issues.

So lets start optimizing and let end-users to have faster loading time on your web site by identifying and fixing your web site.

Objectives

1. Identifying static and dynamic content

2. Decentralizing content using CDN

3. Minifying JS and CSS files

4. Enable HTTP Compression

5. Optimizing your apache server

Identifying static and dynamic contentLets look at the following web site (www.ucsc.lk) and try to identify static and dynamic contents.

Download Firebug from https://getfirebug.com/

Identifying static and dynamic contentAs per FireBug network panel, there are 38 HTTP requests on http://www.ucsc.lk . But there is only 1 dynamic content on this page which is index.php (7.0 Kb loaded 875ms). Mean while it took 1m 36s to load 28.0 MB of other static content over my 10mbps ADSL connection.

As we know, server’s outbound bandwidth is the most important fact for the catering http request with http response to the clients (web browsers). More the response size will occurs slower loading time to the end users.

And the most importantly new users will not be able to connect to your web site until already connected sessions closed. (default apache concurrent connections set to 100)

So lets start decentralizing static content

Decentralizing content using CDN

Sometimes it is not necessary to decentralize your content unless your server/application has more multimedia content.

You can check your site’s loading ratings and suggestions with Yahoo!’s Y Slow Plugin for Firefox (http://developer.yahoo.com/yslow/) and it will show following results

Decentralizing content using CDN

Now lets try to improve loading time using a CDN Service. Basically we can categorize web contents to following categories

Dynamic Application Content (DHTML, PHP, ASP, JSP etc..)

Multimedia Content (Images, Videos, Sounds, Flash)

Scripts and Style Sheets (JS and CSS)

In-order to give less load to our Application server, we need to move Multimedia , Script and Style Sheet out from the application server.

Decentralizing content using CDN

We can move multimedia content to some known CDN as follows.

Video Content YouTube

Image Content imgur.com

JS cdn-cloud.appspot.com and etc..

CSS cdn-cloud.appspot.com and etc..

You can find more @ http://www.wpexplorer.com/free-cdn-services-for-wordpress/

By doing this we can simply outsource the content handing and save our servers bandwidth while handling more clients for application related load.

More about CDNs http://en.wikipedia.org/wiki/Content_delivery_network

Minifying JS and CSS files

As humans' we always used to keep our documents in human readable manner which will help some others to understand the coding and comments without additional effort. But, in the world of computing only code lines are considers and interpreters and compilers simply ignore fancy comments and white-space.

Hmmm. So why do we need to keep comments, line breaks and white spaces and increase bit count and waste our bandwidth ?

So lets start minify our codes …

Minifying JS and CSS files

Example 01 – Minify Javascript

This is a sample JS which I created to demonstrateSize:272 bytes

Lets minify this

Minifying JS and CSS files

Example 01 – Minify Javascript

This is a sample JS which I created to demonstrateAnd look what it is like after minifying

Size:37 bytes

You saved 272- 37 = 235 bytes

I used http://jscompress.com/ to compress my javascript

Note: You cannot use advantage of this for small files like thisbecause of the TCP IP packet anyway can carry data

up to 65K including header

Minifying JS and CSS files

Example 02 – Minify CSSOriginal -> http://getbootstrap.com/dist/css/bootstrap.css

Minifying JS and CSS files

Example 02 – Minify CSSAfter Minify http://getbootstrap.com/dist/css/bootstrap.min.css

Look At the Line Count

Enable HTTP Compression

HTTP compression is another way of minimizing the response packet size by GNU/ZIPping the content. As you know the HTTP response (HTML) contains character data which can be compressed and can be reduced to 80% - 90% sometime so we can get the advantage of this to save bandwidth and high speed response data delivery to end users.

Please refer following Wiki article for more information http://en.wikipedia.org/wiki/HTTP_compression

Enable HTTP Compression on Apache http://httpd.apache.org/docs/2.2/mod/mod_deflate.html

Optimizing your apache server

There are several ways to optimize your Apache HTTPD web server to work faster and smarter to cater your web traffic as follows.

1. Disable un-used apache modules Most of apache users do not know that each module consumes

some amount of memory with in a single apache worker process and sometime those plugins may caused to utilize more CPU time also.

2. Enable e-tags and expire headers As you already know every http request utilize you valuable

bandwidth but we can prevent second time request to your static content by enabling expire headers and etags on your web server.

By setting far future expiration time to your static images and other static contents can force web browser to take stored image from the browser cache rather than re requesting same image from the server

Optimizing your apache server

Some reference:

Apache Expire Headers http://httpd.apache.org/docs/2.2/mod/mod_expires.html

Apache E-Tags http://httpd.apache.org/docs/2.2/mod/core.html#fileetag

THE ENDClip Arts by Office.com