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

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

    (@superpoincare)

    Something strange happening to your jquery. It is loaded twice.

    https://www.westminsterav.com/…s/jquery/jquery-migrate.min.js?ver=1.2.1
    https://www.westminsterav.com/…000/7a5b6/default.include-body.5af54d.js

    are both jquery.

    I think you are doing minification in a strange way.

    Use “help” in the Minify tab. It’ll list the JS files loaded by your site.

    Choose the option Non-blocking with any of the options which work best. Preferably merge them in one file. This can be achieved by choosing one embed location for all. Be careful of dependencies. So jquery has to be on top.

    For CSS, you can use the plugin Autoptimize. (Uncheck W3 Total Cache CSS minification). In Autoptimize, use the inline and defer. Some reading is required to understand this.

    Thread Starter klipklopp

    (@klipklopp)

    Thanks – I think I followed your suggestions, but I am now getting these errors:

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

    Your page has 1 blocking script resources and 5 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:https://www.westminsterav.com/…000/7a5b6/default.include-body.5af54d.js

    Optimize CSS Delivery of the following:
    https://fonts.googleapis.com/css?family=Open+Sans
    https://www.westminsterav.com/…-lite/assets/css/soliloquy.css?ver=2.3.7
    https://www.westminsterav.com/…-lite/themes/classic/style.css?ver=4.2.2
    https://www.westminsterav.com/…ize_0759713a7c498d142b2bb08fa00cb8d1.css
    https://fonts.googleapis.com/css?family=Open+Sans

    I am also now getting this notification as well:

    Prioritize visible content

    Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content.

    The entire HTML response was not sufficient to render the above-the-fold content. This usually indicates that additional resources, loaded after HTML parsing, were required to render above-the-fold content. Prioritize visible content that is needed for rendering above-the-fold by including it directly in the HTML response.Only about 26% of the final above-the-fold content could be rendered with the full HTML response (see screenshot).

    Any suggestions?

    Also in your post you mentioned “Preferably merge them in one file. This can be achieved by choosing one embed location for all. Be careful of dependencies. So jquery has to be on top.”

    I am not sure how to achieve this. Please help.

    Thank you so much!

    Ted

    Ramanan

    (@superpoincare)

    Hi Ted,

    I think your javascript is doing fine except I don’t know why your jquery is being minified twice.

    Check the files under “JS file management”. Do you see jquery twice?

    In the last column, you may choose “Embed before </body>” FOR ALL. (But test this by visiting your site and seeing if everything works fine.)

    Also under “JS minify settings”, choose “non-blocking using async at all the 3 places”.

    You should first solve JS as CSS is more complicated for optimizing.

    What options for CSS did you choose in Autoptimize? Did you just install and check one option for CSS or did you click “show advanced options” and select a few?

    Thread Starter klipklopp

    (@klipklopp)

    Ok… After a lot of trial and error and moving things around – I no longer have any JavaScript problems!

    For CSS I unchecked the Enable box in the Minify >> CSS area of W3 Total Cache. Then I installed Autoptimize and am only optimizing the CSS Code with this plugin.

    Optimize CSS Code – Checked
    Generate data: URLs for images? – Checked
    Look for styles only in <head>? Unchecked
    Inline and Defer CSS – Checked
    Inline all CSS – Unchecked
    Exclude CSS from Autoptimize – used default: admin-bar.min.css, dashicons.min.css

    For Inline and Defer CSS I read the FAQ and used the suggested tool Critical Path CSS Generator. I put in my website and pasted in my theme’s Style.css file. I let it create a critical path CSS for me which I then copied and pasted into the text box below Inline and Defer CSS.

    Here are the current errors:

    Your page has 5 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://fonts.googleapis.com/css?family=Open+Sans
    https://www.westminsterav.com/…-lite/assets/css/soliloquy.css?ver=2.3.7
    https://www.westminsterav.com/…-lite/themes/classic/style.css?ver=4.2.3
    https://www.westminsterav.com/…ize_0759713a7c498d142b2bb08fa00cb8d1.css
    https://fonts.googleapis.com/css?family=Open+Sans

    What’s next?

    Thanks!

    Ted

    Ramanan

    (@superpoincare)

    For Google fonts, I see you are using

    @import url(https://fonts.googleapis.com/css?family=Open+Sans)

    See if you can remove it. Instead use this: 

    <script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

    Also for JS,

    In W3 Total Cache, Minify tab, under JS file management, under embed location, choose the third option “embed before </body>”

    I don’t know how to handle this Soliloquy files. You can ask this in Autoptimize’s support. The author replies to all posts usually.

    I don’t know how to handle the “prioritize visible content”. It’s perhaps conneceted to Soliloquy.

    Ramanan

    (@superpoincare)

    “embed before </body>”

    for all JS files in the queue.

    Thread Starter klipklopp

    (@klipklopp)

    Hi,

    I changed the Google font code to your suggestion, but it didn’t help. Still getting the error.

    Thanks so much for your help! I really appreciate it!

    I’ll go to the support for Autoptimize and see what they suggest.

    Thanks again!

    Ted

    Ramanan

    (@superpoincare)

    My pleasure.

    I am suprised Google font code change didn’t work. I know it really improves the PageSpeed score as the fonts are loaded “asynchronously” and the css isn’t render-blocking. Maybe you can try the code after you’ve improved on other things.

    Anyway, all the best. These things are a lot of fun.

    Thread Starter klipklopp

    (@klipklopp)

    Hi,

    One quick follow up/update…

    I eliminated the Soliloquy plugin and switched to a different image slider plugin.

    I had to work with the minify settings again to get them working properly.

    I am now at the point where the only javascript getting flagged is:

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

    I don’t know what this does and I can’t seem to find any settings that will stop it from causing an error.

    Any suggestions?

    Thanks!

    Ted

    Ramanan

    (@superpoincare)

    Hi Ted,

    I think it’s jquery again.

    In the minify tab, first click help and wait for the popup to open. Then see what files are in queue in JS. Make sure the embed location is same for all.

    Also check “operation for areas” once you close the popup to see if you have selected the third option “embed before </body>” for every file.

    It’s clear your jquery is blocking and not non-blocking while other JS files seem fine and hence W3 Total Cache has two minified files: one on top and one in the footer.

    Also remember in the list of JS files, jquery has to be on top because other codes may need jquery.

    One thing I noticed is that your site is not requesting fonts from Google. Instead of Open Sans, the font rendered is the default font Arial.

    Ramanan

    (@superpoincare)

    Alternatively, you can delete all jquery from the list of files in “JS file management”. (there are two of them).

    I personally do that. jquery is already minified and I don’t combine it with other JS files. Google PageSpeed doesn’t mind.

    Thread Starter klipklopp

    (@klipklopp)

    In order to get my image slider plugin to work, I had to put https://www.westminsterav.com/wp-includes/js/jquery/jquery.js?ver=1.11.2
    in as “Embed in <head>” and I had to choose the Embed Type “Default (blocking)” for the head.

    I have tried moving this file to different embed locations and different spots in the order – but haven’t found anything that works. I currently have it second in order.

    Any ideas?

    Thanks!

    Ted

    Ramanan

    (@superpoincare)

    Oh I see.

    Your order should be:

    jquery.js?ver=1.11.2
    jquery-migrate.min.js?ver=1.2.1
    other1.js
    other2.js

    …

    Should work.

    The problem is that if WordPress changes the version in the next release, you have to change it manually.

    Best is to not have the two jquery files in the minify list at all. My site doesn’t use this option for jquery. You can do this by clicking the delete button in “JS file management”. [It of course doesn’t delete jquery, only removes it from the minify list. WordPress will automatically load it]

    By the way I don’t see Google fonts on your site now.

    Thread Starter klipklopp

    (@klipklopp)

    Ok… I deleted the top two jQuery files you listed from my list in JS file management, and now they are listed in the errors along with the previously mentioned file:

    https://www.westminsterav.com/wp-content/cache/minify/000000/7a5b6/default.include.c9ce83.js
    https://www.westminsterav.com/wp-includes/js/jquery/jquery.js?ver=1.11.2
    https://www.westminsterav.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1

    Suggestions?

    Thanks!

    Thread Starter klipklopp

    (@klipklopp)

    By the way – the first file doesn’t appear to be on my site – gives a file not found error…

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