4

Page created using ASP .NET MVC 2 takes 1.7 sec to load. It contains 13 js files as shown below. Firebug shows that every js file load returns 304 response but since there are 13 files it may increace page load time a lot. Chrome audit red alert recomments to combine js files.

How to combine them to single file using ASP.NET MVC 2 automatically or other way to decrease load time ? There should be separate js files in project to allow to replace them but those should delivered as single js file probably.

jqgrid, jquery, jquery-ui, tinymce and some jquery plugin js files are used as shown below. Visual Web Developer Express 2010 is used. Application is running under Mono 2.10/Apache and under Windows/IIS

site.master contains:

    <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1" />
        <link rel="stylesheet" href="../../themes/redmond/jquery-ui-1.8.12.custom.css" type="text/css" />
        <link href="../../Scripts/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
        <link href="../../Content/Css/Site.css" rel="stylesheet" />
        <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
        <title>
            <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
        </title>
        <script type="text/javascript">
            "use strict";
            var BASE_URL = '<%= ResolveUrl("~/") %>';
        </script>
        <script src="<%= Url.Content("~/Scripts/jquery/jquery-1.7.1.js")%>" type="text/javascript"></script>
        <script src="<%= Url.Content("~/Scripts/jquery-ui-git.js")%>" type="text/javascript"></script>
        <script src="<%= Url.Content("~/Scripts/i18n/jquery.ui.datepicker-et.js")%>" type="text/javascript"></script>
        <script src="<%= Url.Content("~/Scripts/jquery.contextmenu-fixed2.js")%>" type="text/javascript"></script>
        <% if (CurUser.GetLanguage() == "EST")
           { %>
        <script src="<%= Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-et.js")%>" type="text/javascript"></script>
        <% }
           else
           { %>
        <script src="<%= Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-en.js")%>" type="text/javascript"></script>
        <% } %>
        <script type="text/javascript">
            $.jgrid.no_legacy_api = true;
            $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jqgrid/jquery.jqGrid.src-multiselect1-deleteandsortpatches.js")%>"></script>
    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jqgrid/jQuery.jqGrid.dynamicLink.js")%>"></script>
    <script src="<%= Url.Content("~/Scripts/json2.js")%>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.form.js")%>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/TinyMCE/tiny_mce_src.js")%>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/TinyMCE/jquery.tinymce.js")%>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/myscripts.js")%>" type="text/javascript"></script>
    <script type="text/javascript">
    var 
        $grid;
    $(function() {
        "use strict";

<% if (TempData["Message"]!=null) {
setTimeout( function() {
   showMessage ( '<%= TempData["Message"] as string %>');
...

Update

I tried Oleg suggestion in answer but got error jQuery is not defined as shown in image below. How to fix this ? IE console does not show any error.

jQuey is undefined

Andrus
  • 26,339
  • 60
  • 204
  • 378

5 Answers5

0

To overcome these type of situation you have many techniques. Some of are :

Page Specific JS : Try to add javascript files according to the requirement. Do not add any unnecessary JS which are not used in page.

GZIP Compression : Apply GZIP compression on pages and static js and css files.

Caching : At the server level (IIS) you caching can be applied on these static files like JS or CSS

http://sixrevisions.com/web-development/decrease-webpage-load-times/

Combine multiple JavaScript files into one JS file

Good Luck !!

Community
  • 1
  • 1
Kundan Singh Chouhan
  • 13,952
  • 4
  • 27
  • 32
  • 1. all js files are used 2. Response header contains `Content-Encoding gzip` so it looks like response is compressed 2-3: This is web application: files are in 99% of cases already present in browser cache and apache returns 304 response. So caching and gzip compression cannot decrease load speed. I read link you provided but havent found something (except combining files about which I asked) which can used as answer to this question. – Andrus Sep 23 '12 at 13:13
  • @Andru, find this thread http://stackoverflow.com/questions/5511989/combine-multiple-jquery-script-files-into-one-js-file – Kundan Singh Chouhan Sep 23 '12 at 16:09
0

I recommend use head.js.

It really helps you to decrease page load time with using separate .js files. You just include one file with something like that:

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {     
   // all done     
});
Progressor
  • 1
  • 1
  • 1
    js files are in browser cache. Web server sends 304 response. It looks like head.js does not decrease load time in this case. Request for every page is still issued and 304 response is received if head.js is used. – Andrus Sep 23 '12 at 13:06
  • 1
    Then the best way is to use something like [YUI Compressor](http://developer.yahoo.com/yui/compressor/). I use it in some my projects. It may be quite difficult to configure it in first time, but it gives you good results. Princip of action is to minimize and compile some js files into one. So you can compile jquery, jquery-ui, datepicker, and anothe files into one. And when you need to replace one file with another you should recompile your js file (in some cms it will do automatically). It also can help to optimize and minimize css files. – Progressor Sep 23 '12 at 13:22
0

I want suggest you to make one experiment using the Closure Compiler.

First of all you can try to concatenate all the JavaScript and all inline JavaScript code which you use on the page. You should hold the order of files of cause. It seems to me you will have two version of the results: one with CurUser.GetLanguage() === "EST" and another with CurUser.GetLanguage() !== "EST".

After you will have one JavaScript file you can use the Closure Compiler with a compilation_level of ADVANCED_OPTIMIZATIONS (see here) which can remove all unused JavaScript code. As the result you will get subset of jQuery, jQuery UI and other libraries which you really use on the page. The resulting JavaScript code will be other as on another pages, but it could be very small and could be better optimized as any separate files.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • thna you. I tried it but got error about jQuery not defined. How to fix or find reason for this ? I updated question. – Andrus Sep 23 '12 at 14:15
  • I posted also related question in http://stackoverflow.com/questions/12553153/how-to-fix-clouse-compiler-error-on-css-float-left – Andrus Sep 23 '12 at 14:33
  • simple optimization works OK , but advanced optimizations causes error. – Andrus Sep 23 '12 at 15:54
  • @Andrus: If the code have some problems with `ADVANCED_OPTIMIZATIONS` you can use `SIMPLE_OPTIMIZATIONS` or use for example [Microsoft Ajax Minifier](http://ajaxmin.codeplex.com/). The minimized file will be not so small as with `ADVANCED_OPTIMIZATIONS`, but all will works and your main answer problem will be solved. Of cause I support that you already switched on the GZIP Compression at least for all static files. – Oleg Sep 23 '12 at 17:23
  • advanced optimization probalby renames jQuery to something other. Where to find extern settings file for jquery which can be included to prevent this as described in google closure command documentation? – Andrus Sep 23 '12 at 19:52
  • @Andrus: Look at [here](https://developers.google.com/closure/compiler/docs/api-tutorial3?hl=en#export), but I am not sure that the size of the resulting file is so important for you that you could invest the time for making all the frameworks and JavaScript libraries which you use. The error about jQuery could be only the first error. – Oleg Sep 24 '12 at 02:58
0

http://combres.codeplex.com/ allows you to keep separate javascript files and to combine and minify at runtime.

Works a real treat.

Looks like they've rolled something similar into asp.net 4.5:

http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

spender
  • 117,338
  • 33
  • 229
  • 351
0

Bundling Files Together

Most of the current major browsers limit the number of simultaneous connections per each hostname to six. That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser

Bundling can significantly improve your first page hit download time.

Bundling reduces the number of individual HTTP requests to server by combining multiple CSS files and Javascript files into single CSS file and javascript file.

This site here has a good tutorial on how to add bundling to your application in five easy steps: http://websitespeedoptimizations.com/Bundling.aspx

Ryan
  • 991
  • 6
  • 10