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

Home PDF

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:

- **Why it helps**: `async` ensures the script doesn’t block HTML parsing, reducing perceived load time.

---

### 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`):
```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');
  };
});

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"></script>
    • Sync the local copy with Google’s gtag.js periodically to ensure it’s up-to-date (manual process or via a CI/CD script).
  3. Cache Settings:
    • In Cloudflare, set a cache rule for the script (e.g., Cache Everything with a TTL of 1 hour). - Why it helps: Cloudflare’s edge servers reduce latency by serving the script from a location closer to your users. - Note: Be cautious with proxying Google’s scripts, as they may update frequently. Test thoroughly to ensure tracking works.

5. Optimize Jekyll Build and Delivery

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

6. Switch to Minimal Analytics

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

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 2025.06.28 Donate