Remove Render-Blocking JavaScripts

Running Google PageSpeed insights metrics to improve my ehubcap.net site performance it flagged a warning as follow:
"Consider Fixing:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:
http://ehubcap.net/…mFFR0lejVCKoiYRAdoiror7VXF_PHOFqCmgyDwE1
Optimize CSS Delivery of the following:
https://fonts.googleapis.com/css?family=Open+Sans:400,300,700
http://ehubcap.net/…Z1H5ti-cY9WajlKPD-WxLNe6e6as8Hn-A9JRlVg1"

This seem to be a reference to the mobile mode of the responsive media queries bundling structure coded for the Theme.
What feasible solution can be achieve to solve this?
Google will penalize our ranking if we don't abide by this compliance guideline
Advise please
Jose
ehubcap

PS. Also posted first on Nop-Templates forum
Their answer here

Thanks suggestion is good. But no all suggestions could be implemented. These scripts should be loaded before main content. It cannot be changed

Right again Andrei, it will take a whole new approach on rewriting and guidelines because as far as I know javascript and its jquery variation along with css have absolutely to be loaded first and of course the code is humongous, conversely, parsing will take time, to the detract of subpar mobile users sucked on wireless plans

a.m. wrote:
Hi, have things changed? I have quickly tried to implement this, and this seems to work now.
In PageHeadBuilder I've replaced the line

result.AppendFormat("<script src=\"{0}\" type=\"text/javascript\"></script>", urlHelper.Content(path));

with

result.Append(GenerateAsyncJsBlock(urlHelper.Content(path)));

private string GenerateAsyncJsBlock(string jsUrl)
    {
      var result = string.Format(@"<script type=""text/javascript"">
function downloadJSAtOnload() {{
var element = document.createElement(""script"");
element.src = ""{0}"";
document.body.appendChild(element);
}}
if (window.addEventListener)
window.addEventListener(""load"", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(""onload"", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>", jsUrl);
      return result;
    }


... and it all still seems to work after a quick smoke test. Of course, this is not the final solution, but page seems to load faster now! What functionality will be broken because of this? What should I test?

Thanks, I'll do some testing tomorrow

wunpac wrote:
The code is not reusable right now, if you disable bundling you'll get a lot of times this peace of javascript.
Better would it be to create an array inside the function of JavaScripts to add to the page.

But for now it should do the trick.
Still wondering WHY a.m. said it would not be possible.

wunpac wrote:

Let us know about results :)

Im trying the aproach above but Im not getting good results.

Here is my header with my js:

    Html.AppendScriptParts("~/Scripts/slidebars.min.js");
    Html.AppendScriptParts("~/Scripts/responsive.js");
    Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
    Html.AppendScriptParts(ResourceLocation.Foot, "~/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(ResourceLocation.Foot, "~/Scripts/jquery.validate.unobtrusive.min.js");
    Html.AppendScriptParts(ResourceLocation.Foot, "~/Scripts/jquery.validate.min.js");
    Html.AppendScriptParts(ResourceLocation.Foot, "~/Scripts/jquery.lazyload.min.js");
    Html.AppendScriptParts(ResourceLocation.Head, "~/Scripts/jquery-1.10.2.min.js", true);

Im removing the jquery from bundle, so it can be defered. In fact it is, but loading after all scripts, what is not good, it need to be loaded first.

Keep trying...

ivanslater wrote:
What do you mean "no good results"?

ivanslater wrote:
And, the fact that you set jquery to TRUE should only impact the fact that it's not bundled...
In my test I replaced the TWO occurrences of <script src=.. /> with the deferred method, so ALL scripts are loaded after page load.