Use async instead of defer on 2nd script load

  • Resolved jakethesnake3p0

    (@jakethesnake3p0)


    3 years ago

    While debugging my page load times (FCP, etc.) I noticed that this plugin loads an external script just before </body> using the defer attribute. It’s rather pointless to use the defer attribute here as the entire DOM is already loaded before the parser even encounters the script. It only contributes to the delay before the DOMContentLoaded event fires (and when the loading symbol on the browser tab stops running).

    I don’t know the name of the script as I have a caching mechanism (W3 Total Cache) which obfuscates it; but it starts with var epdofitvids = epdofitvids ||.

    I believe switching this script tag to use async instead of defer would help in lowering my pagespeed score.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author embedplus

    (@embedplus)

    Hi there, the tricky thing about ‘async’ is that it pauses HTML parsing to execute its Javascript. You can run into intermittent issues with async if the Javascript needs a loaded DOM to function correctly, and especially if order of script execution against other scripts matter (by contrast, defer preserves order). Both considerations are indeed the case for our plugin’s scripts, given it deals with DOM objects like YouTube iframes, gallery elements etc. Async is typically good for things like Google Analytics that aren’t so related or dependent on DOM structure or script order.

    You can likely try things out with async on your own with W3 Total Cache, since it has a feature to force async on all your scripts. We don’t necessarily recommend that given the unpredictability of when async scripts actually execute, but it may or may not work for your site, depending on what other configurations you have. More info here: https://www.boldgrid.com/support/w3-total-cache/how-to-use-manual-minify-for-css-and-js/#js-minify-settings

    Plugin Author embedplus

    (@embedplus)

    On top of the above, you can consider Facade Mode if not already doing so.

    Thread Starter jakethesnake3p0

    (@jakethesnake3p0)

    At the time I posted this topic I had both facade mode and defer javascript checked in the settings. After thinking a bit about how W3 Total Cache specifies what it applies “defer” to, I decided to remove your defer javascript option and leave facade mode on. That seems to have fixed the issue.

    So for anyone who’s using W3 Total Cache with javascript found in </head> using defer and javascript found in </body> using async, turn off this extension’s “Defer Javascript” option as it seems to not work well with W3.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Use async instead of defer on 2nd script load’ is closed to new replies.