Sitenizin hızını ölçmek istediğinizde ilk aklınıza gelen araç muhtemelen Google PageSpeed Insights'tır. Ücretsiz, hızlı ve Google'ın kendi geliştirdiği bir araç. Ama rapordaki sayılar tam olarak ne anlama geliyor? Site Analiz aracımız da Lighthouse motorunu kullanır ve AI destekli iyileştirme önerileri sunar.
90 puan iyi mi, kötü mü? Mobil ve masaüstü skorları neden farklı? Hangi iyileştirmelere öncelik vermelisiniz? PageSpeed Insights yüzeysel bir hız testi değil. Arka planda Google Lighthouse çalışır ve sitenizi 6 farklı metrikle değerlendirir.
PageSpeed Insights nedir?
Google'ın sunduğu ücretsiz bir web performans aracı. Bir URL girdiğinizde sitenizi hem mobil hem masaüstü cihazlarda test eder ve 0-100 arası bir performans skoru verir. Asıl değerli olan skordan çok, hangi kaynakların yavaşlattığını göstermesi.
Araç, Google Lighthouse motorunu kullanır. Chrome tarayıcısının içine gömülü bir denetim aracı. PageSpeed Insights'ı kullandığınızda Google'ın sunucularında Lighthouse çalıştırılır ve sonuçlar size sunulur. Kendi bilgisayarınızdan test etseniz bile sonuçlar Google'ın sunucu altyapısından gelir.
PageSpeed Insights iki tür veri gösterir: "Lab Data" (laboratuvar verisi) ve "Field Data" (alan verisi). Lab verisi Google'ın sunucularında yapılan kontrollü test. Field verisi ise Chrome kullanıcılarından toplanan gerçek dünya verileri. Sitenizde yeterli Chrome trafiği varsa field data bölümü görünür. Bu bölüm daha değerli çünkü gerçek kullanıcı deneyimini yansıtır.
Skorlar nasıl hesaplanır?
0-100 arası skor, 6 farklı metriğin ağırlıklı ortalaması. En ağır metrik LCP (Largest Contentful Paint) olup skorun %25'ini oluşturur. Ardından TBT (Total Blocking Time) %30, CLS (Cumulative Layout Shift) %15, FCP (First Contentful Paint) %10, SI (Speed Index) %10 ve TTI (Time to Interactive) %10 ağırlığa sahip.
Skor aralıkları: 90-100 yeşil (iyi), 50-89 turuncu (orta), 0-49 kırmızı (kötü). Çoğu site 50-70 aralığında skor alır. 90 üzeri almak zor çünkü hem sunucu yanıt süresi hem render-blocking kaynaklar hem de JavaScript yürütme süresi optimize edilmeli. Üstelik büyük CSS framework'leri veya üçüncü taraf scriptler varsa skor düşer.
Oysa 90 üzeri her zaman gerekli değil. E-ticaret sitelerinde ürün görselleri ağır olabilir, bu LCP'yi düşürür ama kullanıcı deneyimi kötü olmayabilir. Blog sitelerinde font yükleme CLS'ye neden olabilir ama okuma deneyimi etkilenmez.
Mobil ve masaüstü skorları farklı çünkü test koşulları farklı. Mobil test yavaş 4G bağlantı ve orta seviye telefon (Moto G4) simülasyonu ile yapılır. Masaüstü test hızlı bağlantı ve güçlü bilgisayar varsayar. Mobil skorunuz genellikle masaüstünden 20-30 puan düşük çıkar. Google mobil skoru daha önemli kabul eder çünkü arama trafiğinin %60'ından fazlası mobil cihazlardan gelir.
Core Web Vitals metrikleri
PageSpeed Insights raporunda en önemli bölüm Core Web Vitals. Google 2021'den beri bu 3 metriği sıralama faktörü olarak kullanır: LCP, FID ve CLS.
LCP (Largest Contentful Paint)
Sayfanın en büyük görsel öğesinin ne kadar sürede yüklendiğini ölçer. Genellikle hero görseli, video veya büyük metin bloğu. İdeal LCP değeri 2.5 saniyenin altında. 2.5-4 saniye arası orta, 4 saniyenin üzeri kötü.
LCP'yi iyileştirmek için görselleri optimize edin, sunucu yanıt süresini azaltın ve render-blocking kaynaklarını kaldırın. Hero görseliniz çok büyükse Resim Sıkıştırma aracımız ile WebP formatına dönüştürmek ve boyutunu küçültmek LCP'yi önemli ölçüde iyileştirebilir. Ama dikkat: aşırı sıkıştırma görsel kalitesini düşürür, özellikle ürün fotoğraflarında bu kullanıcı deneyimini kötüleştirir.
FID (First Input Delay)
Kullanıcının sayfayla ilk etkileşiminden (tıklama, dokunma) tarayıcının yanıt vermesine kadar geçen süre. İdeal FID değeri 100 milisaniyenin altında. 100-300 ms arası orta, 300 ms üzeri kötü.
FID sorunları genellikle ağır JavaScript kodlarından kaynaklanır. Ana thread meşgulse kullanıcı tıkladığında tarayıcı hemen yanıt veremez. JavaScript'i parçalara bölmek, gereksiz kütüphaneleri kaldırmak ve kod yürütme süresini azaltmak gerekir. Minify aracımız ile JavaScript dosyalarınızı küçültebilirsiniz. Örneğin jQuery yerine vanilla JavaScript kullanmak 30-40 KB tasarruf sağlar.
CLS (Cumulative Layout Shift)
Sayfanın yüklenirken ne kadar "zıpladığını" ölçer. Bir butona tıklamak üzereyken aniden reklam yüklenir ve buton aşağı kayarsa kötü CLS. İdeal CLS değeri 0.1'in altında. 0.1-0.25 arası orta, 0.25 üzeri kötü.
CLS'yi düzeltmek için tüm görsellere width ve height verin, font yükleme sırasında layout shift olmasın diye font-display: swap kullanın ve dinamik içerik için yer ayırın. Reklamlar ve gömülü içerikler CLS'nin en yaygın nedeni. Google AdSense kullanıyorsanız reklam alanına min-height vererek layout shift'i önleyebilirsiniz.
Diğer performans metrikleri
Core Web Vitals dışında PageSpeed Insights 3 metrik daha gösterir: FCP, SI ve TBT. Doğrudan sıralama faktörü değil ama kullanıcı deneyimini etkiler.
FCP (First Contentful Paint)
Sayfada ilk içeriğin (metin, görsel, SVG) ne zaman göründüğü. İdeal FCP 1.8 saniyenin altında. Kullanıcıya "sayfa yükleniyor" hissini verir. Beyaz ekran süresi uzunsa kullanıcı sayfayı terk edebilir. Özellikle mobilde 3G bağlantıda FCP 3 saniyeyi geçerse bounce rate %50'nin üzerine çıkar.
SI (Speed Index)
Sayfanın görsel olarak ne kadar hızlı dolduğunu ölçer. İdeal SI 3.4 saniyenin altında. FCP'den farklı çünkü sadece ilk içeriği değil tüm görsel yüklenme sürecini değerlendirir. Sayfanız yavaş yavaş yükleniyorsa SI yüksek çıkar. Lazy loading kullanıyorsanız SI düşer ama kullanıcı scroll edince görseller geç yüklenir, bu da deneyimi kötüleştirebilir.
TBT (Total Blocking Time)
FCP ile TTI arasında ana thread'in ne kadar süre bloke olduğunu ölçer. İdeal TBT 200 milisaniyenin altında. TBT yüksekse kullanıcı sayfayla etkileşime geçemez. JavaScript yürütme süresi uzunsa TBT artar. React veya Vue gibi framework'ler ilk yüklemede 300-500 ms TBT üretebilir.
Raporları nasıl okuyorsunuz?
PageSpeed Insights raporu 3 ana bölümden oluşur: Skorlar, Tanılar ve Fırsatlar. Fırsatlar bölümündeki her önerinin yanında süre tahmini var. "Görselleri optimize edin - 2.5 saniye kazanç" gibi. Bu tahminler her zaman doğru çıkmaz ama hangi optimizasyonlara öncelik vereceğinizi gösterir.
Tanılar bölümü daha teknik. "Render-blocking kaynaklar" tanısı hangi CSS ve JavaScript dosyalarının sayfanın ilk yüklenmesini engellediğini gösterir. Bu dosyaları async veya defer ile yüklemek performansı artırabilir. Ama dikkat: critical CSS'i defer yaparsanız sayfa ilk yüklemede stilsiz görünür.
PageSpeed Insights her testte farklı sonuçlar verebilir. Google'ın sunucularının yük durumu, ağ koşulları ve cache durumu etkiler. Tek bir teste güvenmeyin, 3-5 test yapıp ortalamasını alın. Skorunuz sürekli 50-60 arasında gidip geliyorsa gerçek skorunuz 55 civarında.
Mobil ve masaüstü farkları
PageSpeed Insights mobil ve masaüstü için ayrı skorlar verir. Mobil test Moto G4 telefon ve yavaş 4G bağlantı simülasyonu ile yapılır. Masaüstü test güçlü bilgisayar ve hızlı bağlantı varsayar. Mobil skorunuz genellikle 20-30 puan daha düşük çıkar.
Google mobil skoru daha önemli kabul eder çünkü arama trafiğinin %60'ından fazlası mobil cihazlardan gelir. Mobil skorunuz 50'nin altındaysa öncelikle mobil optimizasyona odaklanın. Masaüstü skoru 90 olsa bile mobil skoru 40 ise Google sizi mobil aramalarda düşük sıralayabilir.
Mobil optimizasyonun kritik adımları: Görselleri küçültün, JavaScript'i azaltın, sunucu yanıt süresini iyileştirin. Mobil cihazlar daha az işlem gücüne sahip olduğu için ağır JavaScript kütüphaneleri büyük performans kaybına neden olur. Örneğin Moment.js yerine Day.js kullanmak bundle boyutunu 67 KB'den 2 KB'ye düşürür.
Yaygın hatalar ve çözümleri
PageSpeed Insights kullanırken yapılan en yaygın hata skoru 100 yapmaya çalışmak. 100 puan almak çoğu site için gereksiz ve bazen kullanıcı deneyimini kötüleştirir. Tüm görselleri aşırı sıkıştırırsanız kalite düşer. Tüm JavaScript'i kaldırırsanız site işlevsiz hale gelir.
İkinci hata sadece PageSpeed Insights'a odaklanmak. PageSpeed Insights Google'ın sunucularından yapılan bir test. Gerçek kullanıcılarınızın deneyimi farklı olabilir. Google Search Console'daki Core Web Vitals raporunu da kontrol edin. Orada gerçek kullanıcı verilerini görürsünüz.
Üçüncü hata tüm önerileri uygulamaya çalışmak. Bazı öneriler uygulaması zor veya etkisi düşük. "Kullanılmayan CSS'i kaldırın" önerisi büyük CSS framework'leri kullanıyorsanız zor. Bunun yerine critical CSS tekniği kullanabilirsiniz. Ama critical CSS ekip için bakım yükü oluşturur, her sayfa için ayrı critical CSS çıkarmak gerekir.
PageSpeed Insights her zaman doğru olmayabilir. Bazen yanlış pozitif sonuçlar verir. Bir görselin boyutunu optimize ettiğinizi söyler ama görsel zaten optimize edilmiş. Bu durumda öneriye körü körüne uymayın, kendi testlerinizi yapın.
Chrome DevTools ile yerel test
PageSpeed Insights'ın yanı sıra Chrome DevTools'daki Lighthouse sekmesini de kullanabilirsiniz. PageSpeed Insights ile aynı motoru kullanır ama kendi bilgisayarınızdan test edersiniz. Avantajı localhost'ta test yapabilmeniz ve geliştirme aşamasında hızlı geri bildirim almanız.
Chrome DevTools'u açmak için F12'ye basın, Lighthouse sekmesine gidin ve "Analyze page load" butonuna tıklayın. Mobil veya masaüstü seçebilir, hangi kategorileri test edeceğinizi belirleyebilirsiniz. Test sonuçları PageSpeed Insights ile aynı metrikleri gösterir.
Dezavantajı bilgisayarınızın performansına bağlı olması. Güçlü bilgisayarda test ederseniz skorlar gerçekçi olmayabilir. Bu yüzden canlı siteyi test ederken PageSpeed Insights'ı tercih edin. Chrome DevTools'u geliştirme aşamasında kullanın, PageSpeed Insights'ı canlı site kontrolü için kullanın.
PageSpeed Insights site hızını ölçmek için güçlü bir araç ama tek başına yeterli değil. Raporları doğru okumak, hangi metriklerin önemli olduğunu bilmek gerekir. Skorunuzu 100 yapmaya çalışmak yerine gerçek kullanıcı verilerini takip edin ve sürekli test yapın.