Core Web Vitals: hızı ölç, sorunu bul, iyileştirmeyi doğrula

Core Web Vitals; yükleme, etkileşim ve görsel kararlılığı izleyen ölçümlerdir. Güncel üçlü LCP, INP ve CLS'dir; FID artık bu üçlünün parçası değildir. İyi eşikler LCP için en fazla 2,5 saniye, INP için en fazla 200 milisaniye, CLS için en fazla 0,1'dir. Değerlendirme mobil ve masaüstü ayrılarak, ziyaretlerin 75. yüzdelik değerinde yapılır. Örneğin yüz ziyaretin ölçümlerini sıraladığınızda yaklaşık yetmiş beşinci değere bakarsınız; ortalama, kötü deneyim yaşayan grubu gizleyebilir.

PageSpeed Insights içindeki gerçek kullanıcı bölümü ile Lighthouse laboratuvar bölümü aynı veri değildir. Laboratuvar kontrollü bir denemedir; saha ölçümü gerçek cihazları ve bağlantıları kapsar. Yeterli saha verisi bulunmaması, sitenin başarılı ya da başarısız olduğu anlamına gelmez. URL yerine tüm alan adı verisi gösteriliyorsa bunu not edin. Raporunuzda ölçüm kaynağı, cihaz, tarih ve örnek kapsamı bulunmalıdır.

LCP çoğu sayfada ana görsel veya büyük metin bloğuyla ilişkilidir. Önce ölçüm aracının hangi öğeyi LCP seçtiğini bulun. Ardından süreyi sunucu yanıtı, kaynağın keşfedilmesi, indirilmesi ve ekrana çizilmesi olarak düşünün. Görseli küçültmek, onu ancak uzun bir JavaScript zincirinin sonunda keşfeden sayfayı tek başına düzeltemez. Üst alandaki önemli görseli normal HTML içinde tanımlamak ve gereksiz geciktirmemek daha doğru başlangıç olabilir.

Eğitim senaryosu: Hayali bir kurs sitesinin mobil açılışında ana başlık iki saniyelik animasyon bitene kadar görünmüyor. Görsel zaten küçüktür. Ekip önce görsel formatlarını değiştirir fakat ziyaretçi hâlâ boş alan görür. İkinci denemede başlık ilk çizimde görünür, süs hareketi sonradan başlar. Bu örnekte test edilecek hipotez dosya ağırlığı değil görünürlük gecikmesidir; verilen süre gerçek müşteri verisi değildir.

Ödevinizde bir sayfa seçin, LCP öğesini kaydedin ve üç aday nedeni yazın. Her adayın yanına onu destekleyecek kanıtı ekleyin. Değişikliği ancak kanıtla eşleşen nedene uygulayın. Kabul kriteriniz “puan yükselsin” yerine “ana başlık ilk HTML'de mevcut olsun ve animasyon beklemeden görünsün” olabilir.

Bir sayfanın görünmesiyle kullanılabilir olması farklıdır. Kullanıcı filtreye, menüye veya sepete bastığında uzun işlemler yanıtı geciktirebilir. INP bu etkileşim deneyimini değerlendirir. Lighthouse'taki TBT yararlı bir laboratuvar göstergesidir fakat INP ile aynı ölçüm değildir. Menü açma, filtre değiştirme ve form gönderme gibi gerçek akışları ayrıca deneyin. Hızlı bir ana sayfa ölçümü, ödeme ekranındaki donmayı anlatmaz.

Hayali katalogda bir filtre tıklaması bütün ürünlerin görsellerini yeniden işliyor olsun. Ekrana önce seçimin alındığını göstermek, pahalı işi bölmek ve yalnız değişen listeyi güncellemek araştırılabilir. Bunlar koşulsuz reçete değildir; performans kaydı hangi işlemin zaman aldığını göstermelidir. Üçüncü taraf sohbet, ölçüm ve reklam kodlarını da aynı kayıtta değerlendirin.

Çalışma kâğıdınıza etkileşim adı, başlangıç durumu, cihaz, gözlenen bekleme ve sorumlu kod alanını yazın. Klavyeyle de deneyin. Hız kazanmak için butonun erişilebilir adını kaldırmak veya form doğrulamasını atlamak kabul edilmez. Başarı ölçütü kullanıcının doğru işlemi daha rahat tamamlamasıdır.

Görseller için en ve boy oranı ayırmak, geç gelen reklam ve duyuru alanlarını önceden planlamak, yazı tipi değişimlerini izlemek kararlılık çalışmasının parçalarıdır. Açılış ekranı sabit görünse bile aşağı kaydırınca eklenen içerik sorun yaratabilir. Bu nedenle yalnız ekran görüntüsüyle değerlendirme yapmayın; sayfayı okuyun, açılır alanları kullanın ve farklı ekran genişliklerinde izleyin.

Eğitim senaryosu: Bir ürün sayfasında kampanya bandı sonradan başlığın üzerine ekleniyor ve satın alma butonu aşağı kayıyor. Çözüm seçenekleri arasında bant için yer ayırmak veya bandı düzeni itmeyen uygun bir konumda göstermek vardır. Seçimi tasarım, erişilebilirlik ve mobil kullanılabilirlik birlikte belirler. Her sabit katman doğru değildir; ekranın yarısını kapatan bildirim de iyi deneyim sayılmaz.

Geliştiriciye yalnız “CLS kötü” yazmayın. Kaymayı hangi öğenin, hangi olaydan sonra yarattığını gösteren kısa kayıt ekleyin. Doğrulamada ilk ziyaret, önbellekli ziyaret, yavaş ağ ve gerçek içerik uzunluklarını kullanın. Boş demo metniyle sorunsuz görünen kart, uzun Türkçe ürün adı geldiğinde taşabilir.

Bir kez yüksek puan almak yerine her yayında aynı kritik yolları kontrol edin. Ana sayfa, kategori, ürün veya hizmet ve form sayfasından temsilci seçin. Kurumunuza uygun dosya ve etkileşim bütçelerini başlangıç verisine göre belirleyin; evrensel bir kilobayt rakamını körlemesine uygulamayın. Büyük video kapaklarını kullanıcı başlatmadan indirmemek gibi tasarım kararları genellikle bakım maliyetini de azaltır.

1. Değişiklik öncesi aynı cihaz profiliyle birkaç ölçüm yapın ve değişkenliği kaydedin.
2. Tek bir hipotezi uygulayın; ilgisiz tasarım değişikliklerini aynı teste karıştırmayın.
3. Laboratuvarda hatayı yeniden üretin ve düzeldiğini doğrulayın.
4. Yayından sonra saha verisinin güncellenmesini bekleyerek eğilimi izleyin.
5. Form tamamlama ve hata oranlarını kontrol edin; hızlı ama çalışmayan sayfayı başarı saymayın.

Tesliminiz, önce ve sonra raporlarının yanında neden değiştiğini açıklayan kısa bir teknik not içermelidir. Core Web Vitals iyileşmesi sıralama garantisi değildir; içerik uygunluğu, erişim ve ticari hedeflerle birlikte değerlendirilir.