LCP, CLS ve INP nedir, nasıl ölçülür, nasıl iyileştirilir? Core Web Vitals metriklerinin sıralamaya ve satışa etkisini anlatan uygulamalı rehber.
Sayfa hızı uzun süre "olsa iyi olur" kategorisindeydi. Artık değil. Google, kullanıcı deneyimi sinyallerini sıralama faktörü olarak kullanıyor ve bu sinyallerin ölçüldüğü yer Core Web Vitals.
Ama teknik tarafa girmeden önce şunu netleştirelim: hız optimizasyonu Google için değil, ziyaretçi için yapılır. Google'ın bunu ölçüyor olması sadece işi kolaylaştırıyor.
Hızın etkisi soyut değil:
Son madde en çok gözden kaçanı: Google Ads kalite puanı açılış sayfası deneyimini dikkate alıyor. Yavaş site, aynı tıklama için daha fazla para ödemeniz demek.
Google'ın kullanıcı deneyimini ölçmek için kullandığı üç metrik. Her biri farklı bir sorunu yakalıyor.
Sayfadaki en büyük görsel öğenin ekranda belirdiği an. Ziyaretçinin "sayfa açıldı" hissettiği nokta.
LCP genellikle hero görselidir, bazen büyük bir başlıktır.
Sayfa yüklenirken içeriğin ne kadar zıpladığı. Okumaya başladığınız metnin aşağı kayması ya da tam tıklayacakken butonun yer değiştirmesi.
En sinir bozucu metrik budur; yanlış butona tıklatan şey genellikle CLS'tir.
Bir butona tıkladığınızda sayfanın tepki verme süresi. 2024'te FID metriğinin yerini aldı ve daha zorlayıcı bir ölçüm.
PageSpeed Insights (pagespeed.web.dev) en pratik başlangıç. URL'nizi girin, hem laboratuvar hem gerçek kullanıcı verisi görün.
Önemli ayrım: laboratuvar verisi simüle edilmiş bir testtir, anında sonuç verir. Saha verisi gerçek ziyaretçilerinizden toplanır ve asıl önemli olan budur. Sıralamaya etki eden saha verisidir.
Google Search Console'daki Core Web Vitals raporu, sitenizin tamamını sayfa grupları halinde gösterir. Hangi sayfa tipinin sorunlu olduğunu görmek için en iyi yer.
Bir uyarı: PageSpeed skoru ile Core Web Vitals aynı şey değil. Skor 100 üzerinden bir özet; asıl bakılacak olan üç metriğin kendisi.
Hero görselini optimize edin. En büyük kazanç burada. Görseli WebP veya AVIF formatına çevirin, ekran genişliğine göre farklı boyutlar sunun ve gereksiz büyük dosya yüklemeyin. 3000 piksel genişliğinde bir görseli 800 piksellik alanda göstermek en yaygın hata.
İlk ekrandaki görseli tembel yüklemeyin. Lazy loading faydalıdır ama hero görseline uygulanırsa LCP'yi doğrudan bozar. İlk ekranda görünen görsele öncelik verin.
Fontları self-host edin. Google Fonts'u CDN üzerinden çekmek ek bir bağlantı kurulumu demek. Fontları kendi sunucunuzdan sunun, sadece kullandığınız alt kümeyi yükleyin ve `font-display: swap` kullanın.
Sunucu yanıt süresini düşürün. Yavaş hosting hiçbir optimizasyonla telafi edilemez. Sunucu ilk baytı 600 ms'den geç gönderiyorsa önce burayı çözün.
Statik üretim kullanın. Sayfa her istekte yeniden üretilmek yerine önceden hazırlanabiliyorsa, sunucu tarafı gecikme neredeyse sıfırlanır.
Görsellere boyut verin. Her görselin genişlik ve yükseklik değeri belirtilsin. Böylece tarayıcı görsel yüklenmeden önce yerini ayırır. Tek başına en etkili CLS düzeltmesi budur.
Reklam ve gömülü içerik alanlarını önceden ayırın. Reklam, harita veya video gömülecek alanın yüksekliğini baştan tanımlayın.
Mevcut içeriğin üstüne bir şey eklemeyin. Sayfa yüklendikten sonra beliren duyuru çubukları ve çerez banner'ları içeriği aşağı itiyorsa CLS bozulur. Bunları içeriğin üstüne binen katman olarak konumlandırın.
Font değişimini yumuşatın. Yedek font ile asıl font arasındaki boyut farkı metnin zıplamasına yol açar. Benzer ölçülü bir yedek font seçmek bu etkiyi azaltır.
JavaScript miktarını azaltın. INP'nin ana sebebi, tarayıcının meşgul olması. Kullanılmayan kütüphaneleri kaldırın; tek bir tarih biçimlendirmesi için ağır bir paket yüklemeyin.
Kodu bölün. Tüm JavaScript'i her sayfaya yüklemeyin. Lightbox, harita ya da grafik gibi ağır bileşenleri yalnızca gerektiğinde yükleyin.
Üçüncü taraf script'lerini erteleyin. Canlı destek widget'ı, analytics, pazarlama pikselleri — bunlar sayfanın ilk yüklenmesinde kritik değil. Sonradan yüklenecek şekilde ayarlayın.
Uzun süren işleri parçalayın. Büyük hesaplamaları küçük parçalara bölerek tarayıcının nefes almasına izin verin.
Çoğu sitede sayfa ağırlığının büyük bölümünü görseller oluşturuyor. Bu yüzden görsel optimizasyonu, hız çalışmasında en yüksek getiriyi veren tek kalem.
Doğru formatı seçin. JPEG ve PNG artık varsayılan olmamalı. WebP çoğu tarayıcıda destekleniyor ve aynı görsel kalitesinde belirgin şekilde küçük dosya üretiyor. AVIF daha da iyi sıkıştırıyor.
Birden fazla boyut üretin. Telefonla bakan birine masaüstü için hazırlanmış büyük görseli göndermeyin. Aynı görselin farklı genişliklerde sürümlerini üretip tarayıcının uygun olanı seçmesini sağlayın.
Gerçek gösterim boyutuna göre üretin. Kart görseli ekranda 400 piksel genişlikte görünüyorsa, 2400 piksellik dosya yüklemenin hiçbir faydası yok. Retina ekranlar için iki katı yeterli.
İlk ekranda görünmeyenleri tembel yükleyin. Sayfanın altındaki görseller ancak kaydırıldığında yüklensin. Ama ilk ekrandakileri asla tembel yüklemeyin.
Dekoratif görselleri CSS'e taşıyın. Arka plan desenleri, gradyanlar ve basit şekiller için görsel dosyası kullanmayın; CSS ya da SVG ile üretin.
Pratik hedef: hero görseli 200 KB'ın, kart görselleri 80 KB'ın altında kalsın. Bu sınırların üzerindeyseniz, LCP değerinizi düzeltmenin en hızlı yolu buradan geçiyor.
Skoru kovalamak, deneyimi unutmak. 100 skorlu ama içeriği zayıf bir site kimseye bir şey kazandırmaz.
Sadece ana sayfayı ölçmek. Ziyaretçilerin çoğu ana sayfaya değil, iç sayfalara iniyor. Hizmet, ürün ve blog detay sayfalarını da ölçün.
Masaüstünde test etmek. Sıralamayı belirleyen mobil deneyim. Masaüstü skoru neredeyse her zaman daha iyi çıkar ve sizi yanıltır.
Eklentiyle çözmeye çalışmak. "Hız optimizasyonu" eklentileri bazı kazanımlar sağlar ama yapısal sorunu çözmez. Bazen de birbiriyle çakışıp yeni sorun üretir.
Kurduğumuz projelerde hedeflediğimiz mobil değerler:
Bunlar ulaşılabilir hedefler. Mevcut sitenizde bu değerlerin çok uzağındaysanız, sorun genellikle tekil bir ayar değil yapısal bir tercih — ağır bir tema, kontrolsüz eklenti yükü ya da optimize edilmemiş görsel kütüphanesi.
Bazen iyileştirme yerine yenileme daha mantıklı. Şu durumlarda optimizasyonun getirisi sınırlı kalıyor:
Bu noktada yapılacak optimizasyon çalışması, yenileme maliyetine yaklaşabiliyor. Karar için web sitesi yenileme ne zaman gerekir yazımıza bakabilirsiniz.
Core Web Vitals üç basit soruyu ölçüyor: Sayfa hızlı açıldı mı (LCP)? İçerik zıpladı mı (CLS)? Tıklayınca tepki verdi mi (INP)?
Bu üç sorunun cevabı hem ziyaretçi memnuniyetini hem arama sıralamanızı doğrudan etkiliyor. İyi haber şu: çoğu sitede en büyük kazanç, birkaç temel düzeltmeden geliyor — görsel optimizasyonu, görsellere boyut verilmesi ve gereksiz script'lerin kaldırılması.
Sitenizin mevcut durumunu ölçüp ne yapılması gerektiğini konuşmak isterseniz bize yazın; ücretsiz bir performans denetimi yapıp raporunu paylaşıyoruz.
Core Web Vitals ölçümlerini iyileştiren, gerçek kullanıcı deneyimini hızlandıran optimizasyon.
Eski sitenizi modern, hızlı ve dönüşüm odaklı bir yapıya kavuşturun.
Firmanızın dijital kimliğini en iyi şekilde yansıtan, hızlı ve SEO uyumlu kurumsal web siteleri.
E-ticarette satışı düşüren 7 yaygın hata: kargo maliyetinin gizlenmesi, zorunlu üyelik, eksik ürün bilgisi, ETBİS ihmali ve iade sürecinin belirsizliği.
Sitenizi yenilemeniz gerektiğini gösteren 9 somut sinyal, yenileme ile iyileştirme arasındaki fark ve SEO değerlerini kaybetmeden yenileme yöntemi.
Google işletme profili optimizasyonu, NAP tutarlılığı, yorum yönetimi ve ilçe bazlı içerik: yerel aramalarda üst sıralara çıkmanın adım adım rehberi.
Ücretsiz ön görüşmede ihtiyacınızı dinliyor, size uygun kapsamı ve net bir fiyat aralığını aynı gün paylaşıyoruz.
Çerez tercihleriniz
Siteyi geliştirmek için isteğe bağlı analiz çerezleri kullanıyoruz. Reddederseniz hiçbir ölçüm script'i yüklenmez; site aynı şekilde çalışır. Ayrıntılar için Çerez Politikası.