Can/should Koko’s JavaScript be loaded with “defer”?

Resolved roam92
(@roam92)

3 years ago

Greetings,

I’m wondering if the small JS file that Koko Analytics adds to the HTML <head> can or should be loaded with “defer”?

/wp-content/plugins/koko-analytics/assets/dist/js/script.js

I see that it’s loaded with the “async” attribute by default. If “defer” is added (like by an optimization plugin), will Koko still work 100%? Any chance to break or miss pageviews?

Thanks!

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

Plugin Support Lap
(@lapzor)

3 years ago

I’m *guessing* that the only issue would be that some visits won’t be counted if someone quickly closes the page again before the koko script is fully loaded.

I will ask Danny to confirm this next week.

Hope that helps. If you have any questions, please let me know!

Thread Starter roam92
(@roam92)

3 years ago

Hey Lap, thanks so much for your fast response! Hopefully that is the case, and look forward to @dvankooten confirming next week… Appreciate it!

Plugin Author Danny van Kooten
(@dvankooten)

3 years ago

Hello @roam92,

You can safely load the script using the defer attribute. The plugin itself already uses the async attribute and then doesn’t execute until the page has fully loaded (using the window.load event), so you won’t miss out on any visits this way compared to the current situation.

We might also change the default in the plugin to use defer. I wasn’t aware of the difference, to be honest. 🙂

Thread Starter roam92
(@roam92)

3 years ago

Hey Danny, thanks so much for your helpful response!

Just like you, I wasn’t fully aware of the difference at first either.

That Koko has already been loading async is great, presuming HTTP/2. Moving to defer would be even better, I think.

In my site’s markup, Koko’s small script appears at the very top, the first .js on the page… So if deferred, it would be the first to execute once the page has fully loaded.

But most important to know is that it won’t affect the recording of visits either way. Thanks again!
Thread Starter roam92
(@roam92)

2 years, 11 months ago
Quick follow-up here.

In delving more into optimization for the other JavaScript code on my site, I learned that either tag will load the JS file asynchronously – but using async will interrupt the parsing to run the loaded JavaScript, whereas using defer will not.

With defer, the script will load in the background and then run when the DOM is fully built. So defer is definitely for better to use whenever possible.

The problem is that you cannot defer a script that has already been async’ed (like with Koko). If you try to specify both (like having an optimization plugin add defer), then the browser will always give async higher priority, thus negating the defer.

So all this is to say that for best optimization and page loading speed, it sounds like if the Koko plugin removed async and used defer instead, it would be a better outcome. 🙂

https://flaviocopes.com/javascript-async-defer/

https://javascript.info/script-async-defer

https://stackoverflow.com/questions/10808109/script-tag-async-defer

https://stackoverflow.com/questions/13821151/can-you-use-both-the-async-and-defer-attributes-on-a-html-script-tag

And the defer attribute enjoys very broad browser support:

https://caniuse.com/script-defer

Cheers.
- This reply was modified 2 years, 11 months ago by roam92.
- This reply was modified 2 years, 11 months ago by roam92.
Plugin Author Danny van Kooten
(@dvankooten)

2 years, 11 months ago
Hey @roam92,

Today I learned, MDN confirms your conclusion. I’ll change the default in Koko Analytics! Nice find!
- This reply was modified 2 years, 11 months ago by Danny van Kooten.
Thread Starter roam92
(@roam92)

2 years, 11 months ago

Awesome – thanks so much, @dvankooten !

I made the same request to Akismet, which also currently uses async…

There, users could also benefit from using defer instead, and it sounds like they will hopefully make this change to their plugin soon.

Improving the web!