Okay
  Public Ticket #421670
Render blocking scripts
Closed

Comments

  • April started the conversation

    Can we move render blocking scripts to bottom of page?

    My site is just un-usable because it takes 10 seconds to load - each and every time.

    Google page speed insights reports the render block scripts below make the page "HANG" before any thing shows up.

    Quote
    Eliminate render-blocking JavaScript and CSS in above-the-fold content

    Your page has 5 blocking script resources and 19 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.
    END QUOTE

    Thought I would ask you first but in the meantime I will hunt for a WordPress script that might move js around. And while I compress the images on the site.

    • http://www.sample.com/…-includes/js/jquery/jquery.js?ver=1.11.2
    • http://www.sample.com/…s/jquery/jquery-migrate.min.js?ver=1.2.1
    • http://www.sample.com/…jquery.themepunch.tools.min.js?ver=4.6.9
    • http://www.sample.com/…y.themepunch.revolution.min.js?ver=4.6.9
    • http://www.sample.com/…themes/salient/js/modernizr.js?ver=2.6.2

    Here is the page I used to discover why my page would not load.

    https://developers.google.com/speed/pagespeed/insights/
  •  9,001
    Tahir replied

    Hey,

    Simply use W3Total Cache Plugin .

    Thanks


    ThemeNectar Support Team 

  • April replied

    yes. i found and installed it last night. glad to hear it is approved by theme nectar.

    it is breaking the theme so i will have to trail/error to see what scripts to keep at top.


    great theme!

  •  1
    Mike replied

    Has anyone figured out what it really takes to "Eliminate render-blocking JavaScript and CSS in above-the-fold content"  in the Salient theme?  I've read five posts on the topic, but it all seems a little unresolved.    It sounds like all you have to do is become perfectly familiar with all scripts and CSS, their orders and dependencies.    I'm not that good.

    Has anyone found a consultant that can get it done, or is this theme just too complex to pass google's little test?   

  •  9,001


    ThemeNectar Support Team 

  •  1
    Mike replied

    Ah!   cool.  Thanks Tahir!

    That's a great plugin and will help... and it's nice to see it in print that the page speed checker isn't the ultimate authority.

    Thank you. 

  •  2
    dragonlee_1020 replied

    Hi Theme Nectar,

    I like to increase my page speed, check out "screenshot-gtmetrix.com-2017-01-11-01-20-05.png"

    This guy Patrick Sexton stated that in this article :
    "Deferring of javascript is one of those issues on the web that can make you want to pull your hair out trying to find a solution. Many people say "just use defer" or "just use async" or others say "just put your javascript at bottom of page" but none of those solve the problem of actually allowing a webpage to fully load and then (and only then) loading external JS. Nor will they get you past that "Defer loading of javascript" warning you are getting from the Google page speed tool. This solution will."

    So he suggest this method (which i haven't tried, cause i like to know how to applied this code in html before end of </body> tag), check out "screenshot-varvy.com-2017-01-11-01-17-26.png", to solve this "Eliminate render-blocking JavaScript and CSS in above-the-fold content" issue that checked by Google PageSpeed Insights

    <script type="text/javascript">

    function downloadJSAtOnload() {

    var element = document.createElement("script");

    element.src = "defer.js";

    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>

    My ranking in Google PageSpeed Insights show very different result against GTmetrix, as Tahir mentioned before Google Page Insights Shows Errors/Warnings, Google PageSpeed Insights is not accurate.

    i like to know how to apply Patrick Sexton's "defer.js" method, and if i applied will it destroy my webpage? And is this method gonna work? Thanks you for solving my doubts :)

    Regards,
    Ming Yao

  •  9,001
    Tahir replied

    @Dragonlee , 

    Try this plugin instead of that JS code : https://wordpress.org/plugins/above-the-fold-optimization/

    Best.


    ThemeNectar Support Team 

  •  1
    Travis replied

    Tahir, that plugin was recently removed from wordpress. render blocking js is completely killing our site's pagespeed on mobile. Do you have any other recommendations for addressing this issue?

  •  3,030
    Andrew replied

    Hi Travis,

    Could you try and use a different plugin like suggested on this guide - https://www.wpbeginner.com/wp-tutorials/how-to-fix-render-blocking-javascript-and-css-in-wordpress/

    Wordpress site suffer from this problem due to how wordpress works generally.
    Let us know if it works.