Web Sitesi Hızı Neden Önemli? Core Web Vitals Rehberi

Bir sayfanın açılmasını beklediğiniz o birkaç saniye, ziyaretçi açısından düşündüğünüzden çok daha uzundur. Ekran boş kaldıkça, butonlar tıklamaya geç tepki verdikçe ya da okuduğunuz metin bir anda aşağı kaydıkça sabır azalır ve geri tuşu cazip hale gelir. Hız bu nedenle teknik bir ayrıntı değil, doğrudan kullanıcı deneyimi ve iş sonucu meselesidir.

Google da bu deneyimi ölçmek için Core Web Vitals adını verdiği üç temel ölçüt kullanır. Bu yazıda hızın neden önemli olduğunu, LCP, INP ve CLS ölçütlerinin ne anlattığını, bunları nasıl ölçeceğinizi ve her biri için hangi iyileştirmelerin işe yaradığını adım adım anlatıyoruz. Teknik ekibiniz olmasa bile sorunun nerede olduğunu anlamanıza yetecek bir çerçeve sunmayı amaçlıyoruz.

Hız neden bu kadar önemli?

Hızın etkisi tek bir yerde değil, ziyaretçinin siteyle kurduğu ilişkinin her aşamasında hissedilir.

Kullanıcı deneyimi ve güven

Yavaş açılan bir site, ziyaretçide “bu işletme işini ciddiye almıyor” hissi uyandırabilir. Özellikle mobil bağlantıda gezinen biri için her ekstra bekleme, sayfadan ayrılmak için bir bahanedir.

Dönüşümler

Teklif formu, sepet ve ödeme adımı gibi kritik sayfalarda yaşanan gecikmeler doğrudan kayıp anlamına gelir. Ziyaretçi butona bastığında bir şey olmuyorsa ya ikinci kez basar ya da vazgeçer.

Arama görünürlüğü

Google, sayfa deneyimiyle ilgili sinyalleri sıralama sistemlerinde dikkate aldığını açıklıyor. Bununla birlikte içeriğin alakası ve kalitesi her zaman önce gelir; hız tek başına üst sıralar getirmez ama benzer kalitedeki sayfalar arasında fark yaratabilir ve ziyaretçinin sitede kalmasını kolaylaştırır.

Reklam verimliliği

Reklam için ödeme yaptığınız her tıklama bir açılış sayfasına gelir. Sayfa geç açılırsa ziyaretçi içeriği görmeden ayrılabilir. Google Ads’te açılış sayfası deneyimi, kalite puanını oluşturan bileşenlerden biridir.

Core Web Vitals nedir?

Core Web Vitals, gerçek kullanıcıların bir sayfayı nasıl deneyimlediğini üç açıdan ölçer: yükleme, etkileşime yanıt verme ve görsel kararlılık.

• LCP (Largest Contentful Paint): Sayfadaki en büyük görsel ya da metin bloğunun ekranda görünme süresidir. Ziyaretçinin “sayfa açıldı” hissini temsil eder. Google’ın eşiğine göre 2,5 saniye ve altı iyi, 4 saniyenin üzeri zayıf kabul edilir.
• INP (Interaction to Next Paint): Ziyaretçinin tıklama, dokunma ve klavye etkileşimlerine sayfanın ne kadar hızlı görsel karşılık verdiğini ölçer. 200 milisaniye ve altı iyi, 500 milisaniyenin üzeri zayıf sayılır. INP, Mart 2024’te FID ölçütünün yerini almıştır.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken ya da kullanılırken içeriğin beklenmedik biçimde ne kadar kaydığını ölçer. 0,1 ve altı iyi, 0,25’in üzeri zayıf olarak değerlendirilir.

Bu değerlendirme tek bir ziyarete göre değil, sayfa yüklemelerinin 75. yüzdelik dilimine göre yapılır. Yani ziyaretçilerinizin büyük çoğunluğunun iyi bir deneyim yaşaması hedeflenir. Mobil ve masaüstü sonuçlar ayrı ayrı değerlendirilir.

Hız nasıl ölçülür? Saha verisi ve laboratuvar verisi

Hız ölçümünde iki tür veri vardır ve ikisini karıştırmak sık yapılan bir hatadır.

Saha verisi, sitenizi ziyaret eden gerçek Chrome kullanıcılarından toplanan verilerdir. PageSpeed Insights raporunun üst bölümünde ve Google Search Console’daki Core Web Vitals raporunda bu veriyi görürsünüz. Core Web Vitals değerlendirmesi bu veriye dayanır. Trafiği az olan sayfalarda yeterli saha verisi bulunmayabilir.

Laboratuvar verisi ise Lighthouse gibi araçların sayfayı belirli bir cihaz ve bağlantı koşulunda simüle ederek ürettiği sonuçlardır. Sorunların nedenini bulmak için çok faydalıdır ama gerçek kullanıcı deneyiminin birebir karşılığı değildir. Lighthouse’un verdiği 0-100 arası performans puanı da Core Web Vitals’ın kendisi değildir.

Ölçüm yaparken şunlara dikkat edin:

• Yalnızca ana sayfayı değil; ürün, kategori, blog ve form sayfaları gibi önemli şablonları da test edin.
• Önce mobil sonuçlara bakın; sorunlar genellikle orada daha belirgindir.
• INP gerçek etkileşim gerektirdiği için laboratuvarda doğrudan ölçülemez. Lighthouse bunun yerine benzer sorunlara işaret eden Total Blocking Time (TBT) değerini gösterir.
• Tek bir ölçüme göre karar vermeyin; birkaç kez test edip eğilime bakın.

Hangi sayfalardan başlamalı?

Her sayfayı aynı anda iyileştirmeye çalışmak yerine önceliklendirme yapın. İşe en çok ziyaret alan sayfalarla, reklam trafiğinin indiği açılış sayfalarıyla ve form ya da satın alma gibi dönüşümün gerçekleştiği adımlarla başlayın. Sitelerin büyük kısmı şablonlarla çalıştığı için bir ürün sayfası şablonunda yapılan iyileştirme, aynı şablonu kullanan tüm sayfaları birden etkiler. Search Console’daki Core Web Vitals raporu da sorunlu adresleri benzer sayfa grupları halinde gösterdiği için hangi şablondan başlamanız gerektiğini anlamanıza yardımcı olur.

LCP’yi iyileştirmek: Ana içerik hızla görünsün

LCP öğesi çoğu sayfada büyük bir kapak görseli, ana başlık ya da bir video kapağıdır. Bu öğenin hızlı görünmesi için:

• Sunucu yanıt süresini kısaltın. Yetersiz barındırma, önbelleğin kullanılmaması ve ağır veritabanı sorguları her şeyi geciktirir. Sayfa önbelleği ve içerik dağıtım ağı (CDN) çoğu sitede belirgin fark yaratır.
• Görselleri optimize edin. WebP veya AVIF gibi modern biçimler kullanın, görselleri gösterilecekleri boyutta sunun ve cihaza göre farklı boyutlar için srcset tanımlayın.
• LCP görselini geç yüklemeye bırakmayın. Görselleri sonradan yükleme (lazy loading) ekranın altındaki içerikler için faydalıdır; ancak sayfanın en üstündeki ana görselde gecikmeye neden olur. Bu görsele fetchpriority="high" vermek tarayıcının onu öncelikli indirmesini sağlar.
• Oluşturmayı engelleyen kaynakları azaltın. Kritik CSS’i öne alın, sayfanın ilk görünümünde gerekmeyen JavaScript dosyalarını erteleyin.
• Yazı tiplerini akıllıca yükleyin. Kullanılan yazı tipi ailesi ve ağırlık sayısını sınırlayın, ana yazı tipini önceden yükleyin ve font-display ayarıyla metnin beklemeden görünmesini sağlayın.
• Ağır slaytlardan kaçının. Ana sayfanın en üstündeki çok görselli kaydırmalı alanlar çoğu zaman hem yavaşlatır hem de az ilgi görür.

INP’yi iyileştirmek: Tıklamalar anında karşılık bulsun

Ziyaretçi bir menüyü açtığında, bir filtreyi seçtiğinde ya da “Sepete ekle” butonuna bastığında sayfanın hemen tepki vermesi gerekir. INP sorunlarının kaynağı neredeyse her zaman tarayıcının ana iş parçacığını meşgul eden JavaScript kodudur.

• Uzun görevleri bölün. Tek seferde çalışan ağır kodlar tarayıcıyı kilitler. Bu işler küçük parçalara ayrıldığında tarayıcı arada kullanıcıya yanıt verebilir.
• Kullanılmayan JavaScript’i kaldırın. Eski eklentiler, artık kullanılmayan kütüphaneler ve her sayfada yüklenen ama yalnızca birinde gereken kodlar ayıklanmalıdır.
• Üçüncü taraf betiklerini denetleyin. Canlı destek pencereleri, birden fazla analiz ve reklam etiketi, ısı haritası ve test araçları zamanla birikir. Her birinin gerçekten gerekli olup olmadığını düzenli olarak sorgulayın.
• Önce görsel geri bildirim verin. Butona basıldığında bir yükleniyor durumu ya da renk değişimi hemen gösterilmeli, ağır işlem arka planda tamamlanmalıdır.
• Sayfa yapısını sade tutun. Aşırı büyük ve iç içe geçmiş HTML yapıları her etkileşimde tarayıcının daha fazla iş yapmasına neden olur.

CLS’yi iyileştirmek: Sayfa yerinde dursun

Tam bir bağlantıya tıklayacakken içeriğin kayması ve yanlış yere dokunmak, ziyaretçiyi en çok rahatsız eden deneyimlerden biridir. Düzen kaymasını azaltmak için:

• Görsellere ve videolara genişlik ve yükseklik değerleri ya da aspect-ratio tanımlayın; böylece tarayıcı yeri önceden ayırır.
• Reklam alanları, gömülü videolar, haritalar ve sosyal medya yerleştirmeleri için sabit alan bırakın.
• Çerez bildirimi ya da duyuru çubuğu gibi sonradan eklenen öğeleri içeriği aşağı itecek biçimde değil, sayfanın üzerinde açılacak şekilde tasarlayın.
• Web yazı tipi yüklenirken metnin boyutu değişiyorsa, yedek yazı tipini ölçü olarak ana yazı tipine yaklaştırın.
• Animasyonlarda öğenin konumunu değiştiren özellikler yerine transform kullanın.

Kalıcı hız için bir çalışma düzeni

Hız bir kez düzeltilip unutulacak bir konu değildir. Yeni eklentiler, büyük görseller ve eklenen her yeni etiket zamanla siteyi yeniden ağırlaştırır. Hızı korumak için basit bir düzen kurun:

• Yeni bir eklenti ya da üçüncü taraf betiği eklemeden önce performansa etkisini değerlendirin.
• İçerik ekibi için görsel yükleme kuralları belirleyin ya da görselleri otomatik optimize eden bir yapı kullanın.
• Search Console’daki Core Web Vitals raporunu ayda bir kontrol edin.
• Tema veya altyapı güncellemelerinden sonra önemli sayfaları yeniden test edin.
• Kampanya dönemlerinden önce, en çok trafik alacak sayfaları öncelikli olarak gözden geçirin.

Hız, teknik SEO’nun yalnızca bir parçasıdır. Taranabilirlik, indeksleme ve yönlendirmeler gibi diğer başlıklar için teknik SEO kontrol listemize göz atabilirsiniz. Online satış yapıyorsanız ürün ve kategori sayfalarının hızı daha da kritik hale gelir; bu konuda e-ticaret sitesi kurarken dikkat edilmesi gerekenler yazımız da yol gösterici olabilir.

Özetle

Web sitesi hızı; kullanıcı deneyimini, dönüşümleri, reklam verimliliğini ve arama görünürlüğünü birlikte etkiler. Core Web Vitals bu deneyimi üç ölçütle değerlendirir: ana içeriğin ne kadar hızlı göründüğü (LCP), etkileşimlere ne kadar hızlı yanıt verildiği (INP) ve sayfanın ne kadar kararlı durduğu (CLS). Doğru ölçüm, sorunun kaynağını bulmanın ilk adımıdır; iyileştirmeler ise çoğu zaman görseller, sunucu ve JavaScript üzerinde yoğunlaşır.

Sitenizin performansını birlikte incelemek ve önceliklendirilmiş bir iyileştirme planı çıkarmak isterseniz web tasarım ve yazılım hizmetimize göz atabilirsiniz. Hızı arama görünürlüğüyle birlikte ele almak istiyorsanız SEO hizmetlerimiz de bu çalışmanın doğal tamamlayıcısıdır.