WordPress.org

Forums

Autoptimize
[resolved] defer loading of javascript (8 posts)

  1. Hamed.T
    Member
    Posted 1 year ago #

    hi,
    can you add some options to add scripts and css with defer loading?
    like:

    <script type="text/javascript">
    function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "myscript.js";
    document.body.appendChild(element);
    }
    if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
    </script>

    it's one of pagespeed recommendation!

    ** and please do NOT remove CDN options from your plugin it's why i use your plugin!

    thanks in advance

    http://wordpress.org/plugins/autoptimize/

  2. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks for your input Hamed.T, always refreshing to get these kind of tips (and good reviews)!

    Regarding deferring CSS & JS; for CSS this might cause "Flash Of Unstyled Content" which I presume most Autoptimize users would appreciate. JS is another issue; there "defer" might indeed make sense, but given that Autoptimize places the link to the aggregated script-file at the very bottom of the HTML, the gains will probably be minimal. Testing this is on my to-do list though, so it might indeed be added if it proves helpful.

    As far as CDN is concerned; I will make sure to provide some guidance on how to switch to alternate solutions when that functionality gets removed from Autoptimize.

  3. Hamed.T
    Member
    Posted 1 year ago #

    i'm sure using defer for scripts can be useful coz it's one of google pagespeed recommendation...
    i recently find a link when searching about defer and i think it's can be useful, the author say css and js file loaded after page loading if we use this script.. so here is the link
    also i'm sure you do your best :)
    thanks for respond

  4. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    A small update with regards to defer; defer on scripts that are at the end of the HTML (as Autoptimize's, by default) does not have any effect, cfr. this discussion on the HTML5 boilerplate development forum (hixie being Ian Hickson, the HTML5 spec lead).

  5. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    In 1.7.0 I ended up enabling this anyhow for aggregated javascript at the end of the HTML (so not if "force script in head" is set), as it does have a slight positive effect on the (mobile) pagespeed score :-)

  6. Hamed.T
    Member
    Posted 1 year ago #

    that's sound great thanks

  7. belg4mit
    Member
    Posted 1 year ago #

    A small update with regards to defer; defer on scripts that are at the end of the HTML (as Autoptimize's, by default) does not have any effect, cfr. this discussion on the HTML5 boilerplate development forum (hixie being Ian Hickson, the HTML5 spec lead).

    Would it be possible to break the defer attribute out into a separate option? I like the script in the footer, but with defer various page elements do not get rendered on first load. I'd have to exclude/noptimize many jQuery components in order to get it to work, but then I lose the advantage of having all the code bundled at the end.

  8. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    I'll probably not make this a separate option (trying to somewhat limit options, considering the impact on usability of having too many of those), but overriding "defer" for javascript at the bottom is something that would definitely be possible using a filter that would be part of a simple API I hope to have in 1.8 or 1.9.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Autoptimize
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic