Eliminate Render-Blocking JavaScript and CSS, Files Still Showing

  • I identified via Google Page Speed test which CSS and JS files were blocking page load rendering. So I added those file URLs to W3 Total Cache under the Minify section, cleared all the page cache in W3, deleted my browser cache and did hard refresh, and when I re-run Google Page Speed it still says those files are blocking page rendering.

    How do we fix this? I’ve seen others with same comment but haven’t seen a resolution yet.

    Thanks,
    Toby

    https://www.ads-software.com/plugins/w3-total-cache/

Viewing 1 replies (of 1 total)

  • If you’re using W3TC for your CSS, it will render as blocking no matter what as it has no options to inline critical, ‘above-the-fold’ styling. For that, you will want to use Autoptimize, making use of the “Inline and Defer CSS” option.

    To render your combined JavaScript file(s) as non-blocking with W3TC:
    Performance –> Minify –> JS –> JS minify settings: –> Operations in areas: –> Embed type: (from the drop down menu) –>
    Your choices are:
    1.) Non-blocking using JS
    2.) Non-blocking using “async”
    3.) Non-blocking using “defer”
    4.) Non-blocking using “extsrc”
    5.) Non-blocking using “asyncsrc”

    Autoptimize can be used for your JS as well (all minification, in fact), but it isn’t as delicate an instrument as is W3TC. That said, a hammer is often the most appropriate tool for the job.

    Best,
    AJ

Viewing 1 replies (of 1 total)
  • The topic ‘Eliminate Render-Blocking JavaScript and CSS, Files Still Showing’ is closed to new replies.