All geek questions in one place

How to reduce page load time (combine javascript)?

A page created using ASP.NET MVC 2 takes 1.7 seconds to load. It contains 13 js files as shown below. Firebug shows that each js file download returns a 304 response, but since there are 13 files, this can significantly increase the page load time. Audit red warning warning Chrome merges js files.

How to combine them into one file using ASP.NET MVC 2 automatically or in another way to reduce load time? The project must have separate js files so that they can be replaced, but they should have been delivered as possibly as a single js file.

jqgrid, jquery, jquery-ui, tinymce and some jQuery jQuery files are used as shown below. Used by Visual Web Developer Express 2010. The application runs 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's suggestion in response, but got an error. jQuery is undefined as shown in the image below. How to fix it? IE console does not show any errors.

jQuey is undefined

+4
source share
5 answers

I want to suggest you do one experiment using the Closure compiler .

First of all, you can try to combine all the JavaScript and all the built-in JavaScript code that you use on the page. You must keep the file order. It seems to me that you will have two versions of the results: one with CurUser.GetLanguage() === "EST" and the other with CurUser.GetLanguage() !== "EST" .

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

0
source

To overcome this type of situation, you have many methods. Some of them:

JS Specific Page: Try adding javascript files as required. Do not add unnecessary JS that are not used on the page.

GZIP compression: Applying GZIP compression on pages and static js and css files.

Caching At the server level (IIS), you can cache these static files, such as JS or CSS

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

Combine multiple javascript files into a single js file

Good luck !!

0
source

I recommend using head.js.

It really helps reduce page load time with separate .js files. You just include one file with something like this:

 head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() { // all done });
0
source

http://combres.codeplex.com/ allows you to store individual javascript files and combine and minimize them at runtime.

It works with real pleasure.

It looks like they turned something else upside down in 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

0
source

Combining files together

Most modern major browsers limit the number of simultaneous connections for each hostname to six. This means that when processing six requests, additional requests for assets on the host will be queued by the browser

Linking can significantly improve the loading time of your first page.

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

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

0
source

Source: https://habr.com/ru/post/1435745/

More articles:


All Articles