I decided to write a different topic article, about performance techniques, just to keep things interesting. So this article will not be about jQuery especially but a general tutorial about how to improve your web site performance ( a thing that I found is very important).  I will try to make a list will all the best practices when it comes to web page optimization.

1.Minify javascript and css
The performance of a web page can be increased if the javascript and css is compressed.When code is minified comments are removed, white spaces, and in case of javascript a base64_encode can also be used.The resulting file will decrease in size. Tools that can be used are JSMin and YUI Compressor.Also a lot of free tools can be found on the internet.These is how a compressed js code will look like:

  1. eval(function(p,a,c,k,e,r){e=String;if(!''.replace(/^/,String)){while(c)r[c]=k[c]||c;k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1 2(3,0){4("5.6 = 7;",0)}',8,8,'b|function|timedRedirect|a|setTimeout|location|href|redirectTo'.split('|'),0,{}))

2. Flush the head
When a request is made, the browser has to wait for the html content to be received from the server before it can start retriving js files, css files , images, etc. So a good practice is to flush the head part of the html before so the browser can start retrieving the js,css files.

  1. </head>
  2. <?php flush(); ?>
  3. <body>

3. Split Components Across Domains
By splitting you can maximize parallel downloads. By standard a browser will not make more then 2 request at a time, so if you have 10 images on a page it will get the first 2, then the next 2 and so on.By splitting on multiple domains you will resolve this issue. Make sure you’re using not more than 2-4 domains because of the DNS lookup penalty. As an example, you can host your main html/dynamic content on www.using-jquery.com and move static components(images,css files, js files) on static1.using-jquery.com and static2.using-jquery.com

4.Compression

Compressing the content served by your web server will increase the speed and minimize the bandwidth used. The main compression is gzip, to see if your page is compressed look in the headers returned by the webserver and search for “Content-Encoding: gzip” .You can use Firebug to see this. Here is how it should look:

Gzip compression

Gzip compression

To easily add compression for your content you can add this to you .htaccess file:

  1. AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

5.Caching
When a first-time visitor comes to your page he must load all the necesary components, but when he continues to move to different pages of your web site then he can use the already cache components like js files, css files, images, etc.

To easily add caching for your static content  you can add this to you .htaccess file:

  1. <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|swf)$">
  2. Header set Cache-Control "max-age=29030400, public"
  3. </FilesMatch>
  4.  
  5. <FilesMatch "\.(css)$">
  6. Header set Cache-Control "max-age=29030400, private"
  7. </FilesMatch>

For caching dynamic content you need to use the “Last-Modified” header attribute. By returning the date of the last modification of your page the user client will know if needs to retrieve the page again. Here is a sample php function that you can use:

  1. static function conditionalGET($timestamp)
  2. {
  3.   $modified = gmdate("D, d M Y H:i:s \G\M\T", $timestamp);
  4.   $etag = '"'.md5($modified).'"';
  5.   header("Last-Modified: $modified");
  6.   header("ETag: $etag");
  7.   $since = isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ? stripslashes($_SERVER['HTTP_IF_MODIFIED_SINCE']) : false;
  8.   $match = isset($_SERVER['HTTP_IF_NONE_MATCH']) ? stripslashes($_SERVER['HTTP_IF_NONE_MATCH']) : false;
  9.   if(!$since && !$match) return;
  10.   if($match && $match != $etag) return;
  11.   if($since && $since != $modified) return;
  12.   header("HTTP/1.0 304 Not Modified");
  13.   exit;
  14. }

This are just the simple and easy to use ways of improving your web page, a lot more methods exist that focus on more specific needs. Hope this article will help in your web development.