GTags affecting TBTs

[Vignesh M]

Hi team,

We are working on optimizing TBT on our site, and when we are trying to debug those,  they are mostly from gtag scripts that block the main thread more than 50ms.

We have tried testing with web workers and they are causing cross origin issue, so we were not able to proceed further on them. 
Do you guys have any suggestions or workarounds for those?

Thanks,
Vignesh

[Vignesh M]

Team,

Any leads on this?

[Houssein Djirdeh]

How are you off-loading to a worker? With Partytown?

To overcome the cross-origin issue, you'll have to proxy the requests (see example docs in Partytown). You can see an example of how I did this with GTM in this Next.js repo (take a look at _document.js and vercel.json files to see how I've configured rewrites).

It's worth noting that when you eventually set up your tags to process in a worker, it's worth ensuring that each of the tags are working properly since not all scripts work fine when executed in a worker.

--
You received this message because you are subscribed to the Google Groups "web-vitals-feedback" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web-vitals-feed...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/39443129-e638-4095-a169-43a440812672n%40googlegroups.com.

[Abhishek Chaudhary]

I am also facing a similar issue i.e. High TBT values due to the GTM script.Can u please provide some insights how can I offload GTM scripts using react JS ??

[Matheus Dal'Pizzol]

Hi, folks! I believe I'm facing the same issue here and that A LOT of other developers out there are probably struggling with this to.

In my case, I have 3 Google scripts hugely affecting my pages performance score: Analytics (GTM), AdSense and GPT (Google Publisher Tag).

I've also decided to offload them to a WebWorker via Partytown.

GTM was the easy one. Simply following the steps at the Partytown docs did the trick.

AdSense and GPT, however, where 2 completely different beasts. For this to work, I had to setup a reverse proxy (which is the hard part and will depend on your tech stack).

The reason for this is outlined in the Partytown docs: the following scripts (and other scripts requested by them down the line) do not send an appropriate  "Access-Control-Allow-Orgin" header on the response, causing several CORS errors.

http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

https://securepubads.g.doubleclick.net/tag/js/gpt.js

So, to avoid the CORS problems, instead of requesting these scripts directly, I used the Partytown resolveUrl config to rewrite the URLs and send the requests to my webserver where I've setup the reverse proxy ending up with the following workflow:

1. Partytown rewrites the URL via the resolveUrl config from http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js to http://proxy.myserver.localhost/pagead/js/adsbygoogle.js

2. On my webserver, the proxy reverses the URL to the original one and then requests it.

3. The proxy gets the response and sets the Access-Control-Allow-Orgin header to *.

4. The server sends the response to the client with the appropriate header getting rid of the CORS errors.

Partytown config:



With this, I was able to get ad blocks from GPT to render properly and it seems to be working.

However, there's still one issue that I'm clueless as to what is causing it and what is its relevance. Not sure if I can ignore it (probably not):

I'm getting errors related to variables being undefined on the pubads_impl.js file.

My first guess would be that I still need to forward some function to the worker via the Partytown config, but I have no ideia what it would be.
The second one would be that maybe its due to the fact that I'm running this on my localhost and the script is simply lost and everything will be fine when I push this to production (but I wouldn't count on that).

Digging a little bit deeper, this errors seem to be related with the script trying to find script tags on the page, but since their running on the worker, they can't find it.

So, I'm a little lost as of where to go from here.

[Matheus Dal'Pizzol]

Hi, folks! So, I still digging deeper into this and I was able to get rid of "user is not defined error".

The problem seemed to be that I needed to forward some other domains in my proxy server. So, for now, I'm proxying domains and subdomains for these origins:

• g.doubleclick.net
• googlesyndication.com
• google.com

The only remaining errors on my console now is one related to AdSense (that I was already expecting and I know I can ignore) and the puads_impl.js one that I mentioned on my previews reply here and don't know what impact it might have.

I have a feeling that I might be able to ignore it, but totally based on wishful thinking...

Any feedback from the folks at Google or Partytown would be nice...

[Avinash Kumar]

Hi Matheus, 

I have tried the above solution provided by you using the Partytown script. I've also decided to offload the third-party scripts (gpt.js, gtm.js) to a WebWorker via Partytown. I was facing the same CORS issue.Now I'm not facing any error in console and all the third-party script runs perfectly using Partytown.js, But now I'm not able to fetch & render the ads.
Can you please help me to find out what's wrong here. Below are the screenshots of partytown script and the network call of gpt.js.






Thanks,
Avinash

[Eet]

RRye...@gmail.com 

[Eet]

On Tuesday, February 20, 2024 at 12:57:54 PM UTC+2 Avinash Kumar wrote:

My first guess would be that I still need to forward some function to the worker via thttps://groups.google.com/g/web-vitals-feedback/c/Aoise1rsc74/m/5pcY7VfJAgAJhe Partytown config, but I have no ideia what it would be.