Bir sayfanın hızlı olup olmadığı artık his meselesi değil. Google, kullanıcı deneyiminin ölçülebilir üç boyutunu Core Web Vitals başlığı altında topladı: yüklemenin algılanan hızını temsil eden LCP, etkileşim gecikmesini ölçen INP ve görsel kararlılığı gösteren CLS. Üç metrik de gerçek kullanıcıların tarayıcılarından toplanır; yani laboratuvarda aldığınız güzel bir puan sahada aynı sonucu vermeyebilir. Bu yazıda her metriğin tanımını, eşiklerini ve pratikte işe yarayan iyileştirme yollarını anlatıyoruz.
Üç metrik ve eşikleri
LCP (Largest Contentful Paint), görünür alandaki en büyük metin bloğunun veya görselin ekrana çizilme anını ölçer. Google'ın belgelediği eşik 2,5 saniyedir; 4 saniyenin üzerindeki değerler zayıf kabul edilir. INP (Interaction to Next Paint), sayfa ömrü boyunca yaşanan tıklama, dokunma ve klavye etkileşimlerinin gecikmesini tek bir temsilci değere indirger; iyi kabul edilen eşik 200 milisaniye, zayıf sınır 500 milisaniyedir. INP, 2024 Mart'ında yalnızca ilk etkileşimi ölçen FID metriğinin yerini aldı ve çok daha zorlayıcı bir ölçüttür. CLS (Cumulative Layout Shift) ise beklenmedik düzen kaymalarını puanlar; 0,1 ve altı iyi, 0,25 üstü zayıftır.
Önemli bir ayrıntı: bu eşikler ortalamayla değil, 75. yüzdelikle değerlendirilir. Yani ziyaretlerinizin dörtte üçü eşiğin altında kalmalıdır. Ortalama, birkaç çok yavaş oturumu gizleyebildiği için yanıltıcıdır.
Saha verisi mi, laboratuvar verisi mi?
İki farklı ölçüm dünyası var ve karıştırıldıklarında ekipler saatlerce yanlış şeyi kovalıyor. Laboratuvar verisi, sabit bir cihaz ve ağ profiliyle üretilen sentetik testtir; tekrarlanabilir olduğu için regresyon yakalamada iyidir. Saha verisi ise gerçek ziyaretçilerden gelir ve gerçek cihaz çeşitliliğini, ağ koşullarını, eklentileri içerir. INP gibi etkileşime bağlı metrikler laboratuvarda anlamlı biçimde ölçülemez; çünkü sentetik test kimseyle etkileşmez. Karar verirken saha verisine bakın, sebebi bulmak için laboratuvar aracına inin.
Kendi ölçümünüzü kurmak isterseniz tarayıcıların yerleşik PerformanceObserver arayüzü üç metriği de raporlayabilir. Toplanan değerleri sayfa şablonuna, cihaz türüne ve bağlantı tipine göre etiketleyin; aksi hâlde "site yavaş" demekten öteye geçemezsiniz.
LCP'yi düşürmenin gerçek yolları
- Sunucu yanıt süresini kısaltın. LCP'nin büyük bölümü çoğu sitede TTFB'dir. Sorgu sayısını azaltmak, sayfa çıktısını önbelleğe almak ve bir CDN kullanmak en yüksek getirili adımlardır.
- LCP ögesini geciktirmeyin. Kahraman görselini lazy-load etmeyin, arka planda CSS ile çağırmayın ve fetchpriority özniteliğiyle yüksek öncelik verin.
- Yazı tiplerini kontrol edin. Metin LCP ögesiyse, yazı tipi indirilene kadar boş kalan alan ölçümü bozar. Yerel barındırma, preload ve font-display ayarı bu gecikmeyi ortadan kaldırır.
- Kritik olmayan CSS ve JS'i erteleyin. Render'ı bloklayan her dosya LCP'yi doğrudan geciktirir.
INP: ana iş parçacığını serbest bırakmak
INP kötüyse sorun neredeyse her zaman uzun görevlerdir. Tarayıcının tek bir ana iş parçacığı vardır; JavaScript orada 300 milisaniye çalışırsa, o sırada gelen tıklama sıraya girer. Çözüm, işi bölmektir: büyük döngüleri parçalara ayırın, ölçüm ve analiz kodlarını etkileşim sonrasına erteleyin, üçüncü taraf betiklerini sayıp gerçekten gerekli olanları bırakın. Bir tıklamaya yanıt verirken önce görsel geri bildirimi verin, ağır işi sonraki kareye bırakın. Uzun listelerde sanallaştırma, gereksiz yeniden render'ı önleyen basit bir durum yönetimi ve olay dinleyicilerini kök ögede toplamak da ölçülebilir kazanç sağlar.
CLS: yer ayırmak yeterli
Düzen kayması genellikle boyutu bildirilmemiş içerikten kaynaklanır. Her img ve video ögesine genişlik ve yükseklik verin ya da CSS ile en boy oranı tanımlayın. Reklam, gömme içerik ve bildirim çubukları için sabit yükseklikte kapsayıcı ayırın. Var olan içeriğin üstüne sonradan içerik enjekte etmeyin; yeni bir kutu açacaksanız etkileşim sonrasında açın. Animasyonlarda top ve height yerine transform kullanın, böylece düzen yeniden hesaplanmaz.
Ölçmeden iyileştirme olmaz
Sık karşılaşılan yanlış anlamalar
Birinci yanlış anlama, tek bir puanın her şeyi özetlediği düşüncesidir. Sentetik araçların verdiği toplam skor, farklı ağırlıklardaki metriklerin birleşimidir; skor yükselirken LCP kötüleşebilir. Kararlarınızı bileşen metrikler üzerinden verin. İkincisi, iyileştirmenin ana sayfayla sınırlı tutulmasıdır; oysa trafiğin çoğu genellikle ürün, hizmet veya blog şablonlarına gelir. Şablon bazlı ölçün. Üçüncüsü, üçüncü taraf betiklerinin "hafif" sayılmasıdır: her etiket yöneticisi kapsayıcısı, sohbet aracı ve ısı haritası kodu ana iş parçacığında yer kaplar ve INP'yi doğrudan etkiler. Bu araçları envanterleyip her birinin sağladığı değeri maliyetiyle birlikte yılda en az bir kez gözden geçirin.
Performans çalışmasını tek seferlik bir temizlik gibi değil, sürekli bir bakım işi gibi kurgulayın. Her yayın öncesinde temel şablonlar için bir performans bütçesi kontrol edin, saha verisini haftalık izleyin ve bir metrik bozulduğunda hangi sürümle bozulduğunu görebilecek kadar sürüm etiketi tutun. Ekibimizin bu konudaki yaklaşımını web tasarım hizmetimiz sayfasında, ölçüm kurulumunu ise teklif formu üzerinden konuşabiliriz.
