nopcommerce 3.80 ender-blocking JavaScript and CSS in above-the-fold content

Question

I'm using the "async" property of Html.AppendScriptParts method in nopcommerce 3.80 like that Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);

The google PageSpeed Tools give it a high score which is i expected: But it seems effect to the other functionalities of website (nivo slider, ajax filter which comes from Seven Spikes plugin,... )

I'm not using js and css bundling feature in nopcommerce. Can you guys please tell me what is the best solution in my scenarior now ? Any helps are very appriciated. Thank you so much.

Here is my code of _Root.head.cshtml:

@using Nop.Core.Domain.Common;
@using Nop.Core.Domain.Seo
@using Nop.Core.Infrastructure;
@{
    var displayMiniProfiler = EngineContext.Current.Resolve<Nop.Core.Domain.StoreInformationSettings>().DisplayMiniProfilerInPublicStore;

    Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
    Html.AppendScriptParts("~/Scripts/public.common.js");
    Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
    Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
    Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
    Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
    Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
    var commonSettings = EngineContext.Current.Resolve<CommonSettings>();
    if (commonSettings.RenderXuaCompatible)
    {
        Html.AppendHeadCustomParts(string.Format("<meta http-equiv=\"X-UA-Compatible\" content=\"{0}\"/>", commonSettings.XuaCompatibleValue));
    }
    var seoSettings = EngineContext.Current.Resolve<SeoSettings>();
    if (!string.IsNullOrEmpty(seoSettings.CustomHeadTags))
    {
        Html.AppendHeadCustomParts(seoSettings.CustomHeadTags);
    }
}
<!DOCTYPE html>
<html@(this.ShouldUseRtlTheme() ? Html.Raw(" dir=\"rtl\"") : null) @Html.NopPageCssClasses()>
<head>
    <title>@Html.NopTitle()</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <meta name="description" content="@(Html.NopMetaDescription())" />
    <meta name="keywords" content="@(Html.NopMetaKeywords())" />
    <meta name="generator" content="nopCommerce" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    @Html.NopHeadCustom()
    @Html.Partial("Head")
    @Html.Widget("head_html_tag")
    @Html.NopCssFiles(this.Url, ResourceLocation.Head)
    @Html.NopScripts(this.Url, ResourceLocation.Head)
    @Html.NopCanonicalUrls()
    @Html.Action("RssHeaderLink", "News")
    @Html.Action("RssHeaderLink", "Blog")
    @Html.Action("Favicon", "Common")
    @if (displayMiniProfiler)
    {
        @StackExchange.Profiling.MiniProfiler.RenderIncludes()
    }
</head>
<body>
    @RenderBody()
    @Html.NopCssFiles(this.Url, ResourceLocation.Foot)
    @Html.NopScripts(this.Url, ResourceLocation.Foot)


</body>
</html>

Answer 1

First, it's not related to Seven Spikes plugins. This issue is because of async behavior. When you make jquery file to an async, it means application will not wait to load that file and going to load next js file. But other js file are depended on first main file, and that's way you're getting errors.

Let's understand it with current scenario, the default code is:

Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");

In this case the order of js files are:

Now load jquery min js file asynchronously.

Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js", false, true);

And check console:

With this change you will get an error(s).
To resolve this issue, you have to load js min file in one particular order on basis of dependency.

Side Note: this issue is with default code too!! I've tested with nopCommerce 3.80 and 3.90

nopcommerce 3.80 ender-blocking JavaScript and CSS in above-the-fold content

Question

1 answers

solution1
1 2017-12-07 13:07:43

nopcommerce 3.80 ender-blocking JavaScript and CSS in above-the-fold content

Question

1 answers

solution1 1 2017-12-07 13:07:43

solution1
1 2017-12-07 13:07:43