Optimizing Performance: Integrating Partytown with Google Tag Manager in Astro

The Performance Bottleneck

Third-party scripts like Google Tag Manager (GTM) are notorious for slowing down the initial page load. When scripts execute on the main thread, they compete for resources, often delaying vital tasks like hydration or interactivity. In the rifasvelez-web project, we wanted to ensure our tracking didn't come at the cost of user experience.

The Solution: Offloading with Partytown

Partytown allows you to offload resource-intensive third-party scripts to a web worker. By moving execution off the main thread, we keep the browser responsive for our core Astro application code.

Implementation Steps

To integrate Partytown with GTM in an Astro environment, follow these steps:

1. Install the Integration

Add the official Astro Partytown integration to your project:

npx astro add partytown

2. Configure the Integration

Ensure your astro.config.mjs is set up to manage the forward property for GTM:

import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';

export default defineConfig({
  integrations: [partytown({ config: { forward: ['dataLayer.push'] } })]
});

This configuration ensures that any calls to dataLayer.push are correctly proxied through the web worker instead of causing main thread blocking.

3. Load the Script

Update your base layout to load the tracking script with the type="text/partytown" attribute:

<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-EXAMPLE"></script>
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-EXAMPLE');
</script>

Results

By moving GTM to a web worker, we effectively removed it from the main thread execution path. This leads to a smoother Time to Interactive (TTI) and better overall performance metrics while maintaining full visibility into our analytics data.

Next Steps

For projects with complex marketing stacks, consider monitoring the execution time of scripts inside the worker to ensure you aren't overwhelming the browser's worker threads.

Generated with Gitvlg.com