Optimizing gtag.js Performance on Jekyll GitHub Pages | Generated by AI

Home 2025.06

Using gtag.js on a GitHub Pages site built with Jekyll presents some unique constraints, as GitHub Pages has limited server-side control and no direct access to caching headers or server-side scripting. However, you can still optimize the fetch speed of https://www.googletagmanager.com/gtag/js?id=UA-66656236-1 using client-side techniques and Jekyll-specific configurations. Below are targeted strategies to improve its performance in this context:

1. Load gtag.js Asynchronously

Ensure the gtag.js script is loaded asynchronously to avoid blocking page rendering. In your Jekyll site:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-66656236-1"></script>

<head>
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-66656236-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-66656236-1');
  </script>
</head>

2. Add Preconnect for Google’s Domain

Reduce DNS lookup and connection latency by adding a preconnect hint for googletagmanager.com. In your Jekyll layout (_layouts/default.html or _includes/head.html):

<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>

3. Lazy-Load gtag.js

Since GitHub Pages is static, you can lazy-load gtag.js to prioritize critical content. Add the following JavaScript to your Jekyll template or a separate JS file (e.g., assets/js/analytics.js):

window.addEventListener('load', () => {
  const script = document.createElement('script');
  script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-66656236-1';
  script.async = true;
  document.head.appendChild(script);
  script.onload = () => {
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-66656236-1');
  };
});

<script src="{{ '/assets/js/analytics.js' | relative_url }}"></script>

4. Use a CDN Proxy via Cloudflare

GitHub Pages doesn’t allow custom caching headers, but you can proxy gtag.js through a CDN like Cloudflare to cache it closer to your users:

  1. Set up Cloudflare:
    • Add your GitHub Pages site to Cloudflare (e.g., username.github.io).
    • Enable Cloudflare’s DNS and proxying for your domain.
  2. Proxy gtag.js:
    • Create a Page Rule in Cloudflare to cache the gtag.js script or host a local copy in your Jekyll site’s _site folder (e.g., assets/js/gtag.js).
    • Update your script tag:
<script async src="{{ '/assets/js/gtag.js' | relative_url }}"></script>
  1. Cache Settings:
    • In Cloudflare, set a cache rule for the script (e.g., Cache Everything with a TTL of 1 hour).

5. Optimize Jekyll Build and Delivery

Ensure your Jekyll site is optimized to minimize overall page load time, which indirectly helps gtag.js performance:

plugins:
  - jekyll-compress

plugins:
  - jekyll-assets

6. Switch to Minimal Analytics

If gtag.js remains slow or analytics isn’t critical:

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/plausible.js"></script>

7. Test and Monitor Performance

8. Limitations with GitHub Pages

Example Jekyll Setup

Here’s a sample _includes/analytics.html for your Jekyll site combining preconnect and async:

<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-66656236-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-66656236-1');
</script>

Include it in your layout (_layouts/default.html):

<head>
</head>

Next Steps

Would you like me to focus on any of these aspects or perform a specific analysis (e.g., test your site’s performance or provide a Cloudflare setup guide)?

Back Donate