LCP görselini hızlandırmak: preload ve fetchpriority

JavaScript · Technical SEO

Birçok sitede LCP (Largest Contentful Paint) öğesi sayfanın üstündeki büyük görsel. Tarayıcı bu görseli CSS ve JavaScript'ten sonra keşfediyorsa, sayfa geç "yüklenmiş" görünüyor.

İki satırlık bir değişiklik çoğu zaman yüzlerce milisaniye kazandırıyor.

1. Üstteki görseli tembel yükleme

En sık yapılan hata bu:

<!-- yanlış -->
<img src="/kapak.webp" loading="lazy" alt="Kapak">

<!-- doğru -->
<img src="/kapak.webp" fetchpriority="high" width="1200" height="630" alt="Kapak">

loading="lazy" sadece ekranın aşağısındaki görsellerde kullanılmalı. width ve height da yerleşim kaymasını (CLS) önlüyor.

2. CSS arka planıysa: preload

Görsel CSS içinde background-image olarak tanımlıysa, tarayıcı onu CSS'i indirip ayrıştırana kadar göremez:

<link rel="preload" as="image" href="/kapak.webp" fetchpriority="high">

3. Hangi öğe LCP? Konsoldan bak

new PerformanceObserver((list) => {
  const e = list.getEntries().at(-1);
  console.log('LCP:', Math.round(e.startTime), 'ms', e.element);
}).observe({ type: 'largest-contentful-paint', buffered: true });

Beklenti

Bu tek başına sıralamaları değiştirmez. Ama ziyaretçi sayfanın "hazır" olduğunu daha erken görür. Her ölçümde bu fark belirgin.

Comments / questions

There's no comment section here. If you have a question or want to add something, message me on Telegram or send an email to [email protected]. Thanks!

Related pages