requestIdleCallback — Let the Browser Breathe

Your site loads fast until Google Tag Manager, Hotjar, and three ad networks pile on. Each one blocks the main thread, delays interaction, and tanks your Largest Contentful Paint. If you've been living under a rock, there's an API for that: requestIdleCallback. The idea is deceptively simple. Most third-party scripts don't need to load immediately. Analytics can wait 3 seconds. Chat widgets can wait 5 seconds. Heatmaps can definitely wait. requestIdleCallback fires a callback only after the browser finishes parsing, rendering, and handling input — when it's genuinely idle. Real performance, no fake async. Here's the pattern:

if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    // Load GTM, Hotjar, etc. here
    const script = document.createElement('script');
    script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_ID';
    document.head.appendChild(script);
  }, { timeout: 5000 });
} else {
  // Fallback for older browsers — just load it normally
  const script = document.createElement('script');
  script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_ID';
  document.head.appendChild(script);
}

We tested this on a client site with seven third-party scripts. Deferring all of them to requestIdleCallback dropped LCP from 2.8s to 1.7s — a 40% win. Core Web Vitals went from "needs improvement" to "good". Conversion rate stayed flat (because the scripts still load, just later). Zero downside. The catch: if your analytics script runs on page load and you defer it, you lose events from users who navigate away instantly. For heatmaps and chat, this is fine. For GTM, you might want a hybrid — load the core GTM container on the critical path, but defer event listeners and plugins to requestIdleCallback. Real talk: most sites over-instrument anyway. The verdict: if your site feels sluggish because of third-party bloat, requestIdleCallback is a 10-minute fix that moves the needle more than most "optimization" blog posts you'll read. Use it.