Core Web Vitals: LCP, INP ve CLS iyileştirme rehberi

Üç metriği birbirinden ayırın

Web.dev belgelerinde iyi deneyim değerlendirmesi, ziyaretlerin yüzde 75’lik dilimindeki sonuçlar üzerinden ele alınır. Tek bir bilgisayarda aldığınız iyi ölçüm, tüm kullanıcıların bu eşikleri karşıladığını göstermez. Özellikle cihaz gücü, ağ ve üçüncü taraf servisler gerçek deneyimi değiştirebilir.

Laboratuvar ve saha verisini karıştırmayın

Laboratuvar testi, belirli cihaz ve ağ koşulları altında tekrar edilebilir bir teşhis sağlar. Lighthouse gibi araçlar geliştirme sırasında sorunu bulmak için yararlıdır. Saha verisi ise gerçek ziyaretlerin deneyimini yansıtır. Yeni veya düşük trafikli bir sayfada herkese açık saha verisi bulunmayabilir; bu durumun kendisi iyi ya da kötü performans kanıtı değildir.

Sayfa düzeyinde veri yokken alan adı düzeyindeki veriyi o sayfanın kesin sonucu gibi sunmayın. Standart bir yükleme testi de gerçek kullanıcı etkileşimlerinin tamamını kapsamaz; laboratuvardaki TBT gibi ölçüler INP ile ilişkili teşhis sağlayabilir, fakat INP’nin yerine geçmez. Raporunuzda testin kapsamını açıkça yazın.

LCP yavaşsa ana içeriğin yolunu izleyin

Önce LCP öğesinin ne olduğunu belirleyin: büyük bir görsel, başlık veya başka bir içerik bloğu. Görselse dosya boyutu, yanıt süresi, indirme başlangıcı ve ekranda gösterilme zamanı ayrı incelenmelidir. Görsel küçüktür ama JavaScript tamamlanana kadar eklenmiyorsa yalnızca sıkıştırma yapmak ana sorunu çözmez.

• İlk ekranın ana görselini gereksiz yere lazy-load etmeyin; tarayıcının erken keşfedebilmesini sağlayın.
• Görseli gösterilen boyuta uygun üretin; çok büyük masaüstü dosyasını telefona göndermeyin.
• Render işlemini bekleten stil ve betikleri inceleyin; kullanılmayan kütüphaneleri kaldırın.
• Sunucu yanıtı yavaşsa sorgu, harici API ve önbellek davranışını ayrı ölçün.

Bir yayın sitesinde ana içerik metinse harici yazı tiplerinin ve CSS’in etkisini değerlendirin. Sistem yazı tipleri dış istek gerektirmez; özel font kullanılıyorsa dosya sayısını ve ağırlıkları azaltmak düşünülebilir. Tasarım kararını ölçüm sonucu ile birlikte verin.

INP için gerçek etkileşimleri test edin

Menüyü açma, filtre seçme, form gönderme ve içerik arama gibi işlemleri deneyin. Ana iş parçacığını uzun süre meşgul eden JavaScript, kullanıcının tıklamasına yanıtı geciktirebilir. Özellikle her tuşta tüm içerik üzerinde ağır hesap yapan arama, büyük DOM güncellemeleri ve yoğun üçüncü taraf betikleri incelenmelidir.

İşlemi küçültmek, gerekli olmayan işi sonraya bırakmak ve uzun görevleri bölmek yardımcı olabilir. Ancak sırf hızlı görünmek için işlemi tamamlanmış gibi göstermeyin. Bir form sunucu yanıtını bekliyorsa kullanıcıya bekleme durumunu bildirin, düğmenin tekrarlı gönderim davranışını belirleyin ve hata halinde anlaşılır geri bildirim sağlayın.

CLS için alanı önceden ayırın

Görsellerde genişlik ve yükseklik veya uygun en-boy oranı tanımlayın. Sonradan yüklenen reklam, gömülü içerik ve bildirim alanları için yer ayırın. Okuyucu bir bağlantıya basmak üzereyken üstüne yeni bir blok eklenmesi hem kararlılık hem kullanılabilirlik sorunudur.

Yazı tipi değişiminden doğan satır kırılmaları ve yüklendikten sonra boyut değiştiren bileşenleri de kontrol edin. Bir bileşenin alanını sabitlemek her durumda doğru değildir; farklı metin uzunlukları ve mobil genişliklerde kesilmeye yol açmamalıdır. Testte yalnızca boş veya kısa örnek içerik kullanmayın.

Önceliklendirme ve doğrulama döngüsü

1. Temsilî bir ana sayfa, kategori ve uzun rehber seçin; başlangıç ölçümünü kaydedin.
2. En belirgin sorunu ve etkilediği metriği yazın. Örneğin “ana görsel 2 MB, mobilde gereğinden büyük”.
3. Tek bir değişiklik grubunu uygulayın; aynı koşullarda yeniden ölçün.
4. Görünüm, menü, form ve erişilebilirlikte gerileme olmadığını kontrol edin.
5. Canlıya çıktıktan sonra yeterli veri oluştuğunda saha sonuçlarını izleyin.

Skoru yükseltmek uğruna gerekli içeriği kaldırmayın veya yalnızca test aracına farklı sayfa sunmayın. Amaç gerçek okuyucunun işi daha rahat yapmasıdır. Hız çalışmasını teknik SEO denetimiyle ilişkilendirin fakat iyi puanı sıralama garantisi olarak yorumlamayın.

Sunucu yükseltmek ne zaman yardımcı olur?

Sunucu yanıtı kaynak yetersizliği veya bekleyen işlemler yüzünden gecikiyorsa kapasite ve uygulama iyileştirmesi değerlendirilebilir. Ancak ağır görsel, gereksiz JavaScript veya yerleşim kayması daha pahalı sunucuyla otomatik olarak çözülmez. Önce darboğazı ayırın; altyapı kararı gerekiyorsa sunucu seçim rehberindeki iş yükü yaklaşımını kullanın.