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

Viewing 15 replies - 16 through 30 (of 32 total)
  • Ramanan

    (@superpoincare)

    I guess you must have removed jquery from the list but probably didn’t choose the “Embed before </body>” for other JS file. Make sure you have this option for all the other JS files. Also “Non-blocking using “async” above it.

    Thread Starter klipklopp

    (@klipklopp)

    Ok… now the mobile version gives the error for the two files I removed and the desktop version gives the error for:

    https://www.westminsterav.com/wp-content/cache/minify/000000/7a5b6/default.include.7129c5.js

    Everything is “Embed before </body> and all three operation settings are “Non-blocking using async”

    Ramanan

    (@superpoincare)

    Oh. I don’t see the error on your site. Even tested pagespeed.

    Only see this:


    Your page has 2 blocking script 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:
    https://www.westminsterav.com/…-includes/js/jquery/jquery.js?ver=1.11.2
    https://www.westminsterav.com/…s/jquery/jquery-migrate.min.js?ver=1.2.1

    Thread Starter klipklopp

    (@klipklopp)

    Right – so how can I get rid of those errors?

    Ramanan

    (@superpoincare)

    Hmm.

    Now it’s getting tougher!

    Your plugin seems to have some inline JS code and this is the reason it needs to load jQuery on top.

    But although I do not know how to do better, I might experiment a few things.

    Such as:

    Put back jquery in the JS file management list. Change all file location options to <head> but use non-blocking with defer or other options.

    One more thing. When you paste the link for the jquery in the JS file management options, preferably remove everything after the .js part (ie ?ver=1.11.2). This way you don’t have to worry about version changes.

    But you might have to do a lot of experiments now.

    Ramanan

    (@superpoincare)

    The other thing you could do is to use Autoptimize itself to do JS optimization (after disabling W3 Total Cache minification for JS). But I haven’t tried that. I use Autoptimize only for CSS.

    But with some experiments, you can definitely reach 99 or 100 for both desktop and mobile.

    Thread Starter klipklopp

    (@klipklopp)

    Well,

    After much experimentation, I have gotten to the point where this is the only javascript that is causing problems:

    https://www.westminsterav.com/wp-content/cache/minify/000000/7a5b6/home.include.54f0f0.js

    In the list it is listed like this:

    wp-content/cache/minify/000000/7a5b6/home.include.54f0f0.js

    I can’t get it to allow me to add the website before it.

    Any suggestions for this particular JS? or any suggestions for anywhere else to look for answers?

    Thanks very much!

    Ted

    Ramanan

    (@superpoincare)

    Ted,

    That wp-content/cache/minify/000000/7a5b6/home.include.54f0f0.js is a concatenation of many JS files.

    Your slideshow plugin has some JS which is inline and hence needs other JS to load before.

    I think Autoptimize takes care of inline JS as well. May be you can try to use Autoptimize for JS also, not just for CSS.

    Ramanan

    (@superpoincare)

    Was experimenting with my own site with Autoptimize JS. It causes a white screen of death even with W3TC JS minify turned off. But when I deactivate W3 Total Cache, it works. So I am only able to use Autoptimize it for CSS.

    You can’t run Auto Optimize with any of the W3TC minify modules. Make sure you go into the W3TC general settings and uncheck the minify option then there shouldn’t be a white screen.

    Ramanan

    (@superpoincare)

    Destac,

    What I meant was I get a WSOD even with W3TC JS minify turned off and Autoptimize On. Only if I disable W3TC does the white screen go away. So there is some incompatibility.

    The only compatability is when you are running both minification at the same time as confirmed by both W3TC and Autoptimize. So you probably have something else enabled such as html compression. You can’t just disable one of the w3tc minification modules you have to disable all of them and solely use autoptimize.

    Ramanan

    (@superpoincare)

    Yeah maybe that’s the reason.

    Thanks. Will try.

    hello, i need help, having sleepless night trying to solve this problem, but no to avail..google speed test always showing the following:
    Your page has 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.
    Optimize CSS Delivery of the following:

    https://code.jquery.com/…i/1.11.2/themes/smoothness/jquery-ui.css
    https://www.coronislandloop.com/…includes/css/dashicons.min.css?ver=4.2.3

    please help me..i don’t know what to do anymore.

    sleepless nights because of 2 CSS files, you should not let that bother you that much Coron Loop! ??

    for the jquery-ui.css one; as the file is not on your own domain, AO will not aggregate/ optimize it. dequeue the jquery.com hosted jquery-ui.css and enqueue it the wp core one.

    for the dashicons-one: that one is hard-excluded by AO, but in general this only affects the performance for logged-in users (as dashicons are used by the wpadminbar at the top). at first sight your CSS does not reference dashicons, so you should be able to dequeue dashicons in your frontend.

    above all; have fun!

    frank

Viewing 15 replies - 16 through 30 (of 32 total)
  • The topic ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’ is closed to new replies.