Core Web Vitals, Google’ın sayfa deneyimini ölçmek için kullandığı üç temel metriktir: LCP (Largest Contentful Paint) sayfanın ana içeriğinin ne kadar hızlı yüklendiğini, INP (Interaction to Next Paint) sayfanın kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiğini, CLS (Cumulative Layout Shift) ise sayfa yüklenirken öğelerin ne kadar kaydığını ölçer. İyi bir sonuç için LCP 2,5 saniyenin, INP 200 milisaniyenin, CLS ise 0,1’in altında olmalıdır. Shopify mağazalarında bu metrikleri en çok etkileyen üç unsur temanın yapısı, yüklenen uygulamalar ve görsellerdir.
Bu rehberde Core Web Vitals metriklerini, Shopify’ın otomatik olarak yaptığı optimizasyonları, en sık görülen hız sorunlarını ve adım adım iyileştirme yöntemlerini anlatıyoruz.
Core Web Vitals metrikleri
Metrik | Neyi ölçer? | İyi | İyileştirilmeli | Kötü |
|---|---|---|---|---|
LCP | Ana içeriğin yüklenme süresi | ≤ 2,5 sn | 2,5–4 sn | > 4 sn |
INP | Etkileşimlere yanıt süresi | ≤ 200 ms | 200–500 ms | > 500 ms |
CLS | Görsel kayma miktarı | ≤ 0,1 | 0,1–0,25 | > 0,25 |
INP, Mart 2024’te eski metrik FID’in (First Input Delay) yerini aldı. FID yalnızca ilk etkileşimi ölçerken INP, sayfa boyunca tüm etkileşimleri değerlendirir.
Saha verisi ve laboratuvar verisi farkı
Saha verisi: Gerçek kullanıcıların Chrome tarayıcılarından toplanan veridir (Chrome UX Report). Google’ın sıralama sistemlerinde dikkate alınan veri budur. Search Console’daki Core Web Vitals raporu ve PageSpeed Insights’ın üst bölümü saha verisini gösterir.
Laboratuvar verisi: Lighthouse gibi araçların tek bir simülasyonla ürettiği veridir. Sorunları teşhis etmek için faydalıdır ama gerçek kullanıcı deneyimini tam yansıtmaz.
PageSpeed puanının düşük olması tek başına bir sorun değildir; asıl hedef, saha verisinde üç metriğin de “iyi” aralıkta olmasıdır.
Shopify’ın sizin için otomatik yaptıkları
Küresel CDN: Mağaza dosyaları ve görseller, kullanıcıya en yakın sunucudan sunulur.
Görsel optimizasyonu: Shopify, görselleri modern formatlarda ve farklı boyutlarda otomatik olarak sunabilir.
Barındırma ve ölçekleme: Sunucu altyapısı ve trafik artışları Shopify tarafından yönetilir.
Web performansı raporu: Shopify yönetim panelindeki performans raporu, mağazanızın gerçek kullanıcı verilerine dayalı Core Web Vitals değerlerini gösterir.
Bu altyapı sayesinde Shopify mağazalarında hız sorunlarının büyük kısmı sunucudan değil, tema, uygulama ve içerik tarafından kaynaklanır. Barındırma tarafını Shopify hosting yazımızda anlattık.
Shopify mağazalarında hızı en çok etkileyen sorunlar
1. Tema yapısı
Çok sayıda bölüm, animasyon ve özelliği aynı anda yükleyen temalar, kullanılmayan kodları da her sayfada yükler. Hazır temaların üzerine yapılan ağır özelleştirmeler de zamanla performansı düşürür. Tema seçimini ve hafif tema altyapısı yaklaşımını ücretli ve ücretsiz tema yazımızda anlattık.
2. Uygulamalar ve üçüncü taraf kodlar
Her uygulama mağazaya kendi JavaScript ve CSS dosyalarını ekleyebilir. Silinen uygulamaların tema koduna bıraktığı kalıntılar da sayfayı yavaşlatmaya devam eder. Pazarlama etiketleri, sohbet widget’ları ve yorum uygulamaları INP ve LCP’yi en çok etkileyen üçüncü taraf kodlar arasındadır.
3. Görseller
Büyük boyutlu, sıkıştırılmamış veya doğru boyutlandırılmamış görseller LCP’yi doğrudan uzatır. Boyutu belirtilmemiş görseller ise yüklendiklerinde sayfayı kaydırarak CLS’yi artırır.
LCP’yi iyileştirme
Ana görseli önceliklendirin. Ana sayfa ve ürün sayfasındaki ilk görsele lazy loading uygulamayın; mümkünse yüksek öncelikle yükleyin.
Doğru boyutlu görseller kullanın. Shopify’ın görsel filtreleriyle cihaza uygun boyutlarda (srcset) görsel sunun.
Kaydırıcıları (slider) azaltın. Ana sayfadaki büyük slider’lar genellikle LCP’nin en büyük sebebidir; tek ve güçlü bir görsel çoğu zaman daha iyi sonuç verir.
Yazı tiplerini optimize edin. Az sayıda yazı tipi ağırlığı kullanın ve yazı tiplerinin metni engellemeden yüklenmesini sağlayın.
INP’yi iyileştirme
Kullanılmayan uygulamaları kaldırın ve kalıntı kodları temizleyin.
Üçüncü taraf etiketleri azaltın. Google Tag Manager içindeki gereksiz etiketleri temizleyin; aynı işi yapan birden fazla takip kodu kullanmayın.
Ağır JavaScript işlemlerini erteleyin. Sohbet widget’ları ve pop-up’lar gibi kritik olmayan öğeleri sayfa etkileşime hazır olduktan sonra yükleyin.
Filtre ve varyant seçicilerini test edin. Koleksiyon filtreleri ve varyant değişiklikleri INP sorunlarının sık görüldüğü yerlerdir.
CLS’yi iyileştirme
Görsellere ve videolara boyut verin. Genişlik ve yükseklik bilgisi, tarayıcının görsel için önceden yer ayırmasını sağlar.
Dinamik bantları dikkatli kullanın. Sayfa yüklendikten sonra beliren duyuru bantları ve çerez pencereleri içeriği aşağı iter.
Yazı tipi değişimlerini dengeleyin. Yedek yazı tipiyle asıl yazı tipi arasındaki boyut farkı metin kaymasına yol açabilir.
Performansı nasıl ölçmelisiniz?
Search Console Core Web Vitals raporu: Sorunlu URL gruplarını gerçek kullanıcı verisiyle gösterir.
Shopify web performansı raporu: Mağazanıza özel Core Web Vitals değerlerini ve değişiklikler sonrası etkisini izlemenizi sağlar.
PageSpeed Insights: Tek bir sayfanın hem saha hem laboratuvar verisini gösterir.
Chrome DevTools: Performans sekmesiyle hangi kodun sayfayı yavaşlattığını ayrıntılı olarak inceleyebilirsiniz.
Değişikliklerin saha verisine yansıması 28 güne kadar sürebilir; çünkü raporlar son 28 günlük kullanıcı verisini kapsar.
Hız ve dönüşüm ilişkisi
Hızlı bir mağaza yalnızca SEO için değil, dönüşüm için de önemlidir. Özellikle mobil kullanıcılar yavaş yüklenen sayfaları hızla terk eder. Dönüşüm optimizasyonunun diğer alanlarını dönüşüm oranı yazımızda anlattık.
Sık sorulan sorular
PageSpeed puanım düşük, sıralamam düşer mi?
Google, sıralamada laboratuvar puanını değil, gerçek kullanıcılardan toplanan Core Web Vitals verisini dikkate alır. Ayrıca sayfa deneyimi, içerik kalitesine göre daha küçük bir etkendir. Yine de iyi değerler hem kullanıcı deneyimi hem dönüşüm için önemlidir.
Hız optimizasyonu uygulaması kurmalı mıyım?
Hız uygulamaları bazı durumlarda yardımcı olabilir, ancak çoğu sorun tema ve uygulama kaynaklıdır. Önce gereksiz uygulamaları ve kodları temizlemek, ardından ölçerek ilerlemek daha güvenilir sonuç verir.
Hangi tema daha hızlı?
Shopify’ın güncel temaları genellikle iyi bir performans temeli sunar. Asıl fark, temaya eklenen özelleştirmeler ve uygulamalardan kaynaklanır.
Mağazanızın hızını birlikte iyileştirelim
Core Web Vitals değerlerini iyileştirmek, hem arama görünürlüğünü hem dönüşüm oranını destekliyor. Shopify mağazanızın performansını birlikte incelemek isterseniz Shopify teknik destek sayfamızdan bize ulaşabilirsiniz.
