Leverage new Scripts API strategy attribute to improve performance

[adamsilverstein]

Hello MonsterInsights Team!

I have been working on the WordPress core performance team helping research performance issues in by investigating blocking script usage that could leverage the new core Scripts API strategy feature.

While working on a query that uses httparchive data to see which scripts are most commonly “blocking” on WordPress sites (by "blocking" I mean in the head section and not marked as async or defer) the MonsterInsights frontend script (assets/js/[frontend-gtag.min.js) popped up as one of the top ten blocking scripts.

I am opening this ticket to ask that you will consider making this script non-blocking by adding either the defer or async attributes. (defer is usually preferable; use async if you want your script to execute as early as possible while still not blocking). Either one would provide performance benefits to your users - especially for slower device and bandwidth environments.

Switching on defer with WordPress 6.3+ is simple, add this one line of code after your enqueue:

wp_script_add_data( 'monsterinsights-frontend-script', 'strategy', 'defer' );

(or alternately async)

Even better would be an approach that also supported WordPress < 6.3 since I'm sure some of your users will be slow to upgrade. This gist provides a complete drop in code solution you can use; I'm also happy to provide a PR if that is helpful.

Starting by opening an issue to get your take on the suggestion - perhaps the plugin has some reason to have this be a blocking header script?

Please let me know what you think.

[ciprianimike]

Hello @adamsilverstein , thanks for your help, we will work on this and let you know.

[adamsilverstein]

👋🏼 Hey @ciprianimike,

Happy to contribute here with a PR and do some testing, however I think the repository is out of date. The last commit to this repository was from Dec, 2021 (Hi @chriscct7), perhaps a sync script has stopped working?

[ciprianimike]

Hey @adamsilverstein while we're looking into fixing that, I want you to know we're taking a look at this internally and will have one of our developers working on it, please reach out if they have any questions

[adamsilverstein]

Checking back to see if you have been able to take a look? Any luck getting the mirror syncing again?

I realize you may have some code you want to run early, you may be able to split the code up a bit though so only the critical parts are loaded from the header.

[adamsilverstein]

@ciprianimike I am also happy to contribute a PR here, once you get the mirror sync working so I know I am working against a current version of the plugin.

[adamsilverstein]

@ciprianimike ciprianimikeItwo proposed PRs that add async or defer - whichever works better for your case.

To add these in a way that supports older versions of WordPress, see this Gist: https://gist.github.com/adamsilverstein/ec18b67a72ff74dec12624e989e23142

[chriscct7]

Hi Adam,
The team is looking into it and we'll figure something out later in the upcoming quarter for this

[adamsilverstein]

Thanks, appreciate it! I'll make a note to check back in a while.

[adamsilverstein]

👋🏼 Hi MonsterInsights team - checking back here to see if you have a plan to get this repository syncing soon? I'll make a note to check back in again next year! ❤️

[adamsilverstein]

Hello! Checking back to see if you have any updates on this?