Manage defer order/priority?

  • Resolved Motionous

    (@motionous)


    5 years, 7 months ago

    Hello,
    First of all, thanks a lot to the author(s) for the amazing Async Javascript & Autoptimize plugins, plus the consistent related information nicely provided online. What a great contribution to the WP community!

    I’m currently using Async Javascript along with Autoptimize, and wondering if autoptimize_xxx…xxx.js (which is defered using Async js options) could load before 2 external js files which don’t seem essential for what concerns the page content visibility. Or (to put it another way) if those 2 external js files could load after.

    – XXXXXXX.js (“XXXXXXX” replaces our Hubspot id number)
    <script type="text/javascript" id="hs-script-loader" defer='defer' src="//js.hs-scripts.com/XXXXXXX.js"></script>
    is called near the end of <body> with attribute defer=’defer’.
    has been implemented with some code in the child theme’s function.php.

    – api.js
    <script type='text/javascript' defer='defer' src='https://www.google.com/recaptcha/api.js?hl=fr_FR&onload=recaptchaCallback&render=explicit&ver=2.0'>
    is called near the end of <body> with attribute defer=’defer’.
    has been implemented with the plugin “Contact Form 7 – reCaptcha v2”.

    – there’s also webfont.js and lazysizes.min.js which load before autoptimize_xxx…xxx.js, but I guess this is just fine and Autoptimize knows when those should be loaded.

    Hope that makes sense! ??

    Here’s additional info if it helps:

    —

    Async Javascript settings:

    Async JavaScript Method: Defer
    jQuery Method: Exclude
    Enable Autoptimize Support: Checked (jQuery Method: Defer)

    Some Autoptimize settings:

    Used JavaScript Options:
    Optimize JavaScript Code?
    Aggregate JS-files?
    Also aggregate inline JS?
    Add try-catch wrapping?
    Exclude: wp-includes/js/dist/,wp-includes/js/tinymce/,

    Used CSS Options:
    Optimize CSS Code?
    Aggregate CSS-files?
    Also aggregate inline CSS?
    Inline all CSS?
    Exclude : wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css

    Used HTML Options:
    Optimize HTML Code?

    Used Misc Options:
    Save aggregated script/css as static files?
    Minify excluded CSS and JS files?

    —

    What is your opinion? Any advice?
    Thanks in advance,
    Best,

    • This topic was modified 5 years, 7 months ago by Motionous.

    The page I need help with: [log in to see the link]

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

    (@optimizingmatters)

    maybe not very straightforward, but you could either;

    * add some tag (example below <injectjs />) to your (child) theme’s footer and then change the location of where the AO’ed JS is inserted by using code like this;

    add_filter('autoptimize_filter_js_replacetag','mind_js_replacetag',10,1);
function mind_js_replacetag($replacetag) {
    return array("<injectjs />","replace");
    }

    * or you could use the autoptimize_html_after_minify filter to add the 2 JS-files before the closing body tag, something like this (warning; untested);

    
add_filter('autoptimize_html_after_minify', 'inject_otherjs');
function inject_otherjs($htmlIn) {
    $to_be_injectedJS = "<your JS here>";
    return str_replace( '</body>', $to_be_injectedJS.'</body>' , $htmlIn );
}

    hope this helps,
    frank

    Thread Starter Motionous

    (@motionous)

    Solution n°1 worked like a charm! ??
    Many thanks @optimizingmatters !

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    you’re welcome ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Manage defer order/priority?’ is closed to new replies.