POC: Playing around with defer / sync WP strategies

[GP-Dan-Tovbein]

Taken from here.

Demo page: https://www-dev.greenpeace.org/test-sinope/get-informed/

Description

As a part of an experiment, I've tested the functionality of defer/sync WordPress strategies by registering scripts.

According to the official Mozilla documentation:

Deferred scripts

Scripts marked for deferred execution — via the defer script attribute — are only executed once the DOM tree has fully loaded (but before the DOMContentLoaded and window load events). Deferred scripts are executed in the same order they were printed/added in the DOM, unlike asynchronous scripts.

Asynchronous scripts

Scripts marked for asynchronous execution — via the async script attribute — are executed as soon as they are loaded by the browser. Asynchronous scripts do not have a guaranteed execution order, as script B (although added to the DOM after script A) may execute first given that it may complete loading prior to script A. Such scripts may execute either before the DOM has been fully constructed or after the DOMContentLoaded event.

Potential ideas for solutions

• Improve Largest Contentful Paint (LCP) performance
  
• Take a decision of how/what is the best way of including JS script.

Testing

• Change browser throttling to Regular 2G, also test with Wi-Fi
• Disable cache
• If you clean cache and reload the page you'll see that the async element is not working always as expected

Conclusion

Of course defer is the best approach for loading JS scripts since we're ensure that we're able to interact with added into a DOM since it's been fully loaded. However, for scripts that are independent of other scripts, such as tracking scripts, async is the best approach

[planet-4]

Test instance is ready 🚀

🌑 sinope | admin | blocks report | CircleCI | composer-local.json

⌚ 2024.05.08 12:09:48