PageSpeed Insights Kullanımı: Hız Raporu Nasıl Okunur ve Sorunlar Nasıl Giderilir?

PageSpeed Insights (PSI), Google'ın bir sayfanın hem gerçek kullanıcı verilerine hem de laboratuvar koşullarındaki testine dayanan hız ve performans puanını ücretsiz olarak sunan araçtır. pagespeed.web.dev adresine herhangi bir URL girerek saniyeler içinde rapor alabilirsiniz.

Pek çok site sahibi PSI raporunu görünce "mobil puanım düşük" notunu alıp kapamayı tercih eder. Oysa rapordaki her başlık, belirli bir sorunun hem kaynağını hem de çözüm yolunu açık biçimde gösterir. Rapora doğru gözle bakıldığında nereden başlanması gerektiği netleşir.

⠀

PageSpeed Insights Skoru Nasıl Hesaplanır?

⠀

PSI skoru 0-100 arasındaki bir puandır:

• 0-49: Kötü (kırmızı)

• 50-89: Geliştirilmesi gerekiyor (turuncu)

• 90-100: İyi (yeşil)

⠀

Bu skor, açık kaynak kod analiz motoru olan Lighthouse tarafından hesaplanır. Ancak PSI yalnızca Lighthouse çıktısından ibaret değildir; aynı zamanda gerçek kullanıcıların Chrome tarayıcısından toplanan alan verilerini (Chrome User Experience Report — CrUX) de gösterir.

Rapordaki iki bölüm bu nedenle birbirinden farklıdır:

• Alan Verileri (Field Data): Gerçek kullanıcıların son 28 günde yaşadığı deneyimi yansıtır. Google'ın arama sıralama algoritmasında kullandığı veriler bunlardır.

• Laboratuvar Verileri (Lab Data): Kontrollü koşullarda, sabit ağ hızında simüle edilmiş test sonuçlarıdır. Sorun tespiti için kullanışlıdır ancak algoritmik değerlendirmede doğrudan kullanılmaz.

⠀

⠀

Core Web Vitals Metrikleri

⠀

Core Web Vitals, Google'ın sayfa deneyimini ölçmek için belirlediği üç temel metriktir.

LCP — Largest Contentful Paint (En Büyük İçeriksel Boyama)

⠀

LCP, sayfadaki en büyük içerik öğesinin (genellikle büyük bir görsel veya başlık) ne kadar sürede yüklendiğini ölçer.

• 2,5 saniye veya altı: İyi

• 2,5-4 saniye: Geliştirilmesi gerekiyor

• 4 saniyeden fazla: Zayıf

⠀

LCP sorunlarının en yaygın kaynakları şunlardır: sunucu yanıt süresinin uzun olması, büyük görsellerin sıkıştırılmamış olması, render-blocking (sayfa oluşturmayı geciktiren) CSS veya JavaScript dosyaları ve web fontlarının geç yüklenmesi.

CLS — Cumulative Layout Shift (Kümülatif Düzen Kayması)

⠀

CLS, sayfa yüklenirken öğelerin beklenmedik biçimde yer değiştirmesini ölçer. Bir içerik okurken sayfanın kayması ve tıklamak istediğiniz butonun başka bir yere gitmesi CLS'nin yüksek olduğunu gösterir.

• 0,1 veya altı: İyi

• 0,1-0,25: Geliştirilmesi gerekiyor

• 0,25'ten fazla: Zayıf

⠀

CLS'nin başlıca nedenleri: boyutu belirtilmemiş görseller, dinamik olarak eklenen içerikler ve web fontlarının geç yüklenerek metni kaydırması.

INP — Interaction to Next Paint (Etkileşimden Sonraki Boyamaya)

⠀

INP, 2024 itibarıyla eski FID (First Input Delay) metriğinin yerini almıştır. Kullanıcı bir butona tıkladığında ya da bir forma yazmaya başladığında sayfanın ne kadar hızlı tepki verdiğini ölçer.

• 200ms veya altı: İyi

• 200ms-500ms: Geliştirilmesi gerekiyor

• 500ms'den fazla: Zayıf

⠀

INP sorunları genellikle ağır JavaScript kodlarından, üçüncü taraf skriptlerden (canlı sohbet araçları, analitik scriptler) veya uzun süre çalışan ana iş parçacığı görevlerinden kaynaklanır.

⠀

PSI Raporunu Okumak: Fırsatlar ve Teşhisler

⠀

Lighthouse puanının altındaki "Fırsatlar" (Opportunities) bölümü, uygulandığında LCP veya genel yükleme süresini iyileştirebilecek önerileri listeler. Her satırın yanındaki tahmini kazanım süresi, neyin daha etkili olacağını belirlemenize yardımcı olur.

Sık karşılaşılan fırsatlar:

• Resmi boyutlandırma: Görselin sayfada göründüğünden çok daha büyük boyutta yüklendiğini gösterir. Görseli gerçek boyutunda kaydetmek fark yaratır.

• Görüntüleri verimli bir şekilde kodla: PNG veya JPEG yerine WebP ya da AVIF formatı kullanın.

• Metin sıkıştırmayı etkinleştir: Sunucunun gzip veya Brotli ile metin dosyalarını sıkıştırması gerektiğini gösterir.

• Kullanılmayan JavaScript'i azalt: Sayfada yüklenen ancak kullanılmayan kod miktarını gösterir.

⠀

"Teşhisler" (Diagnostics) bölümü ise doğrudan LCP süresini etkilemese de en iyi pratiklerden sapmaları listeler. Uzun ana iş parçacığı görevleri, büyük DOM boyutu ve önbellekleme politikası eksiklikleri bu kategoride yer alır.

⠀

Mobil ve Masaüstü Farkı

⠀

PSI varsayılan olarak önce mobil raporu gösterir. Mobil puanlar neredeyse her zaman masaüstü puanlarından düşüktür; bu, Lighthouse'un mobil testi daha yavaş bir ağ ve işlemci gücüyle simüle etmesinden kaynaklanır.

Aradaki fark çok büyükse öncelikle mobil tarafta düzeltme yapılması gerekir; çünkü Google, 2021'den bu yana masaüstü değil mobil versiyonu öncelikli dizine alır (mobile-first indexing). Sayfa hızı optimizasyonu için atılacak adımların büyük çoğunluğu hem mobil hem masaüstü skoru eş zamanlı iyileştirir.

⠀

LCP'yi İyileştirme: Pratik Adımlar

⠀

LCP'yi düşürmenin en etkili yolları şunlardır:

1. Görsel optimizasyonu: Sayfanın en büyük görselini WebP formatına dönüştürün ve boyutunu gerçek gösterim alanına göre ayarlayın. Görsele fetchpriority="high" ve loading="eager" öznitelikleri ekleyerek tarayıcıya öncelikli yüklenmesi gerektiğini bildirin.

2. Sunucu yanıt süresini kısaltma: TTFB (Time to First Byte — İlk Bayta Kadar Geçen Süre) 600ms'nin üzerindeyse sunucu tarafında önbellek (cache) yapılandırması veya CDN (içerik dağıtım ağı) kullanımı değerlendirilebilir.

3. Render-blocking kaynakları ortadan kaldırma: Kritik olmayan CSS dosyalarını media niteliğiyle koşullu yükleyin; kritik olmayan JavaScript dosyalarına defer veya async niteliği ekleyin.

4. Font yükleme optimizasyonu: Web fontlarına font-display: swap değeri ekleyin; bu sayede font yüklenene kadar sistem fontuyla metin görünür kalır, LCP metriği beklemez.

⠀

CLS'yi Düşürme: En Yaygın Sorunlar

⠀

Boyutu belirtilmemiş görseller: Her <img> etiketine width ve height özniteliklerini ekleyin. Tarayıcı sayfayı oluştururken görselin yerini önceden rezerve edebilsin, yüklendikten sonra kaymaya neden olmasın.

Reklam ve embed alanları: Reklam birimleri ve sosyal medya embed'leri genellikle geç yüklenip sayfayı iter. Bu alanlar için minimum yükseklik belirlemek CLS değerini önemli ölçüde düşürür.

Web fontları: Sistemde bulunmayan bir font yüklenirken metin önce yedek fontla görünür, ardından asıl fontla değiştirilir; bu yer değişikliği CLS'ye katkıda bulunur. font-display: optional değeri veya yerel font kullanımı bu sorunu azaltır.

Teknik SEO denetimlerinde PSI, Google Search Console Core Web Vitals raporuyla birlikte kullanıldığında hangי sayfaların önce ele alınması gerektiğini net biçimde gösterir. Blakfy olarak müşteri sitelerindeki hız analizlerini bu iki kaynağı birlikte değerlendirerek yapıyoruz; öncelikli müdahale noktalarını belirlemek için laboratuvar verileri değil, gerçek kullanıcı verileri esas alınır.

⠀

Sık Sorulan Sorular

⠀

PageSpeed Insights skoru kaç olmalı?

90 ve üzeri ideal hedeftir; ancak 75 ve üzeri puanlar çoğu sektörde rekabetçi bir konuma karşılık gelir. Asıl önemli olan mutlak skor değil, Core Web Vitals metriklerinin "İyi" eşiğinin altında kalıp kalmadığıdır.

PSI skoru ile gerçek kullanıcı deneyimi aynı mıdır?

Hayır. PSI'daki Lighthouse skoru kontrollü laboratuvar koşullarında hesaplanır; gerçek kullanıcılar farklı cihaz ve ağ koşullarında gezinir. Alan verileri (Field Data) bölümü, gerçek kullanıcı deneyimini yansıtan tek güvenilir kaynaktır ve arama algoritması bu verileri kullanır.

Her sayfayı ayrı ayrı test etmek gerekir mi?

Evet, çünkü her sayfa farklı içerik ve kaynak yükleme yapısına sahiptir. Ana sayfa, kategori sayfaları ve en yüksek trafikli içerik sayfaları öncelikli olarak test edilmelidir.

PSI skoru sıralamayı doğrudan etkiler mi?

Google, sıralama faktörü olarak laboratuvar skorunu değil, gerçek kullanıcılardan toplanan Core Web Vitals verilerini kullanır. PSI'daki alan verisi bölümünün "Yetersiz" veya "İyileştirme Gerekiyor" göstermesi, bir sıralama sinyali olarak olumsuz etki yaratabilir.