Website Speed & SEO Connection

<!-- Preload critical resources -->
<link rel="preload" href="/hero-image.webp" as="image" />
<link rel="preload" href="/main.css" as="style" />

<!-- Use modern image formats with responsive sizing -->
<picture>
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" width="1200" height="600" />
</picture>

<!-- Optimize server response time -->
<!-- Use CDN, enable compression, cache static assets -->

// Code split large JavaScript bundles
const HeavyComponent = lazy(() => import('./HeavyComponent'));

// Debounce expensive operations
function debounce(fn, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

const handleScroll = debounce(() => {
  // Expensive scroll logic
}, 100);

// Use passive event listeners for better scroll performance
element.addEventListener('scroll', handleScroll, { passive: true });

<!-- Always specify image dimensions -->
<img src="photo.jpg" alt="Photo" width="800" height="600" />

<!-- Reserve space for ads/embeds -->
<div style="min-height: 250px;">
  <!-- Ad placeholder -->
</div>

<!-- Use aspect-ratio for responsive containers -->
<div style="aspect-ratio: 16 / 9;">
  <iframe src="video.html" title="Video"></iframe>
</div>

/* Prevent font swap layout shift */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2');
  font-display: swap; /* or optional */
}

/* Reserve space for dynamic content */
.skeleton-loader {
  min-height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
}