←

Google Analytics redundante: el mayor culpable de mobile perf

Contexto

El portfolio tenia PageSpeed mobile score de 80 con LCP de 4.5s (rojo) y FCP de 2.5s (naranja). Desktop era 99. La diferencia era dramatica.

Lo que aprendi

El diagnostico revelo que Google Analytics era el principal culpable:

  • Google Tag Manager: 150.3 KiB transferidos, 61.6 KiB de JS sin usar
  • Chunk propio: 69.4 KiB, 27.5 KiB sin usar (polyfills)
  • Total ahorro potencial: ~89 KiB de JS

El sitio ya tenia @vercel/analytics + @vercel/speed-insights que cubren:

  • Page views, visitantes, referrers, top pages
  • Core Web Vitals reales (LCP, CLS, INP, TTFB)
  • Sin cookies, sin consent banner, sin peso extra significativo

GA era 100% redundante.

El fix

// ANTES: 2 scripts de GA + Vercel Analytics
<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" strategy="afterInteractive" />
<Script id="gtag-init" strategy="afterInteractive">
  {`window.dataLayer=...`}
</Script>
<Analytics />
<SpeedInsights />

// DESPUES: solo Vercel (misma observabilidad, ~89 KiB menos)
<Analytics />
<SpeedInsights />

Resultado

MetricaAntesDespues
Mobile Performance80100
Desktop Performance99100
LCP4.5s (rojo)verde
FCP2.5s (naranja)verde

Leccion

Antes de optimizar CSS, fonts, o code splitting -- revisa si tienes scripts de terceros redundantes. Un solo <Script> de GA puede ser la diferencia entre 80 y 100 en mobile. strategy="afterInteractive" no lo hace gratis: sigue bloqueando el main thread despues de la hidratacion.

Preconnect como complemento

Al eliminar GA, el unico dominio externo es Vercel Analytics:

<head>
  <link rel="preconnect" href="https://va.vercel-scripts.com" />
</head>

Esto inicia el TCP handshake + TLS antes de que el browser necesite el script.

Referencia