· Ece Tunalı
Bir ürün sayfasında LCP'yi 1 saniyenin altına indirmek
Kısa cevap: ürün görselini HTML'de keşfedilebilir yaptım, ona fetchpriority="high" verdim, ilk ekranda kullanılan yazı tiplerini önceden yükledim ve ilk boyamaya katkısı olmayan üç betiği sayfa yüklendikten sonraya erteledim. Bu yazıda sırayla neyi neden değiştirdiğimi anlatıyorum. Rakamlar kurgusal bir demo sayfasına aittir.
Önce neyin LCP olduğunu bul
Largest Contentful Paint, ilk ekranda görünen en büyük metin bloğunun ya da görselin çizildiği andır. Lighthouse raporundaki "Largest Contentful Paint element" satırı bunun hangi öğe olduğunu söyler. Bizim sayfada bu öğe ürün fotoğrafıydı, ancak fotoğraf bir JavaScript galeri bileşeni tarafından ekleniyordu. Tarayıcı HTML'i okurken görseli göremiyor, betik çalışana kadar indirmeye başlamıyordu.
Görseli HTML'e geri koy
<img src="/img/urun-800.webp"
srcset="/img/urun-480.webp 480w, /img/urun-800.webp 800w"
sizes="(min-width: 1024px) 50vw, 100vw"
width="800" height="800" alt="..."
fetchpriority="high">Galeri bileşeni ilk görseli artık devralıyor, yeniden oluşturmuyor. Görselde loading="lazy" olmadığından emin olun; ilk ekrandaki görseli tembel yüklemek LCP'yi geciktirir.
Yazı tiplerini önceden yükle
Başlık yazı tipi geç gelince metin önce yedek yazı tipiyle çiziliyor, sonra yer değiştiriyordu. İlk ekranda kullanılan iki ağırlığı <link rel="preload" as="font" crossorigin> ile yükledim ve font-display: swap kullandım.
Ertelenebilen betikleri ertele
Canlı destek kutusu, ürün önerileri ve ısı haritası betiği ilk ekrana hiçbir şey çizmiyordu. Üçünü de load olayından sonra yüklenecek şekilde taşıdım.
Sonuç ve kontrol listesi
- LCP öğesini Lighthouse ile bul.
- Öğe görselse HTML'de olsun, lazy olmasın, fetchpriority yüksek olsun.
- İlk ekrandaki yazı tiplerini önceden yükle.
- İlk boyamaya katkısı olmayan betikleri ertele.
Yazan: Ece Tunalı. Son güncelleme: