How Third-Party Scripts Kill Your LCP (and How to Fix It)

// Add this to your page temporarily to measure third-party impact
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Filter for third-party resources
    const url = new URL(entry.name);
    const isThirdParty = url.origin !== location.origin;

    if (isThirdParty) {
      console.table({
        resource: url.hostname + url.pathname.slice(0, 50),
        type: entry.initiatorType,
        transferSize: (entry.transferSize / 1024).toFixed(1) + ' KB',
        duration: entry.duration.toFixed(0) + ' ms',
        renderBlocking: entry.renderBlockingStatus || 'unknown',
      });
    }
  }
});

observer.observe({ type: 'resource', buffered: true });

// Also measure Long Tasks caused by third-party scripts
const longTaskObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.attribution) {
      const container = entry.attribution[0]?.containerSrc;
      if (container && !container.includes(location.origin)) {
        console.warn(
          `Long Task (${entry.duration.toFixed(0)}ms) from: ${container}`
        );
      }
    }
  }
});

longTaskObserver.observe({ type: 'longtask', buffered: true });

<!-- CRITICAL: Only consent manager needs to block -->
<script src="https://consent.example.com/cmp.js"></script>

<!-- DEFERRED: Analytics loads after page is interactive -->
<script src="https://analytics.example.com/track.js" defer></script>

<!-- LAZY: Chat widget loads only after user scrolls or clicks -->
<script>
  function loadChat() {
    const script = document.createElement('script');
    script.src = 'https://chat.example.com/widget.js';
    document.body.appendChild(script);
    // Remove listeners after loading
    window.removeEventListener('scroll', loadChat);
    document.removeEventListener('click', loadChat);
  }

  // Load after first user interaction
  window.addEventListener('scroll', loadChat, { once: true });
  document.addEventListener('click', loadChat, { once: true });

  // Fallback: load after 5 seconds idle
  if ('requestIdleCallback' in window) {
    requestIdleCallback(loadChat, { timeout: 5000 });
  } else {
    setTimeout(loadChat, 5000);
  }
</script>

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}

      {/* Analytics: loads after page is interactive */}
      <Script
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"
        strategy="afterInteractive"
      />

      {/* Chat widget: loads when browser is idle */}
      <Script
        src="https://chat.example.com/widget.js"
        strategy="lazyOnload"
      />

      {/* A/B testing: loads before page hydrates */}
      {/* Use sparingly -- this blocks rendering! */}
      <Script
        src="https://ab-test.example.com/client.js"
        strategy="beforeInteractive"
      />
    </>
  );
}

<!-- Instead of standard YouTube iframe (loads ~800KB) -->
<!-- Use a facade that loads ~15KB -->
<div class="youtube-facade" data-video-id="dQw4w9WgXcQ">
  <img
    src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg"
    alt="Video title"
    loading="lazy"
    width="640"
    height="360"
  />
  <button class="youtube-facade__play" aria-label="Play video">
    <svg viewBox="0 0 68 48" width="68" height="48">
      <path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/>
      <path d="M45 24L27 14v20" fill="white"/>
    </svg>
  </button>
</div>

<script>
document.querySelectorAll('.youtube-facade').forEach(facade => {
  facade.addEventListener('click', function() {
    const videoId = this.dataset.videoId;
    const iframe = document.createElement('iframe');
    iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
    iframe.allow = 'accelerometer; autoplay; encrypted-media; gyroscope';
    iframe.allowFullscreen = true;
    iframe.width = 640;
    iframe.height = 360;
    this.replaceWith(iframe);
  });
});
</script>

<head>
  <!-- Preconnect: full connection for critical third-parties -->
  <!-- Saves 100-300ms per origin on first request -->
  <link rel="preconnect" href="https://www.googletagmanager.com" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  <!-- DNS-prefetch: lighter touch for less critical origins -->
  <!-- Saves 20-100ms per origin -->
  <link rel="dns-prefetch" href="https://analytics.example.com" />
  <link rel="dns-prefetch" href="https://chat.example.com" />
  <link rel="dns-prefetch" href="https://cdn.example.com" />

  <!-- Limit preconnects to 4-6 origins max -->
  <!-- Too many dilute the benefit and waste connections -->
</head>

// scripts/check-third-party-budget.mjs
// Run in CI to block deploys that exceed the script budget

import { execSync } from 'child_process';

const BUDGET_KB = 100; // Max third-party JS (compressed)

// List of known third-party domains
const THIRD_PARTY_DOMAINS = [
  'googletagmanager.com',
  'google-analytics.com',
  'hotjar.com',
  'intercom.io',
  'sentry.io',
];

async function checkBudget(url) {
  // Use Lighthouse programmatically
  const result = JSON.parse(
    execSync(
      `npx lighthouse ${url} --output=json --quiet --only-categories=performance`,
      { encoding: 'utf8', maxBuffer: 50 * 1024 * 1024 }
    )
  );

  const thirdPartyBytes = result.audits['third-party-summary']
    ?.details?.items
    ?.reduce((sum, item) => sum + item.transferSize, 0) || 0;

  const thirdPartyKB = (thirdPartyBytes / 1024).toFixed(1);

  console.log(`Third-party JS budget: ${thirdPartyKB}KB / ${BUDGET_KB}KB`);

  if (thirdPartyKB > BUDGET_KB) {
    console.error(`BUDGET EXCEEDED by ${(thirdPartyKB - BUDGET_KB).toFixed(1)}KB`);
    process.exit(1);
  }

  console.log('Budget check passed.');
}

checkBudget(process.argv[2] || 'https://example.com');