Core Web Vitals, bir sayfanın gerçek kullanıcılar tarafından nasıl hissedildiğini ölçmenin Google’ın bir yoludur. Çevrimiçi mağazalar için bu durum iki kat önemlidir: Google’ın sayfa deneyimi sinyallerinin bir parçasıdır ve daha da önemlisi, yavaş ve titrek sayfalar satış kaybına yol açar.
İyi haber: e-ticaret sitelerinde, aynı birkaç sorun çoğu başarısızlığa neden oluyor. Bu kılavuz, her metriği mağaza terimleriyle açıklar ve nasıl düzeltileceğini gösterir.
Üç metrik ve hedefleri
| Metrik | Ne ölçer | “İyi” eşiği |
|---|---|---|
| LCP – En Büyük İçerik Boyama | Ana içeriğin (genellikle ürün resmi veya kahraman afişi) ne kadar hızlı göründüğü | ≤ 2.5 s |
| INP – Son Boyama için Etkileşim | Sayfanın dokunuşlara ve tıklamalara ne kadar hızlı yanıt verdiği | ≤ 200 ms |
| CLS – Kümülatif Yerleşim Kayması | Yüklenirken düzen ne kadar sıçrar | ≤ 0.1 |
Google, bunları gerçek ziyaretlerin %75’lik diliminde değerlendirir. Bu, dört ziyaretçiden üçünün sadece hızlı ofis bilgisayarınız değil, iyi bir deneyime ihtiyaç duyduğu anlamına gelir.
INP, Mart 2024’te Temel Web Vitali olarak İlk Girdi Gecikmesi (FID) yerine geçti. FID’den geçen birçok mağaza artık INP altında başarısız oluyor, çünkü INP yalnızca ilk etkileşimi değil, her etkileşimi ölçer.
Gerçek verilerinizi nerede bulabilirsiniz
- Google Search Console → Core Web Vitals raporu: gerçek Chrome kullanıcılarına dayanan sorunlu URL grupları
- PageSpeed Insights: tek bir URL için alan verileri ve laboratuvar teşhisleri
- CrUX panosu: zaman içindeki geçmiş
- Kendi gerçek kullanıcı izleme (RUM) sisteminiz:
web-vitalsJavaScript kütüphanesi verileri GA4 veya başka bir araca gönderebilir
Laboratuvar araçlarını (Lighthouse) nedenleri bulmak için kullanın, ancak başarıyı saha verileriyle değerlendirin.
Ürün ve kategori sayfalarında LCP’yi düzeltme
Bir ürün sayfasında, LCP öğesi genellikle ana ürün resmidir. Kategori sayfalarında ise genellikle bir afiş veya ilk ürün resimleri olur.
Yaygın nedenler:
- Ana resim tembel yükleniyor.
- Görüntü çok büyük veya eski bir formatta.
- Görüntü JavaScript (kaydırıcılar ve galeriler) tarafından yüklenir.
- Yavaş sunucu yanıtı (yüksek TTFB)
- Render-engelleyici CSS ve fontlar
Düzeltmeler:
- LCP resmini asla tembel yüklemeyin. Üzerinde
loading="eager"vefetchpriority="high"kullanın. - Doğru
srcsetvesizesile WebP veya AVIF sunun. - İlk galeri resmini düz HTML olarak render edin, ardından kaydırıcının devralmasına izin verin.
- Tam sayfa önbelleklemesi ile TTFB’yi düzeltin (Varnish, bir CDN veya platformunuzun önbelleği).
- Ana web fontunu önceden yükleyin veya
font-display: swapkullanın.
INP’yi Düzeltmek: JavaScript Sorunu
INP sorunları neredeyse her zaman ana iş parçacığında çok fazla JavaScript çalışmasından kaynaklanır.
Mağazalarda yaygın nedenler:
- Ağır temalar (örneğin Magento Luma, şişkin WordPress sayfa oluşturucuları)
- Birçok etiket yöneticisi betiği: analiz, reklam pikselleri, ısı haritaları, sohbet widget’ları, A/B testi
- Ürün seçenekleri seçicileri ve tüm sayfayı yeniden render eden filtreler
- Büyük üçüncü taraf inceleme ve öneri widget’ları
Düzeltmeler:
- Etiket yöneticinizi denetleyin. Kimsenin kullanmadığı etiketleri kaldırın. Kritik olmayan etiketleri kullanıcı etkileşiminden sonra veya boşta iken yükleyin.
- Gecikmeli sohbet widget’ları, kullanıcı kaydırma yaptığında veya bir sohbet butonuna tıkladığında yüklenir.
- Uzun görevleri bölün. Geliştiriciler, tıklamaların daha hızlı işlenmesi için ana iş parçacığına geçiş yapabilirler.
- Temanın kendisi sorun olduğunda daha hafif bir frontend seçin. Magento’da, Hyvä’ya geçmek genellikle en büyük INP kazancı sağlar. Benim Luma’dan Hyvä’ya geçiş rehberime bakın.
CLS’yi Düzeltme: Sayfanın Zıplamasını Durdurma
Yaygın nedenler:
- Genişlik ve yükseklik olmadan resimler
- Çerez banner’ları ve promosyon çubukları içeriği aşağı itiyor
- Yazı tiplerinin değiştirilmesi ve metin boyutunun değiştirilmesi
- Geç yüklenen inceleme yıldızları, rozetler veya “aynı zamanda hoşunuza gidebilir” blokları
Düzeltmeler:
- Her zaman resimlerde
widthveheight(veyaaspect-ratio) ayarlarını yapın. - Çerez bannerlarını sayfayı itmek yerine üst katmanlar olarak gösterin.
- Dinamik bloklar için minimum yükseklikte alan ayırın.
- Eşleşen metriklerle yazı tipi yedeklemeleri kullanın.
Şablona göre önceliklendirin, URL’ye göre değil
Bir mağaza binlerce URL’ye sahip olabilir, ancak yalnızca birkaç şablona: anasayfa, kategori, ürün, arama, sepet, CMS. Şablonu düzeltirseniz, onu kullanan her URL’yi düzeltmiş olursunuz. Genellikle en fazla organik trafiği alan şablondan başlayın, bu genellikle kategori veya ürün sayfalarıdır.
Core Web Vitals’ın gelirle bağlantısı nasıl?
Hız sadece bir SEO konusu değildir. Daha hızlı sayfalar genellikle daha fazla görüntülenen sayfa ve daha az terk edilen oturum anlamına gelir. Kendi mağazanız için bunu kanıtlamak adına, analitiklerinizde dönüşüm oranını ve hemen çıkma oranını cihaz ve sayfa hızı grubu bazında, çalışma öncesi ve sonrası karşılaştırın.
Sıkça sorulan sorular
Core Web Vitals doğrudan sıralamaları etkiler mi?
Onlar, Google’ın sayfa deneyimi sinyallerinin bir parçasıdır. İçerik alaka düzeyi daha önemlidir, ancak rakipler yakın olduğunda, daha iyi bir deneyim yardımcı olur ve her zaman dönüşümü artırır.
Neden PageSpeed Insights her seferinde farklı bir puan gösteriyor?
Laboratuvar puanı bir simülasyondur ve değişkenlik gösterir. Üstteki alan verileri (gerçek kullanıcılardan) Google’ın Core Web Vitals için kullandığı verilerdir.
Search Console iyileşmelerini ne zaman gösterir?
Alan verileri, 28 günlük bir döngüye dayanmaktadır, bu nedenle bir düzeltmeden sonra raporun tam olarak yansıtması için yaklaşık dört hafta bekleyin.
Mağazanızın Core Web Vitals’ı geçmesini mi istiyorsunuz?
Magento, WooCommerce ve Shopify mağazalarında LCP görüntülerinden etiket yöneticisi temizliğine kadar Core Web Vitals’ı denetliyor ve düzeltiyorum. teknik SEO hizmetimi veya denetim talep et kısmına göz at.