Remove Render-Blocking JavaScripts

This is true!

Nothing from me yet, but keep trying!

Performance would also benefit by using CDN's instead of locally hosted javascript... But, the javascript rendering is 80% custom code, not easy to change that.
I pm'd a.m., but no reply yet.

Hi guys, I'm following yours progress on the matter since I started this thread, for simplicity and to boost page load, my implementation leverage a combination of Azure blob storage and a CloudFlare CDN Pro, but you can start taking advantage of a free account https://support.cloudflare.com/hc/en-us/categories/200275218 that is as good as it get, however I'm still being dogged by the JavaScript's block affecting my Web App TTFB.
Jose
ehubcap.net

ehubcap wrote:
Replaced jquery, jquery-ui, bootstrap, etc. with references to Google CDN or Cloudflare CDN. Works like a charm.

JavaScript's blocking is a massive exercise. No core Nopcommerce developer seems to want to do this...

There are 400 inline javascript calls to $(document).ready() only....
Moving those to an external javascript file requires a LOT of changes. Need to automate that somehow, but still a massive task.

A reply from a core Nopcommerce developer would be really handy. I pm'd a.m., but he doesn't reply.

Probably they are too busy with version 3.60

I tried following script on _Root.Head. No script error. It creates following lines on my html, but somehow it is not defering anything. When I check the result on http://www.webpagetest.org/ there is no difference. Istead of on load it is still loading as without script.

Created on homepage by script:
<script src="http://xxxxxx.com/Themes/NopShop/Scripts/price-range.js"></script>
<script src="http://xxxxxx.com/Themes/NopShop/Content/bootstrap-3.2.0/js/wow.js"></script>



Script on _Root.Head
<script type="text/javascript">

    function downloadJSAtOnload() {
        (function (scripts) {
            var i = 0,
                l = scripts.length;
            for (; i < l; ++i) {
                var element = document.createElement("script");
                element.src = scripts[i];
                document.body.appendChild(element);
            }
        })(['http://www.xxxxxx.com/Themes/NopShop/Scripts/price-range.js', 'http://www.xxxxxx.com/Themes/NopShop/Content/bootstrap-3.2.0/js/wow.js']);
    }

    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;

    </script>

Are you sure you replaced all @Html.AppendScriptParts calls with your deferred method?

Ah, I may have found a way to fix the issue with inline javascript.

All inline javascript can be lazy loaded as well, with this trick:
http://stackoverflow.com/a/10197342

So:
1) Replace all inline javascript with "text/delayscript"
2) Lazy load ALL libraries.
3) When ready, run all inline javascript.

It's more a hackaround, but it should work.
Best way still is that all inline script is moved to external file.

Yeah! It is possible :D

Managed to defer load ALL javascript libraries, except of course the javascript required to load the libraries :)
Right now, I haven't implemented bundling/minifying, but at least the deferring works!!

0) Replace ALL <script type="text/javascript"> with <script type="text/delayscript"> (~300 occurrences)
1) Included head.js

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.load.min.js"></script>

2) In PageHeadBuilder.GenerateScripts

public virtual string GenerateScripts(UrlHelper urlHelper, ResourceLocation location, bool? bundleFiles = null)
{
            if (!_scriptParts.ContainsKey(location) || _scriptParts[location] == null)
                return "";

            if (_scriptParts.Count == 0)
                return "";
var urls = _scriptParts[location].Select(x => string.Format("'{0}'", urlHelper.Content(x.Part))).Distinct();
      var result = string.Format("<script type='text/javascript'>window.scriptsToDefer = [{0}];</script>", string.Join(", ", urls.ToArray()));
          return result;
}
3) Method to defer load JS:

head.load(window.scriptsToDefer, loadInlineScripts);
      function loadInlineScripts() {
            var _scripts = document.getElementsByTagName("script"),
              _doc = document,
              _txt = "text/delayscript";

            for (var i = 0, l = _scripts.length; i < l; i++) {
              var _type = _scripts[i].getAttribute("type");
              if (_type && _type.toLowerCase() === _txt)
                _scripts[i].parentNode.replaceChild((function(sB) {
                  var _s = _doc.createElement('script');
                  _s.type = 'text/javascript';
                  _s.innerHTML = sB.innerHTML;

                  return _s;
                })(_scripts[i]), _scripts[i]);
            }
          };