Time is money and it doesn’t stop for you at any cost.

All the web users expects our website to load in blink of an eye. Users worry mainly on functionality, and least bothered on what technology, methodology, & framework we use to create the app or website.

Architects need to take the call on compromising on the above 3 keywords and performance of your app.

Following are tricks which can be used for a boost the performance of your website.

CSS

1.      Load CSS file(s) based on context. Add the scripts needed inside <head> tag which is/are needed initially needed, and load other script files way later on window.load or document.ready or window.addEvent(‘domready’, function() {.. at the bottom of the page inside <body> tag.Following the lazyload function i created,

 function ljscssfile(fn, ft){
 if (ft=="js"){
 var fr=document.createElement('script');
 fr.setAttribute("type","text/javascript");
 fr.setAttribute("src", fn);
 }
 else if (ft=="css"){
 var fr=document.createElement("link");
 fr.setAttribute("rel", "stylesheet");
 fr.setAttribute("type", "text/css");
 fr.setAttribute("href", fn);
 }
 if (typeof fr!="undefined")
 document.getElementsByTagName("head")[0].appendChild(fr);
 }

Use ljscssfile(‘css/css1.css’,’css’) for loading the file CSS file.

2.      There are styles which need not repeat for every created class.For example, Use font-family style for body instead of adding it in multiple places , so that it is auto inherited for all the html tags inside the body tag. And define different font-family if we need a separate font.

 body{font-family:Arial;font-size:12px}
 .tag{font-size:10px}
 .heading{font-family:Verdana}

3.      Try to avoid using expressions in CSS. Browsers will evaluate your expression and assign values to corresponding tags defined in expression which is an overhead.

 #container
 {
 width:expression(
 document.body.clientWidth > 1100)? "1100px" : "auto"
 );
 }

Browsers render & evaluate CSS expressions every time a change happens(scroll,resize) or even mouse moves over document. Check http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_6/ for details.

We can replace CSS expression with javascript implementation which might be faster. check http://blog.dynatrace.com/2010/02/16/the-real-performance-overhead-of-css-expressions/ for details.

4.      Give smaller names for CSS class.for example, instead of naming .divMainHeadingBold we can give .dMHB which reduces css file size.

5.      Compress all CSS files in your application to a single or maximum 2 files. Online compressor which i regularly use http://developer.yahoo.com/yui/compressor/, and is very helpful.

6.      Once you compress your files to a single or 2 files, find for ;} and replace it with }.

7.      Enable gzip compression for CSS files.

Javascript

1.      Load javascript file(s) based on context. Add the scripts needed inside <head> tag which is/are needed initially needed, and load other script files way later on window.load or document.ready or window.addEvent(‘domready’, function() {.. at the end of page inside <body> tag.Check 1.1(CSS first point) for the method to call for loading javascript file, jscssfile(‘scripts/mootools.js’,’js’);

2.      Use JSON data formats for sending & receiving data between client & server. Data transfer & parsing/processing data is faster.

3.      Use smaller names for functions,variables.for example, instead of naming function updateStatusOfUser(userId) use uSOU(id) which reduces the files size.

4.      Compress all Javascript files in to a single file or maximum 2 files. Online compressor which i regularly use http://javascriptcompressor.com/Default.aspx, which is very helpful.

5.      Minify your javascript files which reduces a hell lot of size.Use http://dean.edwards.name/packer/, http://crockford.com/javascript/jsmin or http://developer.yahoo.com/yui/compressor/.

6.      Once you compress or minify your javascript files find for ;} and replace with }.

7.      Enable gzip compression for javascript files.

HTML

1.      Use smaller text for  id,name & class for html controls.for example, instead of <input id=”userLoginId”/> use <input id=”uLId”/> which reduces pages size, so saves loading time.

2.      Remove white spaces between tags. Don’t put unnecessary space between html tags or contents in html, instead use CSS styles for aligning page contents.

3.      Add only attributes which are useful & necessary.for example, we can avoid using alt & title attributes for button control.

4.      Reduce inline scripts and styles in page, instead use separate files for loading scripts or styles.

5.      Use Meta tags efficiently for client side caching.<META HTTP-EQUIV=”CACHE-CONTROL” CONTENT=”PUBLIC“> , HTTP 1.1. Allowed values are PUBLIC , PRIVATE, NO-CACHE & NO-STORE.

6.      Minimize HTTP request size by removing cookies from request sent to server, especially while fetching static contents or media, even separate servers for loading media is also recommended.

7.      Minimize HTTP response size by enabling gzip compression for HTML and XML for browsers that support it.

Media

1.      Use CSS Sprite for loading images in website. Instead of loading small images separately, create a single image with all those images embedded in it and use background-position to show the images separately.Check  http://www.w3schools.com/css/css_image_sprites.asp and http://css-tricks.com/css-sprites/ for details. Also check this online tool http://www.spritebox.net/

2.      Compress Images. Use http://www.smushit.com/ysmush.it/ or http://www.punypng.com/ to compress your images to save a lot of space with out losing quality.

3.      Load images only when user wants to view it.For jquery we have http://www.appelsiini.net/projects/lazyload & mootools its http://mootools.net/forge/p/lazyload.

4.      Load media (images,video,audio) from external server other than application server. Use streaming or players which use streaming for loading video/audio.

Tools & Plugin

Following are some tools and browser plugin for analyzing & fixing performance ,

1.      Firebug – FireFox plugin

2.      YSlow- FireFox plugin

3.      Page Speed- FireFox plugin

4.      IE Developer Tool- IE plugin

5.      WebDeveloper- FireFox plugin

6.      Google Chrome users check http://code.google.com/chrome/devtools/ and http://code.google.com/chrome/devtools/docs/overview.html

7.      WireShark – Windows tool, check http://www.wireshark.org

8.      Microsoft Network Monitor

9.      HTTPWatch Basic Edition – http://www.httpwatch.com

CPU Utilization

This is major criteria for web apps with lots of visitors around. Facebook used Hiphop because of CPU utilization issues.With HipHop facebook reduced the CPU usage on Web servers on average by about fifty percent, depending on the page. HipHop for PHP isn’t technically a compiler itself. Rather it is a source code transformer. HipHop programmatically transforms your PHP source code into highly optimized C++ and then uses g++ to compile it. HipHop executes the source code in a semantically equivalent manner and sacrifices some rarely used features — such as eval() — in exchange for improved performance. HipHop includes a code transformer, a reimplementation of PHP’s runtime system, and a rewrite of many common PHP Extensions to take advantage of these performance optimization. Check http://developers.facebook.com/blog/post/358 for details.CPU utilization can also be minimized by using optimized coding techniques

Other Tips

  1. PHP – http://code.google.com/speed/articles/optimizing-php.html
  2. DOTNET – http://msdn.microsoft.com/en-us/library/ms973839.aspx and http://msdn.microsoft.com/en-us/library/ff647813.aspx.
  3. For PHP users, use <?php flush(); ?> after <head> tag. Also one can load the header and footer contents, then load the body contents using AJAX with loading image 🙂
  4. Remove scripts from html, php, aspx or any UI file to a separate JS file which makes page loading faster.
  5. Use for loop in javascript instead of foreach loop in Jquery or Mootools.
  6. Use CDN, just google it you will get loads of server which supports CDN.for example for loading JQUERY scripts check http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
  7. Use IIS Cache for IIS hosted applications. Following are some links which shows output & file cache.http://www.iis.net/ConfigReference/system.webServer/caching, http://learn.iis.net/page.aspx/154/walkthrough-iis-70-output-caching/, http://learn.iis.net/page.aspx/204/http-response-cache/ Do google for more.
  8. Fine tune Apache server check http://httpd.apache.org/docs/2.0/misc/perf-tuning.html
  9. Modify .htaccess. Enable compression via mod_deflate or mod_gzip, Cache Control, Disable ETags, Stop Hotlinking (access website resources in other websites) , Preserve Bandwidth(using zlib.output_compression)
  10. for ASP.NET apps,
    1. Use ViewState wisely for controls & pages depending on requirement.
    2. Disable SessionState for static pages.
    3. for Static pages try using html pages instead of aspx or ascx page.
    4. Try to use normal HTML controls where ASP.NET control features are not required.
    5. Enable Page, Output, Fragmented cache wisely.
    6. Use CLR Profiler http://msdn.microsoft.com/en-us/library/ms979205.aspx
    7. Combine all css and javascript files using http://weblogs.asp.net/rashid/archive/2009/04/28/script-and-css-management-in-asp-net-mvc.aspx
    8. Page.IsPostBack Property and unwanted AutoPostBack event for asp.net controls.
      9.  if(!Page.IsPostBack)
 {
 BindDropDown();
 LoadDynamicControls();
 }
    9. Use Asynchronous call for webservices or any external services so that current thread need not wait for response.
    10. Optimize server side language (C# or VB.NET).for example use stringbuilder for appending text instead of ‘+’, there are many better standard way of dotnet code which will ease CLR compiler to execute faster. This definitely improve app performance. Do google it for details.
    11. Minimize Database roundtrips. Use disconnected data model, Stored Procedures, DTS packages. Do google  for details. for example inside stored procedure we can do
    12. Use AJAX for sending data to server. One can easily avoid client-server round trips which saves hell lot time if switched to AJAX, better use normal javascript XMLHTTRRequest instead of ASP.NET AJAX.
    13. Clean your web.config, global.asax with unwanted configurations and events.for example debug mode in web.config is not needed in production environment and Session.Start event is not needed unless you are  actually using it for any major purpose. Do google for details.
    14. Follow Microsoft Patterns and Practices. Best example is singleton pattern. Follow this link http://msdn.microsoft.com/en-us/library/ff649152.aspx.

All the tips listed here are used in my path of development. Hope this content is helpful.
And do share important tips or corrections here. Cheers :), have fun.

Other Reference for performance tuning

o    Jquery

http://addyosmani.com/blog/8-jquery-performance-tips/

http://www.learningjquery.com/2006/12/quick-tip-optimizing-dom-traversal

o    Dotnet

http://dotnetperls.com/optimization

o    General

http://developer.yahoo.com/performance/rules.html