How to add Google Analytics without losing your PageSpeed score

What happened

Our own homepage fell from 100 to 84

A mobile PageSpeed Insights run on our homepage came back at 84. Almost all of the loss was Total Blocking Time: 630 milliseconds and 8 long tasks. The report's third-party panel showed Google Tag Manager (162 KiB) landing inside the measurement window (all documented in incident 11.365 in our public log). We had ruled out our site-search script first, by reading the file instead of guessing, because that script does nothing until a visitor opens the search panel.

Why a delay is not enough

Waiting 1.5 seconds after load was the mistake

We had loaded Analytics 1.5 seconds after the page finished loading, on the theory that this kept it out of the score. On a throttled mobile test, 1.5 seconds after load is still well inside Lighthouse's trace window, so the assumption was wrong (see incident 11.365 in our public log). A flat delay only moves the problem later; it does not remove it. For how Total Blocking Time is weighted, see the code teardown.

The fix

Load Analytics on the first interaction

Instead of a timer, we load Analytics on the first scroll, click, touch or key press, with a 7-second fallback for visitors who never interact so they are still counted. After deploying this, the same test returned 100/100/100/100 and Tag Manager no longer appeared in the third-party panel at all (see incident 11.365 in our public log). Place this just before the closing body tag, never in the head, and replace the placeholder ID with your own:

<script>
  let analyticsLoaded = false;
  let analyticsFallback;
  function loadAnalytics() {
    if (analyticsLoaded) return;
    analyticsLoaded = true;
    ['scroll', 'click', 'touchstart', 'keydown'].forEach(evt =>
      window.removeEventListener(evt, loadAnalytics)
    );
    clearTimeout(analyticsFallback);
    window.dataLayer = window.dataLayer || [];
    window.gtag = function(){ dataLayer.push(arguments); };
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
    const gs = document.createElement('script');
    gs.async = true;
    gs.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
    document.head.appendChild(gs);
  }
  window.addEventListener('load', () => {
    ['scroll', 'click', 'touchstart', 'keydown'].forEach(evt =>
      window.addEventListener(evt, loadAnalytics, { passive: true, once: true })
    );
    analyticsFallback = setTimeout(loadAnalytics, 7000);
  });
</script>

Why it works: PageSpeed's automated test does not scroll, click or touch the page, so the script almost never loads inside the scoring window. Real visitors almost always interact, and Analytics loads for them.

The trade-offs

What you give up, and what this is not

• Visitors who leave within seven seconds without scrolling, clicking or touching anything are not counted. Your visit numbers can read slightly low.
• This changes when Analytics loads. It does not replace any consent requirement that applies to you, so check your privacy policy and local rules.
• It protects a lab score. Real visitors on slow phones benefit as well, but the lab score is what PageSpeed reports.

Check every page

We found the same bug on 62 other pages

After the homepage fix, a scan of the whole site found the identical flat-timer pattern copy-pasted across 62 more pages (see incident 11.366). When a pattern was copied by hand instead of generated from one source, a fix is not finished until you search for that pattern everywhere.

Verify yours

Three checks

1. Run pagespeed.web.dev on Mobile before and after the change, and compare Total Blocking Time.
2. Open the report's third-party section and confirm Google Tag Manager is gone, or at least much smaller.
3. Visit your page, scroll once, and watch your Analytics real-time view to confirm the hit still arrives.

If you want a clean starting point

Templates that start with no analytics at all

None of our downloadable template packages contains any analytics code, so each one starts from the score of its live sample (we scanned all 36 packages). When you add your own Analytics, use the pattern above. See the templates, and the $19 book for the full method. Downloads work on an honor system (how it works), and building for clients needs a different license (licensing).