WordPress.org

Ready to get started?Download WordPress

Forums

W3 Total Cache
How to eliminate render blocking Javascript and CSS above the fold (7 posts)

  1. jaimejay
    Member
    Posted 10 months ago #

    I was wondering if anyone could help...

    Can anyone assist with this? I went into my WP Total Cached and have my JS Minify settings at Minify and Non-blocking using "async" and the CSS Minify settings by ticking the Enable,
    Preserved comment removal (not applied when combine only is active), Line break removal (not applied when combine only is active), and didn't check Combine only.

    I went to https://developers.google.com/speed/pagespeed/insights/?url=slapshotstudio.com and entered my site:

    http://slapshotstudio.com and this is what I got back:

    Your page has 5 blocking script resources and 3 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://slapshotstudio.com/wp-content/cache/minify/000000/nY7RDcIwDEQXIlioA1XBuG0qJ06dGJXtMbQswN_p3tPZA6ybkb4uwxlCTrPGTtecyuUGhfY-UwlzZHYKVeVh2BvURbqgm2k8HciOmBrENe7QuiP85j9nJo2ZRpScrSR0Q8pv9UD0pNLHandObSH1M_450mQcqjGHzaT7jlITU_S0tk9_1G8.js

    http://slapshotstudio.com/wp-content/cache/minify/000000/BcGLCQAgCAXAiUQayeoRRoRpn_W7S_ysHL-gIbPqbGTSQPnoqHCWCOzgHizLMl3F-w.js

    http://slapshotstudio.com/wp-content/cache/minify/000000/jY5LDsIwDEQvhBt1xRk4AAcIjotMk7jYKZ_bk7YUsUAVkjdjz8xz61By8VigE02wd5wxjoHMXepcR9JnM12axHnXbpkNlYdi1XSmTMYGSjZINr4RWORA-t0Z6bEsa-AugpISKZLzZlTmwk4rjHJwPgQoAui1vN_4HViq4RQF-5FX0iyPh83kB_V1_geFIj3TSlrUlHsB.js

    http://slapshotstudio.com/wp-content/cache/minify/000000/BcEBCoBACATAF9XSk8T2okAFV7jvN3NhV3lFsJ0wiSN8wurKYd5w6zlW2xPM0Rlv_g.js

    http://slapshotstudio.com/wp-content/cache/minify/000000/M9Qvz89Pzs_NTS1KTtVPLC5OLSnWzwKiwtLUokrdgpzE5NSM_JyU1CKokB6SkF5uZh4A.js

    Optimize CSS Delivery of the following:

    http://slapshotstudio.com/wp-content/cache/minify/000000/ZY3BEsIgDER_qEzsyc9h0hCRmRSQhNb-vaj15HX3vd0ZMj8tcnYRRbgdUFsJnUyh3osVamjJnwysoxLWn-NPx4ekVfAAtUHTX91Y0Dj4tGJknWbYK_W2sRPMIeXo6sjd0pMEboCqPO5JFfBRF7cl3qcLDCTT--IQHhNUsiGZu5W2uiukTNIDf7UPoy8.css

    http://slapshotstudio.com/wp-content/cache/minify/000000/M9Qvz89Pzs_NTS1KTtVPLC5OLSnWTy4uRhYGAA.css

    http://slapshotstudio.com/wp-content/cache/minify/000000/dYxBDsJADAM_RBT1D_3IKqRVUGiWeIPE71ngwKk3azz2wrB7dyWEWHMyiQMsAGO8XC8L73ooDJSKPjt7Ttftqvk3solu5dTLnR4VQ8FTj0qZ6YYP_2GSyNPJ9w-86tbKxxs.css

    http://wordpress.org/plugins/w3-total-cache/

  2. Alex Schenker
    Member
    Posted 8 months ago #

    This thread helped me with the render-blocking JS issues: http://wordpress.org/support/topic/eliminate-external-render-blocking-javascript-and-css-in-above-the-fold-content?replies=23

    But the CSS I'm still having troubles with myself. At least the render-blocking removed the red warnings (only yellows left now).

  3. Nicole Boyd
    Member
    Posted 3 weeks ago #

    I'm having the same issue. I have no experience whatsoever in coding and editing and such. This is what I'm getting on my PageSpeedInsights:

    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your page has 5 blocking script resources and 4 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://flutterbyinspirations.com/…-includes/js/jquery/jquery.js?ver=1.11.0
    http://flutterbyinspirations.com/…s/jquery/jquery-migrate.min.js?ver=1.2.1
    http://flutterbyinspirations.com/…ns/jetpack/_inc/postmessage.js?ver=3.0.2
    http://flutterbyinspirations.com/…/jetpack/_inc/jquery.inview.js?ver=3.0.2
    http://flutterbyinspirations.com/…/_inc/jquery.jetpack-resize.js?ver=3.0.2
    Optimize CSS Delivery of the following:
    http://flutterbyinspirations.com/wp-content/plugins/pinterest/pin-it.css
    http://flutterbyinspirations.com/…etpack/modules/likes/style.css?ver=3.0.2
    http://flutterbyinspirations.com/…ubscriptions/subscriptions.css?ver=3.9.1
    http://flutterbyinspirations.com/…/theme/pub/minileven/style.css?ver=3.9.1

    I got to the page where it shows how to fix the code but like I said I have no experience in editing code.I can't find where to make the fixes inside the code for my theme, Sugar and Spice. It shows to do this to fix it:

    <html>
    <head>
    <script type="text/javascript" src="small.js"></script>
    </head>
    <body>
    <div>
    Hello, world!
    </div>
    </body>
    </html>
    And the resource small.js is like this:
    /* contents of a small JavaScript file */
    Then you can inline the script as follows:
    <html>
    <head>
    <script type="text/javascript">
    /* contents of a small JavaScript file */
    </script>
    </head>
    <body>
    <div>
    Hello, world!
    </div>
    </body>
    </html>

    I have no idea where to even begin. Any help would be greatly appreciated. Thanks
    Nicole

  4. Rob W
    Member
    Posted 3 weeks ago #

    Move your <script> entries to footer.php, before the closing </body> tag

  5. rachel613
    Member
    Posted 2 weeks ago #

    Hi- spent some time and found the solution to the problem of fixing the JS and CSS mentioned by Google:

  6. http://customizewp.com/eliminate-render-blocking-javascript-and-css-above-the-fold-content-in-wordpress-w3-total-cache/
  • Alex Schenker
    Member
    Posted 1 week ago #

    Nice, thanks for the tutorial!

  • shamwow
    Member
    Posted 1 week ago #

    Hi everyone, the above article was great but I am still seeing 2 render blocking CSS! It's driving me cra cra. I've tried everything, when I add them manually, I get an error message and for the other I get the message that there are duplicates or it's been added already. My site is http://www.therealestatepair.com

    Please help

    http://www.therealestatepair.com/wp-content/cache/minify/000000/2376c/home.include.c19bac.css

    http://fonts.googleapis.com/css?family=Lato:100,300,regular,700,900|Open+Sans:300|Indie+Flower:regular|Oswald:300,regular,700&subset=latin,latin-ext

  • Reply

    You must log in to post.

    About this Plugin

    About this Topic

    Tags