Support » Plugin: W3 Total Cache » Diferrence between defer and non blocking using js

  • Resolved honoluluman

    (@honoluluman)


    Hello πŸ™‚

    I am trying to optimize my js scripts a bit, so i have set combine only for them.
    I decided to use in the Before </head> section default blocking and in the After <body> section non blocking using js. What is the difference between defer and non blocking using js? What could be less dangerous for dependent scripts? I noticed that i get some console errors on chrome but the site seems to function properly. Still though i am not so sure on that.

    Also i am going to use AdSense Integration WP QUADS + AdSense Integration WP QUADS PRO for adding Google Ads on my site. Is there some specific setting that i should know related to W3TC and this plugin so that i could avoid conflicts.

    I am using page cache enhanced , minification (CSS-combine+minify / JS-combine), browser cache.

    Thank you for your time and your great support W3TC team

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Marko Vasiljevic

    (@vmarko)

    Hello @honoluluman

    Thank you for your inquiry and I am happy to assist you with this.
    Non-blocking using JS is similar to async. Async will allow the page to continue rendering while the JavaScript is downloaded, and the script will be executed as soon as it has finished loading. This is the fastest way to load your scripts. However, it might result in errors similar to jQuery is not defined. That’s because if a small script depends on jQuery (or another library), it may load faster than the library and execute immediately.

    Defer will allow your page to continue rendering, but wait until the entire document has been loaded to begin execution. It also executes the scripts in the order in which they were called. This can help you avoid dependency issues if you take care to load libraries before their dependents, but does come at a small performance cost, and it can contribute to Cumulative Layout Shift if your scripts affect the layout of your document.
    No, if you can live with the console errors and if the website is working as expected, you should leave it as is. Choosing the embed method is entirely up to you.
    ALternatively, you can detect which js files are complaining and exclude those files from being minified in Performance>Minify>Advanced>”Never Minify following JS files”, or you can use a more detailed approach and enable Manual minify, which requires adding the files to minify manually and in proper order.
    AS for your other question, the mentioned plugin does support caching and there are no know issues when it comes to compatibility so you should be good to go.
    THanks!

    Thread Starter honoluluman

    (@honoluluman)

    Hello @vmarko and thank you very much for your explanation πŸ™‚

    After some tests i did i found many errors with the setup that i’ve mentioned above and desided to do like that:
    -excluded jQuery library from minifying (set by defaul in the head)
    -set all the rest from head and body as deferred.
    -exluded from minifying some js that already had the async attribute.

    (Always in combine method only)

    I think that now the system is more steady, since i don’t want to go to Manual minification.

    But unfortuanatelly i run into an other problem related to HTML minification.The problem is simular to this ->

    https://wordpress.org/support/topic/html-minify-remove-quotes/
    https://wordpress.org/support/topic/html-minify-removes-double-quotes-from-html/
    and this https://wordpress.org/support/topic/w3-made-all-amp-pages-invalid/
    https://github.com/W3EDGE/w3-total-cache/issues/96
    because i am using easy social share buttons plugin and featured images are not being displayed in Viber.

    I really don’t want to disable this great feature of HTML minification. I have tried some testing with stopping js or css inline minification but didnt work.

    Any ideas on, that i could use in HTML.php?

    Thank you for your time.

    Plugin Support Marko Vasiljevic

    (@vmarko)

    Hello @honoluluman

    Thank you for the info.
    The mentioned HTML problem was fixed in October. See the github commit.
    So this is unfortunately a case-to-case issue. You can try by changing back the code as you can see in the link provided.
    Thanks!

    Thread Starter honoluluman

    (@honoluluman)

    hello @vmarko thank you for your help.

    Changing back the code worked fine for me. So that is solved.

    I would like to ask another issue that you could help me with.
    Along with W3TC i am using flying pages plugin and it gives me an error that i am suspecting that may have to do with my browser cache settings.

    My settings are here. (i am using these settings because i have the common issue with validating the users cache when he is logged in. New elements are shown when logged in.) I really hope that i have set them correctly because i would like to set lifetime for CSS & JS , and for MEDIA, but to be careful with HTML as i saw from other discussions.

    Along with this conversation, i also couldn’t found any no-store in my .htacces but i have been thinking that maybe i sould change the police that i am using for HTML? Could you give me any idea?

    Thank you very much for your time

    Thread Starter honoluluman

    (@honoluluman)

    hello @vmarko

    Unfortunately i realised that the HTML minification previous version code didn’t actually worked for the preview thumbnails on Viber environment. When i replaced the code accidently i have set after the line (old 353) a } that was giving the preview thumbnail on Viber environment and i thought that i’ve fixed it, but the minification of all js and css was not functioning at all πŸ™ . After i corrected it removing the } i dont get preview thumbnail.

    i have tried several tests but with no luck. Any help on that if possible please?

    Thread Starter honoluluman

    (@honoluluman)

    hello @vmarko ,

    After some testing that i did with the HTML minification file of W3TC i realized what has been breaking og:image meta from displaying properly on Viber app.

    It was this line ->

    // use newlines before 1st attribute in open tags (to limit line lengths)
    		$this->_html = preg_replace('/(<[a-z\\-]+)\\s+([^>]+>)/i', "$1\n$2", $this->_html);

    Just reporting this to you.

    Thank you for your time.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.