perf: adding async to Analytics

[yuriassuncx]

PR Description

This Pull Request aims to make the analytics script asynchronous and add the async attribute to the corresponding <script> element in the Analytics component. These changes are intended to improve website performance by ensuring that the analytics script is loaded asynchronously, preventing rendering delays.

Motivation

The motivation behind these changes is to ensure that the analytics script is loaded asynchronously, allowing the page to continue rendering without significant delays caused by script loading. Additionally, making this script asynchronous can enhance the user experience, especially on pages with numerous scripts and resources.

Tests Conducted

Local tests have been conducted to verify that the analytics script is loaded asynchronously and that other scripts on the page are not affected by the async attribute.

Impact on PageSpeed

We have encountered a significant drop in PageSpeed on the Abracadabra website with the insertion of GTM (Google Tag Manager). Therefore, the primary goal of these changes is to mitigate this impact and reduce Total Blocking Time (TBT) to enhance the overall site performance.

[tlgimenes]

Why defer and not async?

[yuriassuncx]

Why defer and not async?

in fact, the real intention is to postpone the loading of this script as much as possible, so that it does not load the first time. Do you believe that asynchronous can be the best choice? if yes, we can do that.

[tlgimenes]

Why defer and not async?

in fact, the real intention is to postpone the loading of this script as much as possible, so that it does not load the first time. Do you believe that asynchronous can be the best choice? if yes, we can do that.

I think so. defer will hang the main thread and synchronously wait for this script to run before the load event. Async will allow the browser to do other things before and not hang the main thread

[yuriassuncx]

Why defer and not async?

in fact, the real intention is to postpone the loading of this script as much as possible, so that it does not load the first time. Do you believe that asynchronous can be the best choice? if yes, we can do that.

I think so. defer will hang the main thread and synchronously wait for this script to run before the load event. Async will allow the browser to do other things before and not hang the main thread

done!

[drawveloper]

cc @tlgimenes

[tlgimenes]

In between my reviews, we found a performance improvement by adding type="module". The whole idea is to allow the parser to parse the whole document before executing anything. This makes paint/reflows/layout to happen once, decreasing TBT. The differences between async/defer/type=module can be seen on the graph below

So I think it's kind of already working like the PR description intended to:

The motivation behind these changes is to ensure that the analytics script is loaded asynchronously, allowing the page to continue rendering without significant delays caused by script loading

I don't know, should we proceed with this PR? It feels like adding async would increase TBT and we are already deferring script execution afterwards