[Resolved] Add data-cfasync=”false” to GP .js files

[Randy]

Hello,
I’m trying to get Ezoic Leap script delay to NOT delay some scripts. Their tool supports the use of adding data-cfasync=”false” to where the scripts get enqueued, so I have done that successfully with my own javascript files.
Now I’d like to add data-cfasync=”false” to /wp-content/themes/generatepress/assets/js/main.min.js and /wp-content/plugins/gp-premium/menu-plus/functions/js/offside.min.js
How would I do that please?
And are there any other GP Premium and GB Premium .js files that I should also be aware of?
Thank you!

[David]

Hi there,

not sure if this is 100% related but it looks like Ezoic has an exclusion option in their settings :

https://support.ezoic.com/kb/article/script-delay

[Randy]

Correct, they do, but it only seems to work on exact file names (e.g. /wp-content/themes/generatepress/assets/js/main.min.js?ver=3.0.3 ) so when a new version 3.0.4 gets released, the exclusion no longer works.

But they also have an option for “Do NOT delay scripts marked with no-defer parameters”. That help states “Do NOT delay scripts marked with no-defer parameters. Do NOT delay scripts marked with no-defer parameters such as ‘data-cfasync’ and ‘data-pagespeed-no-defer.'”

I was able to get the data-cfasync to work on my OWN scripts, but I need to see if I can add that data-cfasync attribute to the various JS files from GP / GB

By the way, the way I’m adding the data-cfasync to my own scripts is here:

add_filter('script_loader_tag', function($tag, $handle) {
	// add async to all script handles starting with js-rlm...choose whatever name you like
	if (strpos($handle, "js-rlm") === 0) {
		if (false === stripos($tag, 'async')) {
	//data-cfasync=false prevents ezoic script delay from delaying these scripts
            $tag = str_replace(' src', ' async data-cfasync="false" src', $tag);
		}
	}
	return $tag;
}, 10, 3);

[Randy]

UPDATE:
On further exploration of this in ezoic’s Script Delay Exclusion Rules settings, it appears I can simply put the filename and NOT include the path nor the ver= parameters and it will exclude the scripts.
So to get all of the GP GB scripts to NOT get delayed, I added this in ezoic Leap’s Script Delay Exclusion Rules:
/main.min.js
/offside.min.js
var offSide = {“side”:”right”};
var generatepressMenu = {“toggleOpenedSubMenus”:”1″,”openSubMenuLabel”:”Open Sub-Menu”,”closeSubMenuLabel”:”Close Sub-Menu”};

That seems to successfully prevent ezoic from delaying the above!

Just let me know if there are any other GP / GB scripts that I should also remove from script delay please?

[David]

Thats good to hear.

GB doesn’t load any Javascripts.
For GP they are loaded dynamically so it depends what options you have enabled on the site:

Off Canvas Panel ( you have ): offside.min.js
Mobile menu drop downs: menu.min.js
Blog column masonry: masonry.min.js
Sticky Navigation: sticky.min.js

Theres some others such as the back to top – but only the above would generally be affected on first load.

[Randy]

Thank you for that David!
QUICK RELATED QUESTION:
I have add_action(‘wp_enqueue_scripts’ with priority 999 in my child functions.php file.

However I notice when looking in Network Panel in Chrome that my custom js scripts load before the main.min.js and offside.min.js

Is this the correct loading order, or should I somehow get my customer js files to fire after the main GP GB file? And how would I do that?

(Screenshot in private info box)

[David]

Are you registering your scripts first ?
See this example:

https://stackoverflow.com/a/19914138

[Randy]

Hi David,
No I’m not registering the scripts first. Based on this ( https://developer.wordpress.org/reference/functions/wp_register_script/ ) it says “Registering scripts is technically not necessary, but highly recommended nonetheless. So, the main purpose of the register functions is to allow you to simplify your code by removing the need to duplicate code if you enqueue the same script or style in more than one section of code.”

The only place I enqueue the scripts is within this action…so I don’t have the duplicate code issue:
add_action(‘wp_enqueue_scripts’, function() {
},999);

So my open question is whether the GP GP scripts such as main.min.js and offside.min.js should be firing BEFORE or AFTER my custom .js files. Right now my custom files are firing BEFORE based on the Chrome Network panel. I’m not sure if it matters or not since my custom .js files wait until DOMContentLoaded to run…but I guess I would think that the GB GP scripts SHOULD fire first just in case there is a dependency or something.

Is what you are saying is that setting that $in_footer parameter in wp_register_script to true will then make my custom scripts fire after the GB GP scripts. Is that what you are suggesting is the proper approach?

EDIT: Actually, wp_enqueue_scripts also has an $in_footer parameter….so I just tested setting that to true and it makes my custom scripts fire right AFTER the GB GP scripts. This “feels” like the best approach to me…can you confirm that’s the best firing order (and ok to skip using wp_register_script)? screenshot in private info

[David]

GP doesn’t know your scripts exist, and has no dependencies aside of when a jQuery function is required. It definitely won’t be dependent on your scripts.
Likewise it doesn’t sound like your scripts have dependencies so load order doesn’t matter.
Moving them to footer in your case sounds like the logical move.

Registering the scripts is just good practice and may have resolved the hook priority. But its not required.

[Randy]

Thanks David

[David]

You’re welcome

[Author]

Posts