Core Web Vitals 2025: INP, LCP, CLS İyileştirme için Adım Adım Check-List

<!-- 1) Kritik olmayan script'leri ertele -->
<script src="/js/widgets.js" defer></script>

<!-- 2) Etkileşim sonrası yükleme (mikro görev) -->
<button id="openChat">Canlı Destek</button>
<script>
  document.getElementById('openChat').addEventListener('click', async () => {
    const { initChat } = await import('/js/chat-widget.js'); // dynamic import
    initChat();
  });
</script>

<!-- 3) Event delegasyonu -->
<ul id="menu">...</ul>
<script>
  document.getElementById('menu').addEventListener('click', (e) => {
    const item = e.target.closest('[data-menu-item]');
    if(!item) return;
    // kısa, saf JS handler
  });
</script>

<!-- Kaynak hazırlığı -->
<link rel="preconnect" href="https://cdn.site.com" crossorigin>
<link rel="dns-prefetch" href="//cdn.site.com">

<!-- LCP görseli preload -->
<link rel="preload" as="image" href="/img/hero@2x.avif" imagesrcset="/img/hero.avif 1x, /img/hero@2x.avif 2x" imagesizes="(max-width: 768px) 100vw, 1200px">

<!-- Görsel bileşeni -->
<img
  src="/img/hero.avif"
  srcset="/img/hero.avif 600w, /img/hero@2x.avif 1200w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200" height="630" fetchpriority="high" decoding="async" alt="Ürün kahraman görseli">

/* Görsel/iframe boyutları */
.card .thumb {
  aspect-ratio: 16/9; /* ya da width/height attribute kullanın */
  object-fit: cover;
}

/* Reklam alanı rezerve etme */
.ad-slot {
  min-height: 250px; /* olası yükseklikler: 250, 280, 600 */
}

/* Font yüklemesi */
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-var.woff2") format("woff2");
  font-display:swap; /* optional da kullanılabilir */
}

<!-- Web Vitals'ı GA4'e gönderme (örnek) -->
<script type="module">
import {onLCP, onINP, onCLS} from 'https://unpkg.com/web-vitals?module';
function sendToGA4({name, value}) {
  window.gtag && gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value), // CLS * 1000
    event_category: 'web-vitals',
    non_interaction: true
  });
}
onLCP(sendToGA4); onINP(sendToGA4); onCLS(sendToGA4);
</script>