question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Migrating GTM to Partytown worsened Time to Interactive (TTI) of Core Web Vitals (CWV)

See original GitHub issue

Framework: Next.js (v12.1.0)

My company decided to try out partytown; we decided to check what is going to happen on a small marketing page (Next SSR hidden behind a CDN). On the page we have GTM that currently has Google Analytics and Facebook Pixel activated. We migrated it in the following way:

// _app.tsx
...
{gtmId && (
  <>
    <Partytown
        forward={['dataLayer.push', 'fbq']}
        // Proxy hits the API route: /api/partytown?source=<source> 
        resolveUrl={(url, location) => {
        if (
          'connect.facebook.net' === url.hostname ||
          ('www.google-analytics.com' === url.hostname && url.href.endsWith('.js'))
        ) {
          const proxyUrl = new URL(`/api/partytown`, location.origin);
          proxyUrl.searchParams.append('source', url.href);
          return proxyUrl;
        }
        
        return url;
        }}
    />
    
    {/* eslint-disable-next-line @next/next/no-sync-scripts */}
    <script type="text/partytown" src={`https://www.googletagmanager.com/gtag/js?id=${gtmId}`} />
    <script
        type="text/partytown"
        dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${gtmId}', {
            page_path: window.location.pathname,
          });
        `,
        }}
    />
  </>
)}
</Head>

{gtmId && (
<noscript>
	<iframe
		title="gtm"
		src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
		height="0"
		width="0"
		style={{ display: 'none', visibility: 'hidden' }}
	></iframe>
</noscript>
...
)}

Logs look fine & everything works as expected.

But i was puzzled by the lighthouse audits:

FCP Speed index LCP TTI Total Blocking time CLS
Pure GTM 0.9s 0.9s 2.0s 4.0s 120ms 0
Partytown 1.0s 3.7s 2.3s 13.5s 170ms 0

Every metric got a bit worse, but TTI is critical. Anyone has any idea what is going on?

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
adamdbradleycommented, Apr 4, 2022

Do you think this is safe to close?

0reactions
filipjakovcommented, Mar 24, 2022

Thanks for the links. I wonder if it has to do with the QA server https://feat-partytown-default-web-components.staging.stats.superbet.com response times.

Not sure that the server response could affect TTI in the magnitude of 300%-400% (but not the other metrics)?

Also, this is very interesting. Previously I posted the metrics from running lighthouse in the Chrome console, and the metrics still stand: image

But the pagespeed shows a different number! Also check Webpage test: https://www.webpagetest.org/result/220324_BiDc3R_626/2/details/ <- everything seems to be in order here as well

Seems like there is an error/bug in the Chrome console Lighthouse?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Time To Interactive Examples & Best Practices - WebPageTest
Understand Time to Interactive (TTI) by following examples and learn how to measure and improve it.
Read more >
how to track Core Web Vitals with Google Tag Manager
In this advanced guide I'll explain you the easiest way to track Core Web Vitals, i.e. the metrics that are the new ranking...
Read more >
How to measure Core Web Vitals metrics with GA & GTM - Hume
Web Vitals are the new speed metrics on the block. Read here how you can measure them right in your Analytics.
Read more >
How do I diminish "Time to interactive" core metric effect with ...
I have tested the first 3 in timers moving them to later in load order temporarily and the effect on the TTI was...
Read more >
How we measure our Core Web Vitals — GTM(Google Tag ...
How we measure our Core Web Vitals — GTM(Google Tag Manager). I've written about the basics of setting up GTM before here, but...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found