Yavaş LCP Değerini Görselle Düzeltme

Yavaş bir En Büyük İçerikli Boyama (LCP) görselini 4 adımda düzeltin: görüntüleneceği boyuta yeniden boyutlandırın, WebP veya AVIF formatına dönüştürün, önceden yükleyin (preload) ve fetchpriority değerini high olarak ayarlayın. İlk 2 adım iyileştirmenin çoğunu sağlar ve sayfa işaretlemenizde herhangi bir değişiklik gerektirmez.

Çoğu sayfada en büyük içerikli boyama öğesi tek bir hero görselidir, bu da LCP'nin aslında tüm sitenizden ziyade tek bir dosya hakkındaki bir soru olduğu anlamına gelir. Bu tek dosyayı düzeltmek, genellikle ölçümü mevcut diğer tüm optimizasyonlardan daha fazla iyileştirir.

LCP neyi ölçer

LCP, sayfa yüklenmeye başladığı andan itibaren en büyük görünür öğenin işlenmesinin ne kadar sürdüğünü kaydeder. Google, 2,5 saniye veya daha kısa süreyi iyi, 2,5 ila 4 saniyeyi iyileştirilmesi gerekiyor ve 4 saniyenin üzerini ise zayıf olarak değerlendirir.

Ölçülen öğe genellikle bir görsel, bazen bir başlık metni bloğudur ve her zaman kaydırma yapmadan görünen bir şeydir. Masaüstü düzenine hakim olan bir hero görseli bir telefonda ekranın altında kalabileceğinden, bu öğe cihazlar arasında değişebilir.

Sorumlu öğeyi bulma

Lighthouse'u çalıştırın ve ölçülen tam öğeyi adlandıran Largest Contentful Paint elementi girişini okuyun. Tahmin yürütmek zaman kaybettirir, çünkü öğe sıklıkla insanların varsaydığı öğe değildir.

Masaüstünün yanı sıra mobilde de kontrol edin, çünkü düzenler değişir ve bu nedenle yanıt da değişir. Gerçek ziyaretçilerden gelen alan verileri, tek bir laboratuvar çalıştırmasından daha güvenilirdir, çünkü ağ koşulları sahada bir testtekinden çok daha fazla değişiklik gösterir. İkisi çeliştiğinde, alan verilerine güvenin ve teşhis için laboratuvar çalıştırmasını kullanın.

Görseli etki sırasına göre düzeltin

Bir görseldeki LCP'yi iyileştirmek için bu 6 adımı sırasıyla uygulayın.

1. Görseli, görüntüleneceği en büyük boyuta yeniden boyutlandırın, yüksek yoğunluklu ekranlar için bunu iki katına çıkarın.
2. Görsel büyük ve fotoğrafik ise WebP'ye veya AVIF'e dönüştürün.
3. Hero görseli için 200 KB altındaki bir hedefe sıkıştırın; bu çoğu tasarımda tam genişlikte ulaşılabilir bir değerdir.
4. Genişlik ve yükseklik özniteliklerini ekleyin, böylece tarayıcı yer ayırır ve hiçbir düzen kayması (layout shift) oluşmaz.
5. Tarayıcının görseli hemen getirmeye başlaması için sayfa head bölümünde görseli önceden yükleyin (preload).
6. Görsel öğesinde fetchpriority değerini high olarak ayarlayın, bu tarayıcıya bu dosyanın en önemli dosya olduğunu söyler.

1 ve 2. adımlar genellikle iyileştirmenin büyük kısmını sağlar ve sayfa işaretlemesine hiç dokunmayı gerektirmeyen 2 adımdır.

Yeniden boyutlandırma neden sıkıştırmayı üstün kılar

Boyutlar dosya boyutunun çoğunu kontrol eder, bu nedenle yeniden boyutlandırma herhangi bir kalite ayarından daha fazla ağırlık kaldırır. 1200 pikselde görüntülenen 4000 piksellik bir fotoğraf, sayfanın gösterebileceğinden 11 kat daha fazla piksel verisi taşır.

Üçüncü satır, yeniden boyutlandırmanın neden ilk sırada geldiğini gösterir. Tek başına yeniden boyutlandırma, tek başına sıkıştırmayı geride bıraktı ve ikisinin kombinasyonu her ikisini de geride bıraktı. Rakamlar görsel ve bağlantıya göre değişir, ancak sıralama istikrarlı bir şekilde geçerliliğini korur.

Preload ve fetchpriority

Önceden yükleme (preload), tarayıcıya sayfayı ayrıştırmayı bitirmeden önce hero görselini getirmesini söyler, bu da genellikle 200 ila 500 milisaniye tasarruf sağlar. Bu ayar önemlidir çünkü tarayıcılar görselleri ayrıştırma sürecinin sonlarında keşfeder.

Yalnızca bir görseli önceden yükleyin. Birden fazlasını önceden yüklemek avantajı ortadan kaldırır, çünkü tarayıcı dikkatini zaten yapacağı gibi böler. fetchpriority değerini high olarak ayarlamak, daha az işaretlemeyle benzer bir sonuç elde eder ve ilk HTML'de zaten bulunan bir görsel için sıklıkla tek başına yeterlidir.

LCP'yi daha da kötüleştiren hatalar

• Hero görselini tembel yüklemek (lazy loading). Tembel yükleme, tam da ilk önce istediğiniz dosyayı geciktirir. Bunu yalnızca ekranın altındaki kısımlara uygulayın.
• Hero görselini JavaScript aracılığıyla yüklemek. Komut dosyasıyla eklenen bir görsel, komut dosyası çalışana kadar indirilmeye başlanamaz.
• CSS arka plan görseli kullanmak. Arka plan görselleri img öğelerinden daha geç keşfedilir ve o kadar kolay önceliklendirilemez.
• Birden fazla görseli önceden yüklemek. Yarışan öncelikler avantajı tamamen ortadan kaldırır.
• Genişlik ve yüksekliği belirtmemek. Düzen kayması (layout shift), bu ölçüm iyileşirken ayrı bir ölçüme zarar verir.

LCP öğesi metin olduğunda

Metin tabanlı bir LCP, genellikle metnin kendisinden ziyade web yazı tipleri nedeniyle gecikir. Tarayıcı kelimelere hemen sahip olur ve bunları çizmeden önce bir yazı tipi dosyası bekler.

font-display değerini swap olarak ayarlayın, böylece metin bir yedek yazı tipinde işlenir ve web yazı tipi ulaştığında geçiş yapar. En önemli tek yazı tipi dosyasını önceden yükleyin ve yazı tipini sayfalarınızın gerçekten kullandığı karakterlerle alt kümelere (subsetting) ayırın, bu genellikle bir yazı tipini 200 KB'den 30 KB'nin altına düşürür. Yazı tiplerini kendi alan adınızdan sunmak, üçüncü bir tarafa ek bir bağlantıyı ortadan kaldırır.

Sunucu yanıt süresi tabanı belirler

LCP, sunucunuzun ilk baytı döndürmesi için geçen süreden daha hızlı olamaz, bu nedenle yavaş bir sunucu diğer tüm iyileştirmeleri sınırlar. İlk bayt için 600 milisaniyenin altını hedefleyin.

Görselleri optimize etmeden önce bu rakamı kontrol edin, çünkü 2 saniyelik bir sunucu yanıtı, dosyalara ne yaparsanız yapın 2,5 saniyelik bir LCP hedefini imkansız kılar. Önbellekleme, daha hızlı bir barındırma sunucusu veya bir içerik teslim ağı (CDN) bu katmanı çözer. Görsel çalışması ardından, başka bir yerde belirlenen bir sınırla savaşmak yerine geriye kalanı iyileştirir.

Üçüncü taraf komut dosyaları da görseli geciktirir

Analitik, rıza bildirimleri, sohbet widget'ları ve reklam komut dosyaları, bant genişliği ve işlem süresi için hero görselinizle rekabet eder. Mükemmel şekilde optimize edilmiş bir görsel bile, önünde 12 komut dosyası yüklendiğinde geç işlenir.

Rıza bildirimleri en çok zarar verenlerdir, çünkü birçoğu ziyaretçi seçim yapana kadar işlemeyi engeller. Üçüncü taraf komut dosyalarını defer veya async özniteliğiyle yükleyin, böylece sayfayı bekletmezler ve kaç tanesine gerçekten ihtiyaç duyulduğunu denetleyin. Kullanılmayan 3 izleme komut dosyasını kaldırmak, genellikle LCP'yi başka bir görsel sıkıştırma turundan daha fazla iyileştirir.

Değişikliği düzgün şekilde test etme

Uzantılar devre dışı bırakılmış olarak gizli bir pencerede test edin ve tek bir sonuca güvenmek yerine ölçümü 3 kez çalıştırın. Puanlar çalıştırmalar arasında belirgin bir farkla değişiklik gösterir.

Tarayıcının gerçekten daha küçük dosyayı aldığını doğrulayın. Geliştirici araçlarını açın, Network sekmesine geçin, görsellere göre filtreleyin ve yeniden yükleyin. Aktarılan boyut ve format listede görünür. Hâlâ eski dosyayı sunan bir sayfa, genellikle optimizasyonun başarısız olduğu anlamına değil, bir önbellekleme katmanının önceki sürümü tuttuğu anlamına gelir.

Düzeltmeden sonra LCP'yi hızlı tutma

Hero görsellerini teker teker düzeltmek yerine onlar için bir kural belirleyin, çünkü yeni sayfalar sorunu yeniden ortaya çıkarır. Bir kez düzeltilen bir site, editörler doğrudan kameradan yükleme yaparsa aylar içinde eski haline döner.

Hero görselleri için maksimum genişlik ve maksimum dosya boyutu konusunda anlaşın, bunu yazılı hale getirin ve her yeni sayfaya uygulayın. 1920 piksel genişlik ve 200 KB altı gibi bir kuralın kontrol edilmesi kolaydır ve hemen hemen her tasarımı kapsar. Birden fazla kişinin yayın yaptığı yerlerde, yazılı kural teknikten daha önemlidir, çünkü ölçüm en iyi sayfayı değil en kötü sayfayı yansıtır.

Hero görsellerini tek geçişte hazırlama

Sitedeki her hero görselini birlikte işleyin, çünkü bunlar bir özellikleri ve bir hedef boyutu paylaşır. Çoğu sitede karşılama sayfaları, kategori sayfaları ve makaleler genelinde 10 ila 100 arasında hero görseli bulunur.

Genişliği ve KB hedefini bir kez ayarlayın, görselleri bırakın ve her dosya eşleşmiş olarak geri gelsin. Toplu iş başına 500 adede kadar görsel, tamamen tarayıcınızın içinde kendi işlemcinizde çalışır. Hiçbir şey yüklenmez, bu nedenle hazırlık varlıkları, yayınlanmamış kampanya sayfaları ve müşteri çalışmaları tüm kütüphane hazırlanırken makinenizde kalır.