Kısaca
Site hızı hem Google sıralamasını hem satışı doğrudan etkiler. Google'ın Core Web Vitals ölçütlerinde iyi kabul edilen değerler: LCP 2,5 saniyenin, INP 200 milisaniyenin, CLS 0,1'in altında. Yavaşlığın çoğu beş kaynaktan gelir: büyük görseller, üçüncü taraf kodlar, yazı tipleri, yerleşim kaymaları ve yavaş sunucu.
Site hızı neden bu kadar önemli?
Ziyaretçi sayfanızın açılmasını beklerken aklında tek bir soru vardır: "Buna değer mi?" Ürün sayfası geç açıldığında, sepet adımı takıldığında ya da butona basıldıktan sonra bir şey olmadığında ziyaretçi sekmeyi kapatır ve büyük ihtimalle rakibinizin sitesine geçer.
Google da bu deneyimi ölçer. Core Web Vitals adı verilen ölçütler, sıralama sinyallerinden biridir:
| Ölçüt | Ne ölçer? | İyi değer |
|---|---|---|
| LCP | Sayfanın ana içeriğinin ne kadar sürede göründüğü | 2,5 sn altı |
| INP | Tıklama ve dokunmalara ne kadar hızlı tepki verildiği | 200 ms altı |
| CLS | Sayfa yüklenirken öğelerin ne kadar kaydığı | 0,1 altı |
Hızınızı nasıl ölçersiniz?
Ücretsiz iki araç yeterli: PageSpeed Insights ve Google Search Console'daki Core Web Vitals raporu. PageSpeed'de iki tür sonuç görürsünüz: gerçek kullanıcı verisi (sayfanın son 28 gündeki gerçek performansı) ve laboratuvar testi (o anki tek ölçüm). Kararlarınızı mümkünse gerçek kullanıcı verisine göre verin ve mutlaka mobil sonuçlara bakın; ziyaretçilerin çoğu oradan geliyor.
1. Sıkıştırılmamış, olduğundan büyük görseller
En sık gördüğümüz hata: telefonda 400 piksel genişliğinde gösterilen ürün fotoğrafının 4000 piksellik, 3 MB'lık orijinal hâliyle yüklenmesi.
- Görselleri WebP veya AVIF biçiminde sunun.
- Her ekran boyutu için uygun ölçüde görsel hazırlayın (
srcset). - Sayfanın altındaki görselleri gecikmeli yükleyin (
loading="lazy"), ama ilk ekrandaki ana görseli asla; o hemen yüklenmeli.
2. Üçüncü taraf kod yığını
Canlı destek balonu, iki farklı analiz aracı, üç reklam pikseli, ısı haritası, pop-up aracı… Her biri tek başına küçük görünür, ama toplamda sayfanın açılışını saniyelerce geciktirir ve tıklamalara geç tepki verilmesine yol açar.
- Kullanmadığınız araçların kodunu kaldırın.
- Kalanları asenkron yükleyin ve mümkünse çerez onayından sonra çalıştırın. Hem hız hem KVKK açısından doğrusu bu.
- Canlı destek gibi araçları sayfa açıldıktan birkaç saniye sonra ya da ilk etkileşimde yükleyin.
3. Yazı tipleri ve sayfayı bekleten dosyalar
Özel yazı tipleri markayı güzel gösterir ama yanlış yüklenirse metin saniyelerce görünmez. Yazı tipi dosyalarını font-display: swap ile yükleyin, yalnızca kullandığınız ağırlıkları ve Türkçe karakter setini ekleyin. Sayfanın ilk ekranı için gerekmeyen CSS ve JavaScript dosyalarının açılışı bekletmesine izin vermeyin.
4. Yerleşim kayması
Tam "Sepete ekle"ye basacakken üstte bir kampanya bandı belirir, buton aşağı kayar ve yanlış yere tıklarsınız. Bu hem sinir bozucudur hem de CLS puanını düşürür.
- Görsellere ve videolara genişlik ve yükseklik verin.
- Sonradan yüklenen bant, banner ve reklam alanları için baştan yer ayırın.
- Yazı tipi değişiminde metnin zıplamaması için benzer ölçülü bir yedek yazı tipi seçin.
5. Yavaş sunucu ve önbelleksiz sayfalar
Görseller ne kadar iyi olursa olsun, sunucu ilk cevabı geç veriyorsa her şey gecikir. Ucuz paylaşımlı barındırma, kapalı önbellek ve her ziyaretçide sayfanın baştan üretilmesi en yaygın sebepler.
- Bir CDN kullanın; dosyalar ziyaretçiye en yakın noktadan gelsin.
- Sayfa ve dosya önbelleğini açın.
- E-ticaret altyapınızın sunucu yanıt süresini (TTFB) düzenli kontrol edin.
Hızlı kontrol listesi
- PageSpeed Insights'ta ana sayfayı, bir kategori sayfasını ve bir ürün sayfasını mobilde test edin.
- En büyük 10 görseli bulun ve WebP'ye çevirin.
- Sitedeki tüm üçüncü taraf kodların listesini çıkarın, gereksizleri kaldırın.
- Görsellere ölçü verin, bantlar için yer ayırın.
- CDN'in ve önbelleğin açık olduğunu doğrulayın.
Teslim ettiğimiz sitelerde ilk günden bu ölçütleri hedefliyoruz, çünkü hız sonradan eklenen bir özellik değil, sitenin temelidir. Yeni bir e-ticaret sitesi planlıyorsanız e-ticaret kontrol listemize de göz atın.