Remove Render-Blocking JavaScripts

1 2 3 4 5 > ... >
Posted: July 09, 2014 at 11:03 AM Quote #126199
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
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: July 09, 2014 at 11:38 AM Quote #126200
Thanks suggestion is good. But no all suggestions could be implemented. These scripts should be loaded before main content. It cannot be changed
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Interested in the dedicated Premium support services provided by core developers? Please visit http://www.nopcommerce.com/supportservices.aspx

Regards,
Andrei Mazulnitsyn
Posted: July 09, 2014 at 12:12 PM Quote #126205
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
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: May 03, 2015 at 12:01 AM Quote #144479
a.m. wrote:
Thanks suggestion is good. But no all suggestions could be implemented. These scripts should be loaded before main content. It cannot be changed

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?
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: May 03, 2015 at 3:22 PM Quote #144485
Thanks, I'll do some testing tomorrow
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Darren Pegram
www.inkredible.co.uk

Twitter: @darrenpegram
Posted: May 03, 2015 at 3:40 PM Quote #144486
wunpac wrote:
Thanks, I'll do some testing tomorrow

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.
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: May 03, 2015 at 3:44 PM Quote #144487
wunpac wrote:
Thanks, I'll do some testing tomorrow


Let us know about results :)
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Dia [email protected]

Please vote for my comment if it is helpful for you.
Posted: May 03, 2015 at 5:39 PM Quote #144489
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...
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
www.Nop-Store.com - Take your store to the next level with our Plugins. We also use them. :)

Facebook: http://www.facebook.com/NopStoreOficial

nopCommerce MVP
Posted: May 03, 2015 at 6:28 PM Quote #144490
ivanslater wrote:
Im trying the aproach above but Im not getting good results.

What do you mean "no good results"?
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: May 03, 2015 at 6:30 PM Quote #144491
ivanslater wrote:
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...

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.
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
1 2 3 4 5 > ... >
Premium support services
  • Dedicated premium support services provided by core developers are intended for persons who run mission critical websites, work on projects with tight deadlines, or want to get dedicated support.
Professional services
  • Want to open a new store? Want to take your store to the next level? Need a custom extension? We can customize nopCommerce to fit your store perfectly. Request a quote to get started.