Google, 2018'den beri site hızını resmi sıralama faktörü olarak kullanıyor. Mobil aramalar için de aynı kural geçerli. Yavaş yüklenen siteler alt sıralara düşer, hızlı siteler üst sıralara çıkar.
Ama "hızlı site" tam olarak ne anlama geliyor? Sayfa yükleme süresi tek başına yeterli değil. Google, Core Web Vitals adı verilen üç temel metriği ölçer: LCP, FID ve CLS. Yavaş site yüksek bounce rate getirir, bu da Google'a "kullanıcılar memnun değil" sinyali gönderir.
Hız neden bu kadar kritik?
3 saniyeden uzun yüklenen sitelerin %53'ü terk ediliyor. Mobilde oran daha yüksek. Amazon'un testlerinde her 100 milisaniyelik gecikme %1 gelir kaybına neden olmuş. Google'ın kendi verilerinde 0.5 saniyelik gecikme %20 trafik düşüşü yaratmış.
Hız sadece sıralama faktörü değil. CTR ve dwell time gibi dolaylı metrikleri de etkiliyor. Kullanıcı hızlı siteyi tercih eder, daha fazla tıklama alır, üst sıralara çıkar. Döngü böyle işler.
Core Web Vitals: Üç kritik metrik
Google 2021'de Core Web Vitals'ı tanıttı: LCP (Largest Contentful Paint), FID (First Input Delay) ve CLS (Cumulative Layout Shift).
LCP sayfanın en büyük içerik öğesinin yüklenme süresini ölçer. İdeal değer 2.5 saniyenin altı. Genellikle hero görseli veya ana başlık. Yavaşsa kullanıcı "sayfa yükleniyor mu?" diye bekler. Ama dikkat: lazy loading hero görselde kullanılırsa LCP doğrudan bozulur. İlk ekran görselleri hemen yüklenmeli.
FID kullanıcının ilk tıklamasından tarayıcının yanıt vermesine kadar geçen süreyi ölçer. İdeal 100 milisaniyenin altı. JavaScript ağırsa FID artar. Özellikle React, Vue gibi framework'ler bundle boyutunu şişirdiğinde sorun çıkar. Code splitting burada kritik.
CLS beklenmedik düzen kaymalarını ölçer. İdeal 0.1'in altı. Okumaya başladınız, reklam yüklendi, metin aşağı kaydı. Çözüm: her img etiketinde width ve height attribute'ları olmalı. Tarayıcı yer ayırır, kayma olmaz.
Google Search Console'da "Core Web Vitals" raporu gerçek kullanıcı verilerine dayalı. PageSpeed Insights lab verisi, Search Console field verisi. Field verisi daha güvenilir çünkü gerçek cihaz, gerçek bağlantı, gerçek kullanıcı davranışı.
Hangi faktörler hızı etkiler?
Sunucu yanıt süresi (TTFB) ilk faktör. Ucuz paylaşımlı hosting genellikle yavaş. VPS veya bulut hosting daha hızlı yanıt verir. TTFB 600 milisaniyenin altında olmalı - ama bu blog için. E-ticaret sitesi 300 milisaniyeyi hedeflemeli çünkü veritabanı sorguları var.
Görsel boyutları kritik. 5 MB'lık JPEG mobil bağlantıda 10+ saniye sürer. WebP formatı %25-35 daha küçük. Lazy loading ekran dışındaki görselleri geciktirir. Ama hero görselde kullanmayın, LCP bozulur. Srcset ile tarayıcıya doğru boyutu seçtirin: masaüstü 1920px, mobil 768px yeterli.
CSS ve JavaScript render-blocking kaynak olabilir. Tarayıcı bu dosyaları indirip işleyene kadar sayfayı göstermez. Minify ile dosya boyutunu %30-40 azaltabilirsiniz. Critical CSS tekniği ile ilk ekran CSS'ini inline ekleyin. Ama dikkat: çok büyük tek dosya da sorun yaratır. 100KB'ın üstü birden fazla dosyaya bölünmeli.
Üçüncü parti scriptler yavaşlatıcı. Google Analytics, reklam ağları, sosyal medya widget'ları. Her script ek HTTP isteği. Async veya defer kullanın. Gereksiz scriptleri kaldırın. Özellikle chat widget'ları ağır. Kullanıcı sayfada 10 saniye kaldıktan sonra yükleyin.
Önbellekleme tekrar ziyaretlerde hızı artırır. Tarayıcı cache, sunucu cache, CDN cache. Htaccess dosyasında Cache-Control başlıklarını ayarlayın. Statik dosyalar için 1 yıl, HTML için 1 saat. Ama cache invalidation stratejisi olmalı. Dosya adına version ekleyin: style.v2.css.
Mobil ve masaüstü: Farklı dünyalar
Mobil cihazlar daha yavaş işlemciye ve daha zayıf internet bağlantısına sahip. Google PageSpeed Insights'ta mobil ve masaüstü skorları ayrı gösterilir. Mobil skor genellikle daha düşük çıkar. Neden? Çünkü 4G bağlantı 100 Mbps fiber değil. CPU throttling var. Pil tasarrufu modu performansı düşürür.
Google mobil-first indexing kullanıyor. Sitenizin mobil versiyonunu indeksliyor. Masaüstü hızlı ama mobil yavaşsa sıralama mobil performansa göre belirlenir. Responsive tasarım yeterli değil. Mobilde gereksiz kaynakları yüklememek gerekir.
Masaüstünde 1920px genişliğinde görsel kullanıyorsanız mobilde 768px yeterli. Srcset ve sizes attribute'ları ile tarayıcıya doğru boyutu seçtirin. AMP (Accelerated Mobile Pages) çok hızlı ama kısıtlayıcı. JavaScript sınırlı, tasarım esnekliği az. Haber siteleri için iyi, e-ticaret için değil.
Hızı nasıl ölçersiniz?
Google PageSpeed Insights en yaygın araç. URL giriyorsunuz, hem mobil hem masaüstü için skor veriyor. 0-49 kötü, 50-89 orta, 90-100 iyi. Skora takılmayın, metriklere bakın. LCP, FID, CLS değerleri önemli. 95 skor ama LCP 4 saniyeyse sorun var.
Google Search Console'da "Core Web Vitals" raporu sitenizin tüm sayfaları için toplu durum gösterir. Hangi sayfalar yavaş, hangileri hızlı görebilirsiniz. Gerçek kullanıcı verilerine dayalı, bu yüzden daha güvenilir. PageSpeed Insights lab verisi, Search Console field verisi.
Lighthouse Chrome DevTools'un içinde. F12'ye basın, Lighthouse sekmesini açın, analiz edin. Yerel olarak çalışır. Geliştirme aşamasında test etmek için ideal. Canlıya çıkmadan önce sorunları yakalarsınız.
Hızlı site için öncelik sırası
İlk adım görselleri optimize etmek. WebP formatına dönüştürün, boyutları küçültün, lazy loading ekleyin. Görseller sayfa boyutunun %50-70'ini oluşturur. Buradan başlarsanız en hızlı kazancı alırsınız. Resim Sıkıştırma aracımız kalite kaybı olmadan %70'e kadar küçültür.
CSS ve JavaScript dosyalarını minify edin. Boşluklar, yorumlar, gereksiz karakterler kaldırılır. Dosya boyutu %30-40 azalır. Minify aracımız ile CSS, JavaScript ve HTML dosyalarınızı küçültebilirsiniz. Birden fazla dosyayı birleştirerek HTTP istek sayısını azaltın. Çok büyük tek dosya da sorun yaratır, 100KB'ın üstü bölün.
Gzip veya Brotli sıkıştırma kullanın. Sunucu dosyaları sıkıştırarak gönderir, tarayıcı açar. Metin tabanlı dosyalarda %70'e varan küçülme sağlar. Htaccess dosyasında birkaç satır kod yeterli.
CDN kullanın. Statik dosyalarınız dünya çapında dağıtılmış sunucularda saklanır. Kullanıcı en yakın sunucudan dosyayı indirir. Cloudflare ücretsiz plan sunuyor. Ama CDN cache invalidation stratejisi olmalı. Dosya güncellediğinizde eski versiyon 24 saat daha sunulabilir.
Önbellekleme politikası belirleyin. Cache-Control başlığında max-age değerini ayarlayın. Statik dosyalar için 1 yıl, HTML için 1 saat. Gereksiz pluginleri kaldırın. WordPress sitelerinde her plugin ek CSS, JS ve veritabanı sorgusu. Sadece gerçekten ihtiyacınız olanları kullanın.
Yaygın hatalar
Hero görselde lazy loading kullanmak LCP'yi doğrudan bozar. İlk ekranda görünen görseller hemen yüklenmeli. Lazy loading sadece ekran dışı için.
Tüm sayfada aynı boyutta görsel kullanmak verimsiz. Küçük thumbnail için 2000px genişliğinde görsel gereksiz. Srcset ile tarayıcıya seçenek sunun: 320px, 768px, 1920px.
Görsellere width ve height vermemek CLS sorununa yol açar. Tarayıcı yer ayıramaz, görsel yüklenince sayfa kayar. Her img etiketinde width ve height olmalı.
Üçüncü parti scriptleri kontrolsüz kullanmak. Google Analytics, Facebook Pixel, chat widget'ı, reklam ağları toplandığında sayfa ağırlaşır. Özellikle chat widget'ları ağır. Kullanıcı 10 saniye kaldıktan sonra yükleyin.
Hız ve sıralama ilişkisi
Site hızı tek başına sizi ilk sıraya taşımaz. İçerik kalitesi, backlink profili, kullanıcı deneyimi gibi yüzlerce faktör var. Diğer faktörler eşitse hızlı site kazanır. Google'ın açıklamasına göre "tie-breaker" görevi görür. Rekabetçi anahtar kelimelerde bu fark belirleyici.
Dolaylı etki daha önemli. Hızlı site daha düşük bounce rate, daha yüksek dwell time, daha fazla sayfa görüntüleme. Bu metrikler kullanıcı memnuniyetini gösterir, Google bunları sıralamada dikkate alır.
Mobil aramalar için etki daha belirgin. Mobil kullanıcılar daha sabırsız, bağlantı daha yavaş. Google mobil-first indexing kullandığı için bu etki giderek artıyor. E-ticaret siteleri için kritik: her 100 milisaniyelik gecikme %1 gelir kaybı.
Sayfa tiplerine göre öncelikler
Blog yazıları daha az hassas. Kullanıcı içerik okumaya gelmiş, birkaç saniye bekleyebilir. Yine de 3 saniyenin altında yüklenmeli. Görseller optimize edilmeli, gereksiz scriptler kaldırılmalı.
Ürün sayfaları çok hassas. Yavaş sayfa kayıp satış. Görseller yüksek kalitede ama optimize edilmiş olmalı. Lazy loading dikkatli kullanılmalı. Ana sayfa sitenizin vitrini. İlk izlenim önemli. Hero bölümü hızlı yüklenmeli, LCP 2 saniyenin altında olmalı. Ağır slider'lar performansı düşürür.
Kategori ve listeleme sayfaları çok sayıda görsel içerir. Lazy loading burada işe yarar. İlk ekranda 10-20 ürün gösteriyorsanız sadece onları yükleyin, kullanıcı kaydırdıkça diğerleri yüklensin. Haber siteleri anlık içerik sunar. AMP bu tür siteler için iyi çalışır. Alternatif olarak minimal tasarım ve agresif önbellekleme.
Site Analiz aracımız ile Core Web Vitals metriklerinizi ölçün, sorunları tespit edin ve düzeltin. Google Lighthouse motorunu kullanır, AI destekli iyileştirme önerileri sunar.