<!-- ❌ BAD: No optimization -->
<img src="hero-image.jpg" alt="Hero">

<!-- ✅ GOOD: Fully optimized -->
<img 
  src="hero-image.webp" 
  alt="Complete SEO Guide Hero Image"
  width="1200" 
  height="630"
  fetchpriority="high"
  decoding="async"
>

<!-- 🏆 BEST: Modern responsive with WebP -->
<picture>
  <source 
    srcset="hero-1200.webp 1200w, hero-800.webp 800w, hero-400.webp 400w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
    type="image/webp"
  >
  <img 
    src="hero-1200.jpg" 
    alt="Complete SEO Guide Hero Image"
    width="1200" 
    height="630"
    fetchpriority="high"
    decoding="async"
  >
</picture>

<!-- Preload LCP image -->
<link rel="preload" as="image" href="/images/hero-image.webp" fetchpriority="high">

<!-- Preconnect to external image CDN -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- Preload critical CSS -->
<link rel="preload" as="style" href="/css/critical.css">

<!-- Preconnect to Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- ❌ BAD: No dimensions = layout shift when image loads -->
<img src="product.jpg" alt="Product">

<!-- ✅ GOOD: Explicit dimensions prevent shift -->
<img src="product.jpg" alt="Product" width="600" height="400">

<!-- 🏆 BEST: Aspect ratio with CSS for responsive -->
<div style="aspect-ratio: 16 / 9;">
  <img src="product.jpg" alt="Product" width="1600" height="900">
</div>

/* ❌ BAD: Default font loading causes FOIT (flash of invisible text) */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
}

/* ✅ GOOD: Font swap prevents invisible text */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* Show fallback font immediately */
}

/* 🏆 BEST: Preload font in HTML head */
<link rel="preload" href="custom-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- ❌ BAD: Ad loads and pushes content down -->
<div id="ad-container"></div>

<!-- ✅ GOOD: Reserve space for ad -->
<div id="ad-container" style="min-height: 250px;"></div>

<!-- 🏆 BEST: Aspect ratio container for YouTube embed -->
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

<!-- ❌ BAD: Blocks parsing and execution -->
<script src="large-library.js"></script>

<!-- ✅ GOOD: Defer loads after HTML parsed -->
<script src="large-library.js" defer></script>

<!-- ✅ GOOD: Async loads independently -->
<script src="analytics.js" async></script>

<!-- 🏆 BEST: Conditional loading for non-critical scripts -->
<script>
  // Load script only after user interaction
  document.addEventListener('scroll', function() {
    if (!window.nonCriticalLoaded) {
      const script = document.createElement('script');
      script.src = 'non-critical.js';
      document.body.appendChild(script);
      window.nonCriticalLoaded = true;
    }
  }, { once: true });
</script>

// ❌ BAD: Scroll handler runs on every scroll event (100+ times/sec)
window.addEventListener('scroll', function() {
  console.log('Scrolled!');
  // Heavy calculations here
});

// ✅ GOOD: Debounced scroll handler (runs max once per 100ms)
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

window.addEventListener('scroll', debounce(function() {
  console.log('Scrolled!');
  // Heavy calculations here
}, 100));

// 🏆 BEST: Passive event listener + debounce
window.addEventListener('scroll', debounce(function() {
  console.log('Scrolled!');
}, 100), { passive: true }); // Browser can optimize scrolling