Core Web Vitals Nedir? LCP, INP ve CLS'yi Basitçe Anlamak

PageSpeed Insights'a sitenizi yazıp kırmızı ve turuncu rakamlarla karşılaştıysanız yalnız değilsiniz; ama o rakamların ne anlattığını bilmeden doğru çözümü bulmak zor. Core Web Vitals nedir sorusunun kısa cevabı şudur: Google'ın, bir sayfanın gerçek kullanıcılar için ne kadar hızlı yüklendiğini, ne kadar çabuk tepki verdiğini ve ne kadar kararlı durduğunu ölçmek için kullandığı üç temel metrik. Bu yazıda LCP, INP ve CLS'yi teknik jargona boğmadan açıklıyor, Google'ın eşiklerini, saha ve laboratuvar verisi farkını ve her metrik için pratik çözümleri anlatıyoruz.

Core Web Vitals nedir ve neden ortaya çıktı?

“Site hızlı mı?” sorusu tek bir sayıyla cevaplanamaz. Bir sayfa çok hızlı başlayıp ana görseli geç gösterebilir, her şeyi hızlı yükleyip butona basıldığında donabilir ya da tam bir linke tıklayacakken içerik aşağı kayabilir. Google, bu farklı deneyimleri ölçülebilir hale getirmek için Core Web Vitals adıyla üç metrik tanımladı.

Bu metrikler, Google'ın “sayfa deneyimi” olarak adlandırdığı daha geniş kavramın parçasıdır. Sayfa deneyimi; HTTPS kullanımı, mobil uyumluluk ve kullanıcıyı rahatsız eden araya giren pencerelerin olmaması gibi unsurları da kapsar. Mobil uyumluluk konusunu mobil uyumlu web sitesi nedir yazımızda ayrıca ele aldık.

Üç metrik ve Google'ın “iyi” eşikleri

Google'ın Core Web Vitals dokümantasyonuna göre eşikler şöyledir:

Önemli bir ayrıntı: Bu değerlendirme tek bir ziyarete göre değil, sayfa ziyaretlerinin 75. yüzdelik dilimine göre yapılır. Yani bir sayfanın “iyi” sayılması için ziyaretlerin büyük çoğunluğunda eşiğin altında kalması gerekir. Mobil ve masaüstü ayrıca değerlendirilir.

LCP nedir?

LCP, sayfanın görünen alanındaki en büyük içerik öğesinin (genellikle büyük bir görsel, video kapağı veya ana başlık bloğu) ekranda belirdiği ana kadar geçen süredir. Kullanıcının “sayfa açıldı” hissine en yakın metriktir.

İzmir'de bir restoranın ana sayfasını düşünün: Ekranı kaplayan büyük bir yemek fotoğrafı var. Bu fotoğraf dört saniyede yükleniyorsa, ziyaretçi o süre boyunca boş veya yarım bir ekrana bakar. LCP tam olarak bu bekleyişi ölçer.

INP nedir?

INP, kullanıcının sayfada yaptığı tıklama, dokunma ve klavye etkileşimlerinden sonra ekranın ne kadar sürede görsel olarak tepki verdiğini ölçer. INP, Mart 2024'te önceki etkileşim metriği FID'nin (First Input Delay) yerini aldı. FID yalnızca ilk etkileşimdeki gecikmeye bakıyordu; INP ise ziyaret boyunca gerçekleşen etkileşimleri değerlendirerek sayfanın genel tepki hızını daha gerçekçi yansıtır.

Kadıköy'de bir kuaförün online randevu sayfasında tarih seçmek için takvime dokunduğunuzu ve yarım saniye hiçbir şey olmadığını düşünün. Kullanıcı büyük ihtimalle tekrar tekrar dokunur ya da sayfanın bozuk olduğunu düşünür. Kötü INP, bu “donma” hissidir.

CLS nedir?

CLS, sayfa yüklenirken veya kullanılırken içeriğin beklenmedik biçimde kaymasını ölçen bir puandır. Bir haber sitesinde okumaya başladığınız paragrafın, üstte geç yüklenen bir reklam yüzünden aşağı itildiğini hatırlayın. Ya da “Ara” butonuna basacakken üstte bir banner belirip parmağınızın başka bir linke denk gelmesini. CLS süre değil, kaymanın büyüklüğü ve sıklığına dayanan birimsiz bir değerdir.

Saha verisi ve laboratuvar verisi: neden farklı sonuçlar görüyorsunuz?

İşletme sahiplerinin en çok kafasını karıştıran konu, aynı sayfa için farklı araçlarda farklı sonuçlar görmektir. Bunun nedeni iki farklı veri türünün olmasıdır:

Kısacası: Google'ın değerlendirmesinde esas alınan, gerçek kullanıcılardan gelen saha verisidir. Laboratuvar verisi ise sorunları bulup düzeltmek için bir teşhis aracıdır. Laboratuvardaki 100 üzerinden puan, Core Web Vitals'ın kendisi değildir; birçok metriğin birleşiminden oluşan bir özet göstergedir.

Düşük ziyaretçili sitelerde saha verisi yeterli olmayabilir. Bu durumda laboratuvar verisiyle ilerlemek normaldir.

Core Web Vitals nasıl ölçülür?

1. PageSpeed Insights: Sayfa adresinizi yazın. Üstte saha verisi (yeterli veri varsa), altta laboratuvar sonuçları ve iyileştirme önerileri görünür. Mobil sekmesini mutlaka kontrol edin.
2. Google Search Console: Core Web Vitals raporu, sitenizdeki benzer sayfaları gruplayarak hangi URL gruplarının “iyi”, “iyileştirilmesi gerekiyor” veya “kötü” olduğunu gösterir. Kurulum ve diğer raporlar için Google Search Console nedir rehberimize bakabilirsiniz.
3. Chrome geliştirici araçları: Teknik ekibinizin sorunun kaynağını ayrıntılı incelemesi için kullanılır.

Ölçerken yalnızca ana sayfaya bakmayın. Hizmet sayfaları, ürün sayfaları ve blog yazıları farklı şablonlar kullandığı için farklı sonuçlar verebilir.

Her metrik için yaygın nedenler ve çözümler

LCP'yi iyileştirmek

Yaygın nedenler:

• Sıkıştırılmamış, gereğinden büyük boyutlu ana görseller
• Yavaş sunucu yanıt süresi (zayıf hosting, önbellek kullanılmaması)
• Sayfanın görünmesini geciktiren ağır CSS ve JavaScript dosyaları
• Ana görselin geç yüklenmeye (lazy load) ayarlanması

Çözüm önerileri:

• Görselleri WebP veya AVIF gibi modern formatlara çevirip ekran boyutuna uygun ölçülerde sunmak
• Sayfanın ilk görünen alanındaki ana görseli geç yüklemeye bırakmamak, öncelikli yüklenmesini sağlamak
• Önbellek ve içerik dağıtım ağı (CDN) kullanmak, gerekirse hosting altyapısını iyileştirmek
• Kullanılmayan kodları ve gereksiz yazı tipi dosyalarını kaldırmak

INP'yi iyileştirmek

Yaygın nedenler:

• Çok sayıda eklenti, sohbet aracı, takip kodu ve reklam komut dosyası
• Tek seferde çok fazla iş yapan uzun JavaScript görevleri
• Karmaşık sayfa yapısı ve her etkileşimde sayfanın büyük bir bölümünün yeniden çizilmesi

Çözüm önerileri:

• Kullanılmayan eklentileri ve üçüncü taraf kodları temizlemek; gerçekten ihtiyaç duyulanları sonradan yüklemek
• Uzun JavaScript görevlerini daha küçük parçalara bölmek (teknik ekibinizin konusu)
• Etkileşimden sonra kullanıcıya hemen görsel geri bildirim vermek (buton basılı görünümü, yükleniyor göstergesi)

CLS'yi azaltmak

Yaygın nedenler:

• Genişlik ve yükseklik değeri tanımlanmamış görseller ve videolar
• Sonradan yüklenip içeriği iten banner, çerez bildirimi veya reklam alanları
• Yazı tipi yüklenirken metnin boyutunun değişmesi

Çözüm önerileri:

• Tüm görsel ve videolar için boyut tanımlamak veya en-boy oranı ayırmak
• Dinamik içerikler için sayfada önceden sabit alan bırakmak
• Çerez bildirimlerini içeriği itmeyecek biçimde ekranın altında sabit konumlandırmak
• Yazı tiplerini doğru yükleme stratejisiyle kullanmak

Bu başlıkların birçoğu genel site hızıyla doğrudan ilişkilidir. Hosting, önbellek ve görsel optimizasyonu gibi konuları site hızı nasıl artırılır yazımızda adım adım anlattık.

Sık yapılan yanlış anlamalar

• “Puanım 100 değilse sorun var.” Laboratuvar puanı bir teşhis göstergesidir; asıl bakılması gereken gerçek kullanıcı verisindeki üç metriktir.
• “Masaüstünde hızlıysa yeterli.” Ziyaretçilerinizin önemli bir kısmı büyük ihtimalle telefondan geliyor ve mobil sonuçlar çoğu zaman daha zayıftır.
• “Bir kez düzelttim, bitti.” Yeni eklenen bir sohbet aracı, kampanya banner'ı veya sıkıştırılmadan yüklenen bir fotoğraf, iyi değerleri kısa sürede bozabilir.
• “Değişiklik yaptım ama Search Console hâlâ kötü gösteriyor.” Saha verisi son 28 günlük kullanıcı deneyimine dayandığı için iyileşmenin raporlara yansıması zaman alır.
• “Hız eklentisi kurunca her şey çözülür.” Eklentiler bazı sorunlara yardımcı olabilir, ama ağır tema ve gereksiz kodların yarattığı temel sorunları tek başına ortadan kaldırmaz.

Sıralamaya etkisi: abartmadan doğru beklenti

İnternette “Core Web Vitals'ı düzeltin, Google'da birinci olun” gibi iddialar görebilirsiniz. Gerçek daha dengelidir. Google, sayfa deneyimini sıralama sistemlerinde dikkate aldığını, ancak alakalı ve faydalı içeriğin her zaman önde geldiğini açıkça belirtir. Yani aradığı soruya en iyi cevabı veren bir sayfa, metrikleri kusursuz olmasa da üst sıralarda yer alabilir.

Bu, Core Web Vitals'ın önemsiz olduğu anlamına gelmez. Asıl etkisi çoğu zaman kullanıcı tarafında görülür: Hızlı açılan, dokunulduğunda hemen tepki veren ve kaymayan bir sayfa, ziyaretçinin formu doldurmasını, aramasını veya sipariş vermesini kolaylaştırır. Rakiplerinizle içerik kalitesi benzer olduğunda da iyi bir sayfa deneyimi fark yaratabilir.

Hedef mükemmel bir laboratuvar puanı değil, gerçek kullanıcıların ezici çoğunluğunun iyi bir deneyim yaşamasıdır.

Core Web Vitals için sonraki adımlarınız

Bu hafta yapabileceğiniz kısa bir kontrol listesi:

• Ana sayfanızı ve en çok ziyaret alan iki hizmet veya ürün sayfanızı PageSpeed Insights'ta mobil olarak test edin.
• Saha verisi varsa LCP, INP ve CLS değerlerini not edin; yoksa laboratuvar önerilerini kaydedin.
• Search Console'da Core Web Vitals raporunda “kötü” olarak işaretlenen URL gruplarını listeleyin.
• En büyük görsellerinizi sıkıştırın ve kullanmadığınız eklenti ile takip kodlarını gözden geçirin.
• Değişikliklerden sonra saha verisinin güncellenmesi için birkaç hafta bekleyip yeniden kontrol edin.

Eski ve ağır bir altyapı üzerinde bu iyileştirmeler zorlaşabilir. Webmilazım olarak web sitelerini Next.js ve React ile modern, hafif bir altyapıda kuruyor, hız optimizasyonunu ve mobil uyumluluğu standart paketlerimize dahil ediyoruz. Sitenizin durumunu birlikte değerlendirmek için iletişim sayfamız üzerinden bize ulaşabilirsiniz.