Web site loading time optimization

Web site loading time optimization

• 1.
  WebSite Loading Time Optimization ByDamith Rushika Kothalawala for UCSC 2011/MIT/027 – 11550271 Inspired by ICTer 2011 and my daily works  Version 1.0 ( 12/12/2013)
• 2.
  Introduction Nowadays people morein 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.
• 3.
  Objectives 1. Identifying staticand dynamic content 2. Decentralizing content using CDN 3. Minifying JS and CSS files 4. Enable HTTP Compression 5. Optimizing your apache server
• 4.
  Identifying static anddynamic content Lets look at the following web site (www.ucsc.lk) and try to identify static and dynamic contents. Download Firebug from https://getfirebug.com/
• 5.
  Identifying static anddynamic content As 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
• 6.
  Decentralizing content usingCDN 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
• 7.
  Decentralizing content usingCDN 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.
• 8.
  Decentralizing content usingCDN 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
• 9.
  Minifying JS andCSS 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 …
• 10.
  Minifying JS andCSS files  Example 01 – Minify Javascript This is a sample JS which I created to demonstrate Size:272 bytes Lets minify this
• 11.
  Minifying JS andCSS files  Example 01 – Minify Javascript This is a sample JS which I created to demonstrate And 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 this because of the TCP IP packet anyway can carry data up to 65K including header
• 12.
  Minifying JS andCSS files  Example 02 – Minify CSS Original -> http://getbootstrap.com/dist/css/bootstrap.css
• 13.
  Minifying JS andCSS files  Example 02 – Minify CSS After Minify  http://getbootstrap.com/dist/css/bootstrap.min.css  Look At the Line Count
• 14.
  Enable HTTP Compression HTTPcompression 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
• 15.
  Optimizing your apacheserver 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
• 16.
  Optimizing your apacheserver 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
• 17.
  THE END Clip Artsby Office.com