Migrating GTM to Partytown worsened Time to Interactive (TTI) of Core Web Vitals (CWV)
See original GitHub issueFramework: 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:
- Created a year ago
- Comments:5 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Do you think this is safe to close?
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?