Combining Javascript files breaks script loading order in Jetpack

  • Mikael Korpela

    (@simison)


    1 year, 8 months ago

    Hi! We have a compatibility issue with popular Jetpack plugin and Site Optimizer’s “Combine JavaScript files” functionality. Jetpack’s functionality breaks due to how Combine manages script dependencies before combining files.

    In Jetpack, there’s a Newsletters subscription block which you can enable by:

    • Install Jetpack
    • Activate Jetpack, connect your user with WP.com account
    • Go to Jetpack -> Settings -> Newsletter and enable “Add subscribe block at the end of each post”. You can also manually add block in block editor.

    Now enable “Combine JavaScript Files” from Speed optimizer:

    As a logged out user (e.g. in incognito window), see a post with subscription block. Normally when you subscribe, a loading spinner and popup opens (working as expected). With combine javascript active, page just sends you to subscription management site at WP.com (broken experience).

    In the source code, functioning site had these scripts in following order:

    • wp-includes/js/dist/vendor/wp-polyfill.js
    • const Jetpack_Block_Assets_Base_Url
    • wp-includes/js/dist/dom-ready.min.js
    • wp-content/plugins/jetpack/_inc/blocks/subscriptions/view.js?minify=false&ver=13.9-a.5

    Non functioning site with “javascript combined” enabled has:

    • wp-includes/js/dist/vendor/wp-polyfill.min.js
    • wp-content/plugins/jetpack/_inc/blocks/subscriptions/view.js?minify=false&ver=13.9-a.5
    • wp-content/uploads/siteground-optimizer-assets/siteground-optimizer-combined-js-37d52d08d6f7f3b05647602cb89bfa4a.js

    The dom-ready and Jetpack_Block_Assets_Base_Url ended up in the combined JS. wp-polyfill isn’t combined because in the plugin it’s whitelisted from being combined.

    There are at least two bugs here:

    • Since subscriptions/view.js depends on dom-ready and Jetpack_Block_Assets_Base_Url, Combiner should not break their load order by moving dom-ready into combined file below the view.js.
    • Combined should not skip combining the file in first place even if it has minify=false in the URL. If I remove the minify=false, combined promptly combines the file normally.

    Potential fixes:

    • Maintain script loading order at all cost, even if files are skipped from being combined.
    • Combine file even if it includes ?minify=false bit in the URL.
    • Whitelist wp-dom-ready from being combined like some other core libraries are whitelisted currently; this doesn’t actually fix the root issue, but does solve this specific case. Doesn’t help to optimize the site either so not really in the spirit of the plugin’s purpose.

    We have a more technically detailed report of the issue here.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Mikael Korpela

    (@simison)

    1 year, 8 months ago

    Meanwhile, our customers can fix the issue at their site by disabling Javascript combiner from Site Optimizer but that’s not great for their site’s performance.

    They can also use following PHP script to stop combining the affected files, but this is technically complicated to some customers and not something they should need to do anyway:

    function jetpack_sgo_javascript_combine_exclude( $exclude_list ) {
    	$exclude_list[] = 'wp-dom-ready';
    	$exclude_list[] = 'jetpack-block-subscriptions';
    	return $exclude_list;
    }
    add_filter( 'sgo_javascript_combine_exclude', 'jetpack_sgo_javascript_combine_exclude' );

    function jetpack_sgo_javascript_combine_excluded_inline_content( $excluded_inline_content ) {
    	$excluded_inline_content[] = 'Jetpack_Block_Assets_Base_Url';
    	return $excluded_inline_content;
    }
    add_filter( 'sgo_javascript_combine_excluded_inline_content', 'jetpack_sgo_javascript_combine_excluded_inline_content' );
    Plugin Support daniellaivanova

    (@daniellaivanova)

    1 year, 8 months ago

    Hello @simison,

    Thank you for your detailed feedback!

    The problem has been reported to the plugin developers so they can review it. While we cannot specify if this issue will be addressed or provide an estimated timeline for a potential fix, we suggest you follow the plugin’s changelog for updates.

    We appreciate your understanding and patience as the developers work to improve the plugin.

    Best Regards,
    Daniela Ivanova

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Combining Javascript files breaks script loading order in Jetpack’ is closed to new replies.