Third-Party Script Optimization

<!-- Bad: Blocks rendering -->
<script src="https://analytics.example.com/script.js"></script>

<!-- Good: async - Download in parallel, execute when ready -->
<script src="https://analytics.example.com/script.js" async></script>

<!-- Better: defer - Download in parallel, execute after HTML parsed -->
<script src="https://analytics.example.com/script.js" defer></script>

<!-- Best: Load after page fully loaded -->
<script>
  window.addEventListener('load', () => {
    const script = document.createElement('script');
    script.src = 'https://analytics.example.com/script.js';
    document.body.appendChild(script);
  });
</script>

// Load chat widget only when user clicks chat button
let chatLoaded = false;

function loadChatWidget() {
  if (chatLoaded) return;
  chatLoaded = true;

  const script = document.createElement('script');
  script.src = 'https://chat.example.com/widget.js';
  script.async = true;
  document.body.appendChild(script);
}

// Trigger on button click
document.getElementById('chat-btn').addEventListener('click', loadChatWidget);

// Or trigger after 10 seconds of inactivity
let timeout = setTimeout(loadChatWidget, 10000);
document.addEventListener('mousemove', () => {
  clearTimeout(timeout);
  timeout = setTimeout(loadChatWidget, 10000);
}, { once: true });

<!-- Lite YouTube Embed (saves ~500KB) -->
<div class="youtube-facade" data-id="VIDEO_ID" onclick="loadYouTube(this)">
  <img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="Video thumbnail" />
  <button class="play-button">▶</button>
</div>

<script>
function loadYouTube(element) {
  const videoId = element.dataset.id;
  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;
  element.replaceWith(iframe);
}
</script>

<style>
.youtube-facade {
  position: relative;
  cursor: pointer;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 20px 30px;
}
</style>

<!-- DNS Prefetch - Resolve DNS early (lowest priority) -->
<link rel="dns-prefetch" href="https://www.google-analytics.com" />
<link rel="dns-prefetch" href="https://cdn.example.com" />

<!-- Preconnect - Establish full connection (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Preload - High priority download -->
<link rel="preload" href="https://cdn.example.com/critical.js" as="script" />

<!-- Example: Optimize Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />

# Download Google Fonts locally
# Use tools like google-webfonts-helper or fontsource

# Install fontsource
npm install @fontsource/roboto

# Import in your CSS/JS
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/700.css';

# Use privacy-friendly, self-hosted analytics
# Options: Plausible, Umami, Matomo

# Plausible self-hosted (lightweight, GDPR-compliant)
npm install plausible-tracker

# Track pageviews
import Plausible from 'plausible-tracker';
const plausible = Plausible({ domain: 'yourdomain.com' });
plausible.trackPageview();

<!-- Load GTM with defer -->
<script defer src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"></script>

<!-- Or load GTM after page load -->
<script>
  window.addEventListener('load', () => {
    // Load GTM after page fully loads
    const script = document.createElement('script');
    script.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX';
    script.async = true;
    document.head.appendChild(script);
  });
</script>