WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Eliminate external render-blocking Javascript and CSS in above-the-fold content (23 posts)

  1. alekv
    Member
    Posted 8 months ago #

    Hi

    When testing the performance of my site with http://developers.google.com/speed/pagespeed/insights/ I get a strong recomomdation to "Eliminate external render-blocking Javascript and CSS in above-the-fold content".

    How can I achieve this with wordpress without using plugins? If there is no other way than using a plugin, which one is the best (or most standard) one?

    Thanks
    Alekv

  2. Pioneer Valley Web Design
    Member
    Posted 8 months ago #

    Please link to site for such help.

  3. Chris WP007
    Member
    Posted 8 months ago #

    Hi,

    I am getting the same errors. I am using W3 Total Cache plugin to speed up my site but I don't know how to: Eliminate external render-blocking Javascript and CSS in above-the-fold content.

    It says: Your page has 16 blocking script resources and 1 blocking CSS resources.

    Anyone know how to fix this using this W3 Total Cache plugin. I have tried everything in the minify settings but it breaks my javascript.

    http://www.telltalesonline.com

  4. Pioneer Valley Web Design
    Member
    Posted 8 months ago #

    Typically this means move the js to the footer.

    https://developers.google.com/speed/docs/insights/BlockingJS

  5. Chris WP007
    Member
    Posted 8 months ago #

    Thanks Seocoast.

    I have a decent level of experience in html and css, but attempting to move all the javascript from all these plugins into the footer sounds tricky. I will give it a shot, I am just wondering if I will have to hunt this java after every plugin update!?

    Regards,

    Chris

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 8 months ago #

  7. Chris WP007
    Member
    Posted 8 months ago #

    Hi Andrew,

    I tried the plugin, it didn't correct any of the errors I have in Google PageSpeed Insights. It broke my category pages as well!

  8. Chris WP007
    Member
    Posted 8 months ago #

    Hi Seocoast,

    So I use the defer method and simply copy this into my footer?

    <script type="text/javascript">

    // Add a script element as a child of the body
    function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "deferredfunctions.js";
    document.body.appendChild(element);
    }

    // Check for browser support of event handling capability
    if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;

    </script>

  9. Pioneer Valley Web Design
    Member
    Posted 8 months ago #

    Where did you get that code from?

    Also please put code in ticks - the forum cannot show all code when not in ticks.

    http://codex.wordpress.org/Forum_Welcome#Posting_Code

  10. alekv
    Member
    Posted 8 months ago #

    Using the http://wordpress.org/plugins/footer-javascript/ plugin only solved the problem for me partially.

    I've tried the PageSpeed Service (beta). https://developers.google.com/speed/pagespeed/service Ironically even this service doesn't completely solve all reported issues. Anyway, it's an interesting service and worth having a look into it. Basically it speeds up every webpage by putting a Google PageSpeed server between your webpage and the Internet. It caches and rewrites the page on the fly to make it faster. Simulated tests speed up the webpages significantly. I am currently using it and it is ok (there was not much room for improvement left on my page anyway). The setup is also not too complicated, but requires a little bit of technical know how (changes to the DNS entry). So far the service is for free, but Google plans to change it to a paid service sometime in the future. I wonder if there are any comparisons between PageSpeed Service and WordPress caching plugins. Anyone?

  11. maumau254
    Member
    Posted 7 months ago #

    Hi everybody. I am pretty new around here so easy on me guys. I just started to use the pss service and it is simply amazing. I have to say it speed up my website quite fast and also improved my score on the google page speed service test. Ranging at 90/100 currently. I am struggling with the same problem of "render-blocking Javascript and CSS in above-the-fold content" If someone would be kind enough to break it down step by step, or a link to some article that discusses the issue it would be greatly appreciated. Thanks folks. Cheers. one love.

    http://www.unitedstatesafrica.net/

  12. jim0266
    Member
    Posted 7 months ago #

    maumau254, I ran your site through the PageSpeed test and it came up with a 59 for mobile and and 67 for desktop. Did anything change or are you still seeing numbers around 90?

  13. tylanni
    Member
    Posted 7 months ago #

    Hi,
    I am receiving this below message from Google Page Speed analysis. I am using W3 Total Cache plugin. What changes I need to do in fixing it? Is it plugin issue or hosting issue?

    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your page has 5 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://basunivesh.com/wp-includes/js/jquery/jquery.js?ver=1.10.2
    http://basunivesh.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1
    http://basunivesh.com/wp-content/plugins/adsense-click-fraud-monitoring/js/checkclicks.js?ver=3.6
    http://basunivesh.com/wp-content/plugins/adsense-click-fraud-monitoring/js/updateclicks.js?ver=3.6
    http://basunivesh.com/wp-content/plugins/adsense-click-fraud-monitoring/js/check_min.js?ver=3.6
    Optimize CSS Delivery of the following:

    http://basunivesh.com/wp-content/cache/minify/000000/M9BPzUktS80zMdAtKMrXLy6pzEnVMdTPSi0pSEzO1s_NTynNSS3WL89MSU8tgdMA.css
    http://fonts.googleapis.com/css?

  14. zanchit
    Member
    Posted 7 months ago #

    Hi
    Likewise on my site. Google analytics coming up with Remove render-blocking JavaScript; and Optimize CSS Delivery.

    I have W3 installed and have unchecked the box about "removing caching of objects after settings change"

    and have also put the following code into functions.php

    'function _remove_script_version( $src ){
    $parts = explode( '?ver', $src );
    return $parts[0];
    }
    add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
    add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );'

    no change

    http://www.rchittenden.co.uk

  15. joshell
    Member
    Posted 7 months ago #

    I have tried page speed service. After playing with various settings in W3 Total Cache plugin the PS service actually made the page load slower... So I assume it wont make wonders and you can still achieve good results just with this plugin.

    well I am a beginner in this, so just sharing my experience
    J

  16. manuelkuhs
    Member
    Posted 7 months ago #

    Here's what I figured out about how to eliminate all render-blocking JS & CSS:

    Install W3 Total Cache

    Go to Minify

    Use the "help" wizard that you can see as a button near the top

    Accept the suggestions without making changes. This will combine all your CSS files into 1, and all your JS files into 1, 2 or 3, depending where you load them (if you load all in the same area, e.g. in the <head>, you'll only get 1 combined file).

    Set all JS to "Non-blocking using Async".

    Now test your site. If everything works, the only blocking CSS/JS file left should be your combined CSS file, and nothing else.

    Most likely some JS functions won't work properly anymore. If this is the case, it gets a bit more complicated.

    In this case, try the following:
    Remove all the JS files in the Minify settings of W3

    Open the source of your functioning page where no JS files are combined and manually add to W3 Minify ONLY the JS files found in the header (since these are the ones "above the fold") and IN THE ORDER that they exist in your source file. Try this. If it works, try moving them all into the <body> or just before the </body> using the Minify JS settings.

    In my case, I had a strange issue whereby combining jquery.js with the other JS files broke many js functions that depend on jquery even though they loaded after. To get around this I made jquery.js load on its own after <body>, and made all the others load combined just before </body>, with everything set to load using async.

    Using this method, the only "above the fold" problem I have is the combined CSS sheet.

    If your combined CSS is small, you can try inlining the entire thing.

    If not, the only way around this that I currently know is to manually inline only the relevant parts of this combined CSS, and then to load the combined CSS in the footer using JS.

    If someone knows of a way to automatically inline only the relevant CSS, I'd be very happy to hear!

  17. fashion2012
    Member
    Posted 7 months ago #

    I've tried all above methods but unfortunately couldn't resolve the issue for my website http://www.cricscores1.com/ Any one please have a look ???

  18. frods
    Member
    Posted 7 months ago #

    manuelkuhs

    Thank you very much for your pointers. It wasn't as hard to handle W3 as I feared.

    One suggestion, the "help wizard" didn't pick up on all the links indicated by Google Pagespeed Tool. I manually added a bunch of CSS sheets in W3, just clicking on "Add a stylesheet". While adding them, they also appear to have a certain order in which they should be placed in W3. Messing around with 11 sheets for about 20 minutes did the trick. Weird but, it looks like a theme.css has to be placed above a child.css

    My page http://www.beatshostelsaopaulo.com went from 62/100 to 83/100, and messing with W3 this way solved a bunch of other issues I was having along the way as well!

  19. manuelkuhs
    Member
    Posted 7 months ago #

    frods, you're welcome.

    Just had a quick look at your site, using something like http://wordpress.org/plugins/ewww-image-optimizer/ should fix all your image "problems" reported by Google PageSpeed Insights.

  20. KenTheriot
    Member
    Posted 6 months ago #

    manuelkuhs,

    Where is this "Help Wizard" you guys are talking about. I'm not seeing it. There is a "Help" tab. But that just lists a bunch of FAQs. I just updated W3TC to version 0.9.2.4.

    Thanks.

    Ken

  21. wpgeekster
    Member
    Posted 5 months ago #

    The reason you are getting render blocking message from google is because your javascript is being called in the header. In your wp_register_script() function and in your wp_enqueue_script() function you must include true for the $in_footer argument. If you include the $in_footer argument, you must also include all the other arguments.
    See:
    http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script
    http://codex.wordpress.org/Function_Reference/wp_register_script
    Google page speed combines and minifies the js and css files. So does w3-total-cache. If you want to eliminate that google page speed render blocking flag then you need to change the wp enqueue and wp register script function calls. W3-total-cache has the Set all JS to "Non-blocking using Async" option which means to put the js in the footer, but apparently it doesn't work all the time as fashion2012 has reported. So in that case you have to go in and change it yourself. Most themes put the enqueue and register scripts functions in the function.php file, but not necessarily.

  22. mahlerosa
    Member
    Posted 5 months ago #

    I do not see a help wizard either.

  23. WPyogi
    Volunteer Moderator
    Posted 5 months ago #

    @mahlerosa - please start a new thread if you need help - this one is outdated and frankly a jumbled/confusing mess.

Topic Closed

This topic has been closed to new replies.

About this Topic