Enhancing Web Application Performance

Every one wants to perform fast their web application. While developing and testing with debug mode looks perfect even when QA team test with release build, works fine because all servers were internal, of course internal networks are always faster. When system goes on internet then it gradually slows down.

Important note about web browser: most of the web browser support only 6 web requests to same domain, as result next all requests will be in queue and will be send as soon as processing request get the response.

Few tricks to increase web application:

Enabling Client Caching with Web.config:

This one is the easy way to increase speed up of loading static content like CSS file, javascript files, images and Templates (jQuery templates). Just you need to add Web.config file into Content and Scripts folder and its sub folders with following settings.

<?xml version="1.0" encoding="UTF-8"?> 

<configuration> 

  <system.webServer> 

    <staticContent>

      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />

    </staticContent> 

  </system.webServer> 

</configuration>

Note: this Web.config not for root of your web application

Enabling Client Caching with OutputCacheAttribute attribute in MVC:

public class HomeController : Controller

{

    [OutputCache(Duration = 60)] //for a minute

    public ActionResult Index()

    {

         //your code

    } 

    [OutputCache(Duration = 86400)] //for a day

    public ActionResult About()

    {

         //your code 

    }

    [OutputCache(Duration = 86400)] //for a day

    public ActionResult Contact()

    {

         //your code 

    } 

} 

Using a CDN

If your application is on internet or if it is on intranet and user has access of internet then there is a another way to increase the performance of your web application to use of a CDN (Content Delivery Network). As I said in my Web Browser note, web browser can process only 6 request from same domain, if use CDN then CDN domain is another domain like google or jquery or something else, so your web browser can process more than limited request and if those are the common file which might be used with another web site or application, as result file may be already in your local cache so no need to load from CDN server again.

Example of CDN:

<link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet" /> 

<link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" /> 

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script> 

<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 

<script src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js" type="text/javascript"></script> 

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

Pre load page with jQuery.Mobile’s Prefetch Tag

If your application based on next & previous or displaying images, you can use jQuery.Mobile prefetch to preload the content into memory while user reading or viewing current content.

<a href="nextpage" data-prefetch>Next Page</a>

When user request for nextpage, the content of next page will load instantly because the page was already loaded in background. This content only for single load, when user moves to next page all content will be removed from memory. If you want to keep in memory, you can use data-dom-cache=”true” on the page evement, it will not be unloaded, so next time it will load faster.

MVC 4 Bundles

MVC 4 has a new great feature called Bundles, which allows you to create a bundle of static content files in a single bundle. So bundle feature will reduce number of individual content file request to 1 or 2 requests. The bundle feature put all files together, compress and removes species and remove commented code from the bundle.

Code:

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.unobtrusive*",

                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

                        "~/Content/themes/base/jquery.ui.core.css",

                        "~/Content/themes/base/jquery.ui.resizable.css",

                        "~/Content/themes/base/jquery.ui.selectable.css",

                        "~/Content/themes/base/jquery.ui.accordion.css",

                        "~/Content/themes/base/jquery.ui.autocomplete.css",

                        "~/Content/themes/base/jquery.ui.button.css",

                        "~/Content/themes/base/jquery.ui.dialog.css",

                        "~/Content/themes/base/jquery.ui.slider.css",

                        "~/Content/themes/base/jquery.ui.tabs.css",

                        "~/Content/themes/base/jquery.ui.datepicker.css",

                        "~/Content/themes/base/jquery.ui.progressbar.css",

                        "~/Content/themes/base/jquery.ui.theme.css"));

        }

Now in your Layout.cshtml file

Beginning of file

    <head>

........

        @Styles.Render("~/Content/css")

        @Scripts.Render("~/bundles/modernizr")

    </head>

End of the layout.cshtml file 

        @Scripts.Render("~/bundles/jquery")

        ...

    </body>

</html>