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

filipjakov commented 2 years ago

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?

adamdbradley commented 2 years ago

That is interesting and haven't seen that before. Is there somewhere we can see this?

filipjakov commented 2 years ago

Here are the links:

Production build with the classic GTM approach: https://sportening.com/i/f3fea8f8
Staging build with the PartyTown approach: https://feat-partytown-default-web-components.staging.stats.superbet.com/i/f3fea8f8

adamdbradley commented 2 years ago

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.

When I run each of these through Page Speed Insights, it the QA server gets a "Reduce initial server response time" error, while the production one doesn't. So I wonder if that's what may be contributing to the numbers being off.

filipjakov commented 2 years ago

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:

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?

adamdbradley commented 2 years ago

Do you think this is safe to close?

BuilderIO / partytown

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