PageSpeed Insight Nedir? Nasıl Kullanılır?

PageSpeed Insight, Google tarafından sunulan bir web performans analiz aracıdır. Web sitelerinin hızını, kullanıcı deneyimini ve teknik optimizasyon düzeyini ölçer.

Sayfa URL’sini analiz ederek hem masaüstü hem de mobil cihazlar için performans puanları verir. Geliştiricilere hız artırıcı teknik öneriler sunar. Bu sayede site sahipleri sayfa yüklenme süresini azaltabilir, Core Web Vitals metriklerini iyileştirebilir ve SEO sıralamasını yükseltebilir.

PageSpeed Insight nedir ve nasıl çalışır?

PageSpeed Insight, Google’ın web sayfalarının performansını ölçmek için geliştirdiği ücretsiz bir analiz aracıdır. Araç, bir URL’yi analiz ederek masaüstü ve mobil cihazlar için ayrı ayrı performans puanları üretir. Bu puanlar, kullanıcı deneyimini etkileyen temel teknik faktörlere göre hesaplanır.

PageSpeed Insight hangi teknolojileri kullanır?

PageSpeed Insight, analiz sürecinde Google Lighthouse motorunu kullanır. Bu motor, sayfa yüklenme hızını etkileyen çeşitli metrikleri simüle ederek test eder:

• First Contentful Paint (FCP): İlk görsel öğenin yüklenme süresi
• Largest Contentful Paint (LCP): En büyük içerik bloğunun yüklenme süresi
• Cumulative Layout Shift (CLS): Sayfa içi görsel kaymaların oranı
• Time to Interactive (TTI): Sayfanın tamamen etkileşime geçme süresi
• Speed Index: Görsel içeriğin ekrana ne kadar hızlı yansıdığı

PageSpeed Insight verileri nasıl elde eder?

Araç, iki farklı veri kaynağından yararlanır:

Veri Türü	Açıklama
Alan Verisi (Field Data)	Gerçek kullanıcı deneyimlerinden elde edilen veriler. Chrome UX Report üzerinden alınır.
Laboratuvar Verisi (Lab Data)	Lighthouse ile simüle edilen tarayıcı testlerinden elde edilir. Gerçek kullanıcı verisi içermez.

Bu iki veri türü birlikte analiz edildiğinde, hem kullanıcıların yaşadığı deneyimi hem de potansiyel iyileştirme alanlarını görmek mümkündür.

PageSpeed Insight nasıl çalışır adım adım?

1. Kullanıcı, analiz etmek istediği URL’yi PageSpeed Insight’a girer.
2. Araç, ilgili sayfayı tarayıp Lighthouse testi başlatır.
3. Performans puanı 0 ile 100 arasında hesaplanır.
4. Sayfa, mobil ve masaüstü olarak ayrı ayrı değerlendirilir.
5. Araç, performansı artırmak için öneriler sunar.

Renk kodlu sistem, kullanıcıya hız durumunu hızlıca anlamasını sağlar:

• 0–49 (Kırmızı): Zayıf performans
• 50–89 (Turuncu): Orta seviye performans
• 90–100 (Yeşil): İyi performans

PageSpeed Insight hangi verileri analiz eder?

PageSpeed Insight, web sayfalarının hız, kullanılabilirlik ve görsel istikrarla ilgili toplam 6 ana metriğini analiz eder. Bu metrikler, Google’ın Core Web Vitals çerçevesiyle uyumludur. Hem kullanıcı deneyimini hem de teknik performansı değerlendirir.

Analiz edilen temel performans metrikleri:

Metrik Adı	Ne Ölçer?	İdeal Değer
First Contentful Paint (FCP)	İlk içerik öğesinin ne zaman göründüğünü	< 1.8 saniye
Largest Contentful Paint (LCP)	En büyük görselin yüklenme süresi	< 2.5 saniye
Cumulative Layout Shift (CLS)	Sayfa içi öğe kaymalarının oranı	< 0.1
Time to Interactive (TTI)	Sayfanın tamamen etkileşime geçme süresi	< 3.8 saniye
Total Blocking Time (TBT)	Etkileşim öncesi toplam bloklama süresi	< 200 ms
Speed Index	Sayfa içeriğinin ne kadar hızlı görüntülendiği	< 4.3 saniye

PageSpeed Insight bu metrikleri nasıl sunar?

• Her metrik için ayrı puanlama yapar.
• Mobil ve masaüstü verilerini ayırarak gösterir.
• Gecikmeye neden olan spesifik kod bloklarını ve kaynakları belirtir.
• Her metrik için neden önemli olduğunu açıklar.

Kullanıcı deneyimini etkileyen ek veriler:

PageSpeed Insight ayrıca aşağıdaki teknik verileri analiz eder:

• HTTP istek sayısı
• Sunucu yanıt süresi
• JavaScript yükleme süresi
• Kritik CSS ve render engelleyici kaynaklar
• Resim formatı ve boyut optimizasyonu
• Önbellek politikaları

Bu veriler, sadece sayfa hızını değil, kullanıcı davranışını da etkileyen unsurlardır. Örneğin yüksek CLS değeri, kullanıcının tıklama deneyimini bozar ve hemen çıkma oranını artırır.

Performans puanı neye göre hesaplanır?

PageSpeed Insight performans puanı, Lighthouse algoritmasıyla hesaplanan 6 metrikten elde edilen ağırlıklı ortalamadır. Bu puan, kullanıcı deneyimini doğrudan etkileyen teknik performans göstergelerine göre belirlenir.

Performans puanını oluşturan metriklerin ağırlıkları:

Metrik	Ağırlık (%)
Largest Contentful Paint (LCP)	25%
Total Blocking Time (TBT)	30%
Cumulative Layout Shift (CLS)	15%
Speed Index	10%
Time to Interactive (TTI)	10%
First Contentful Paint (FCP)	10%

Not: Lighthouse v10 itibarıyla TBT, LCP ve CLS en kritik metriklerdir.

Performans puanı nasıl hesaplanır?

1. Sayfa laboratuvar ortamında test edilir.
2. Her metrik için belirlenen değerler alınır.
3. Bu değerler, yukarıdaki ağırlıklara göre çarpılır.
4. Sonuçlar toplanır ve 0–100 arasında normalize edilir.
5. Elde edilen sayı, performans puanı olarak gösterilir.

Puan aralıkları ve anlamları:

• 90–100 (Yeşil): Hızlı ve kullanıcı dostu sayfa
• 50–89 (Turuncu): Geliştirilmesi gereken performans
• 0–49 (Kırmızı): Yavaş ve sorunlu sayfa deneyimi

Puan neden %100 olamayabilir?

• Üçüncü parti script’ler (örn. reklam kodları)
• Render engelleyici kaynaklar
• Optimize edilmemiş görseller
• Yetersiz sunucu yanıt süresi

PageSpeed Insight puanı, yalnızca hız değil; etkileşim süresi, görsel stabilite ve işleme verimliliğini de içerdiği için her sayfa için %100 puan hedefi gerçekçi olmayabilir.

PageSpeed Insight mobil ve masaüstü farkı nedir?

PageSpeed Insight, mobil ve masaüstü cihazlar için ayrı test ortamları ve performans kriterleri kullanır. Bu ayrım, cihaz donanımı, bağlantı hızı ve ekran boyutları gibi faktörlerin kullanıcı deneyimine etkisini ölçmek içindir.

Mobil ve masaüstü farkı nasıl çalışır?

Özellik	Mobil	Masaüstü
Bağlantı Profili	4G (Simüle Edilmiş Yavaş Ağ)	Kablolu, yüksek hızlı bağlantı
Cihaz Performansı	Orta seviye Android cihaz	Modern, yüksek performanslı bilgisayar
Render Motoru	Mobil tarayıcı emülasyonu	Masaüstü tarayıcı emülasyonu
Performans Eşiği	Daha düşük tolerans	Daha yüksek tolerans
Core Web Vitals Etkisi	Kullanıcı davranışı daha çok etkilenir	Etki sınırlıdır

Mobil test neden daha zordur?

• Mobil cihazlar düşük işlem gücüne sahiptir.
• Ağ gecikmeleri mobilde daha yaygındır.
• Görsel öğelerin optimizasyonu mobilde daha kritiktir.
• Sayfa düzeni mobilde daha fazla kayma (CLS) riski taşır.

Örnek: Aynı sayfa masaüstünde 92 puan alırken mobilde 68 puan alabilir. Bu fark, genellikle render engelleyici JS, büyük görseller ve yavaş sunucu yanıtlarından kaynaklanır.

Hangi versiyon sıralamayı daha çok etkiler?

Mobil versiyonun puanı SEO açısından daha kritiktir. Google, mobile-first indexing uygulamasına göre sıralamaları öncelikle mobil performansa göre belirler.

Core Web Vitals metrikleri PageSpeed Insight’ta nasıl ölçülür?

PageSpeed Insight, Core Web Vitals metriklerini hem laboratuvar hem de alan verileri üzerinden ölçer. Bu metrikler, kullanıcı deneyimini belirleyen 3 temel performans göstergesidir: LCP, FID/INP ve CLS.

Hangi metrikler Core Web Vitals kapsamına girer?

Metrik Adı	Açılımı	Ne Ölçer?	İdeal Değer
LCP	Largest Contentful Paint	En büyük içerik öğesinin yüklenme süresi	< 2.5 saniye
INP (2024 sonrası FID yerine)	Interaction to Next Paint	Kullanıcının etkileşimine verilen tepki süresi	< 200 milisaniye
CLS	Cumulative Layout Shift	Sayfa içi kaymaların görsel istikrarı nasıl etkilediği	< 0.1

Not: Google, 2024 itibarıyla FID (First Input Delay) yerine INP (Interaction to Next Paint) metriğini kullanıyor.

PageSpeed Insight bu metrikleri nasıl ölçer?

• Alan verisi (Field Data): Gerçek kullanıcıların Chrome üzerinden topladığı anonim veriler. Kaynak: Chrome UX Report (CrUX)
• Laboratuvar verisi (Lab Data): Lighthouse aracıyla simüle edilen test sonuçları.

Veri Türü	Kaynak	Kullanım Amacı
Field Data	Gerçek kullanıcı davranışı	Sayfanın gerçek dünyadaki performansını ölçmek
Lab Data	Yapay test ortamı	Sayfa içi sorunları teknik olarak tespit etmek

Metrikler nasıl yorumlanır?

• Her metrik için “İyi”, “Geliştirilmeli”, “Zayıf” sınıflandırması yapılır.
• Renk kodları: Yeşil (iyi), Turuncu (orta), Kırmızı (kötü)
• Detaylı açıklamalarla hangi kaynakların metrikleri kötü etkilediği gösterilir.

Geliştirme için ne önerilir?

• LCP’yi iyileştirmek için görseller optimize edilmeli ve kritik içerik öncelikli yüklenmeli.
• INP için JavaScript dosyaları azaltılmalı, etkileşim gecikmeleri minimuma indirilmeli.
• CLS’yi düşürmek için genişlik/yükseklik tanımlamaları yapılmalı ve dinamik öğeler kontrol altına alınmalı.

PageSpeed Insight raporundaki renk kodları ne anlama gelir?

PageSpeed Insight renk kodları, test edilen sayfanın performans düzeyini görsel olarak özetler. Bu kodlar, kullanıcıya hızlı yorum yapma ve sorun seviyesini anlama imkânı tanır.

Renk kodlarının anlamı nedir?

Renk	Puan Aralığı	Anlamı	Kullanıcı Deneyimi
🟥 Kırmızı	0 – 49	Zayıf performans	Sayfa yavaş, kullanıcı memnuniyeti düşük
🟧 Turuncu	50 – 89	Orta seviye, geliştirme gerekli	Kabul edilebilir ama sorunlu
🟩 Yeşil	90 – 100	İyi performans, kullanıcı dostu	Hızlı ve stabil deneyim

Hangi alanlarda bu renkler kullanılır?

• Genel Performans Puanı (mobil ve masaüstü)
• Core Web Vitals metrikleri (LCP, INP, CLS)
• Her metrik için ayrı renk kodu gösterimi
• Fırsatlar ve teşhis önerileri (düşük puanlı alanlar kırmızıyla vurgulanır)

Renkler SEO için neden önemlidir?

Google sıralama algoritması, mobil kullanıcı deneyimini doğrudan değerlendirir. Kırmızı alanlar kullanıcı memnuniyetini düşürür, hemen çıkma oranını artırır ve sıralamaya zarar verir. Bu nedenle renk kodları sadece görsel bir uyarı değil, doğrudan SEO’ya etkili göstergelerdir.

Örnek: LCP değeri 3.5 saniye ise PageSpeed Insight bu metriği kırmızı renkle işaretler ve iyileştirme önerisi sunar.

PageSpeed Insight ile sayfa hızı nasıl artırılır?

PageSpeed Insight, sayfa hızını artırmak için spesifik ve uygulanabilir teknik öneriler sunar. Bu öneriler, tarayıcıdaki darboğazları ortadan kaldırarak hem performansı hem de kullanıcı deneyimini iyileştirir.

Sayfa hızını artırmak için yapılması gerekenler:

1. Görselleri optimize et
   • WebP formatına geç
   • Genişlik/yükseklik tanımla
   • Lazy-load (tembel yükleme) kullan
2. JavaScript’i küçült ve ertele
   • Render-blocking script’leri kaldır
   • Gereksiz JS kütüphanelerini çıkar
   • async ve defer etiketleriyle yükleme zamanlamasını kontrol et
3. Kritik CSS’i inline olarak yükle
   • Yukarıda görünen alan için kritik CSS tanımla
   • Geri kalan CSS’i ertelenmiş şekilde yükle
4. Tarayıcı önbellekleme (cache) yapılandır
   • Uzun süreli cache-control başlıkları ekle
   • CDN kullanarak kaynakları hızlı dağıt
5. Sunucu yanıt süresini düşür
   • Daha hızlı hosting kullan
   • PHP, MySQL ve diğer backend teknolojilerini optimize et
6. Kaynakları sıkıştır
   • Gzip veya Brotli ile dosya boyutlarını küçült
   • HTML, CSS ve JS dosyalarını minify et
7. Third-party script kullanımını azalt
   • Chat botlar, sosyal medya widget’ları, analiz araçları gibi 3. parti kodları sınırla
   • Gerekmeyenleri sayfadan tamamen çıkar

PageSpeed Insight önerileri nerede görünür?

• “Opportunities (Fırsatlar)”: Performansı artırabilecek öneriler
• “Diagnostics (Teşhis)”: En iyi uygulamalardan sapmaları gösterir
• “Passed Audits (Başarılı Kontroller)”: Zaten iyi durumda olan öğeler

En yüksek etkiyi yaratan optimizasyonlar:

Optimizasyon Türü	Ortalama Performans Artışı (%)
Görsel optimizasyonu	%25–35
JavaScript küçültme	%10–20
Sunucu yanıt süresi azaltımı	%15–30
Önbellekleme stratejileri	%10–25

Hangi faktörler PageSpeed puanını düşürür?

PageSpeed puanını düşüren faktörler, sayfa yüklenme süresini artıran ve tarayıcı performansını zorlayan unsurlardır. Bu sorunlar hem mobil hem de masaüstü performansını olumsuz etkiler.

En sık puan düşüren faktörler:

1. Render engelleyici kaynaklar
   • CSS ve JS dosyalarının head bölümünde bloklayıcı şekilde yüklenmesi
2. Büyük ve optimize edilmemiş görseller
   • WebP formatı yerine JPEG/PNG kullanımı
   • Ölçeklenmemiş yüksek çözünürlüklü medya
3. Sunucu yanıt süresinin uzun olması (TTFB)
   • Yavaş barındırma altyapısı veya kötü yapılandırılmış veritabanı
4. Aşırı veya yavaş third-party script’ler
   • Reklam, canlı sohbet, sosyal medya embed’leri
   • GTM üzerinden yüklenen gereksiz etiketler
5. CSS ve JS dosyalarının küçültülmemesi (Minify eksikliği)
   • Gereksiz boşluklar, açıklamalar ve tekrar eden kod blokları
6. Yetersiz önbellekleme stratejisi
   • cache-control ve expires başlıklarının eksikliği
   • CDN kullanılmaması
7. Görsel kaymalar (CLS) ve geç yüklenen içerikler
   • Genişlik/yükseklik tanımlanmamış medya öğeleri
   • Dinamik reklam veya iframe’ler
8. Etkin olmayan lazy-load kullanımı
   • Tüm görsellerin anında yüklenmesi yerine görünür alan odaklı yükleme eksikliği
9. Fazla DOM öğesi (Ağır HTML yapısı)
   • Karmaşık sayfa yapıları, iç içe geçmiş elemanlar

Örnek: Yaygın bir senaryo

Bir e-ticaret sayfasında 2 MB’lık banner görseli, 7 farklı third-party script ve sunucu yanıt süresi 1.2 saniyeye ulaşıyorsa, bu sayfa mobilde 45, masaüstünde ise 72 puan alabilir.

Lighthouse ve PageSpeed Insight arasındaki fark nedir?

Lighthouse, açık kaynaklı bir web denetim aracıdır; PageSpeed Insight ise Lighthouse motorunu kullanan, Google tarafından sunulan web tabanlı analiz platformudur. Aralarındaki fark, erişim yöntemi, veri türü ve kullanım senaryolarında ortaya çıkar.

Temel farklar tablosu:

Özellik	Lighthouse	PageSpeed Insight
Geliştirici	Google	Google
Erişim Yolu	Chrome DevTools, CLI, Node.js, API	Web arayüzü (https://pagespeed.web.dev)
Veri Kaynağı	Yalnızca laboratuvar verisi (lab data)	Laboratuvar + Alan verisi (CrUX)
Kapsam	Performans, Erişilebilirlik, SEO, PWA, UX	Sadece performans ve UX
Kullanım Alanı	Geliştirici taraflı detaylı analiz	Hızlı genel değerlendirme + öneriler
Özelleştirme	Rapor yapılandırılabilir	Sabit yapı, özelleştirilemez
Offline Kullanım	Evet	Hayır
API Desteği	Evet (Node.js)	Evet (resmi API ile)

Hangi araç ne zaman kullanılmalı?

• PageSpeed Insight, genel sağlık taraması ve SEO amaçlı site hız testi için uygundur.
• Lighthouse, geliştiricilerin lokal olarak detaylı performans, erişilebilirlik ve kod optimizasyonu analizi yapması için idealdir.

Örnek: Bir geliştirici, Lighthouse ile özel senaryoları test edip DOM analizi yapabilirken; SEO uzmanı PageSpeed Insight’ı kullanarak hızlı metrik kontrolü ve müşteri raporlaması yapar.

PageSpeed Insight SEO’yu nasıl etkiler?

PageSpeed Insight doğrudan SEO sıralaması üzerinde etkili değildir; ancak ölçtüğü metrikler, Google’ın sıralama algoritmasında yer alan Core Web Vitals ile birebir örtüşür. Bu nedenle PageSpeed skorları, SEO performansının teknik bir yansımasıdır.

Yine de burada dikkat edilmesi gereken kısım gerçek kullanıcı verisidir. Lab verileri size ön fikir sunarken gerçek kullanıcı verilerini baz alarak optimizasyonları yapmanızda fayda var.

SEO üzerinde etkili olan alanlar:

1. Core Web Vitals metrikleri
   • Google, LCP, INP ve CLS metriklerini sıralama faktörü olarak resmi olarak kabul eder.
   • PageSpeed Insight bu metrikleri birebir ölçer.
2. Mobil performans
   • Mobile-first indexing uygulandığı için mobil PageSpeed skoru düşük olan siteler, mobil sıralamada geriler.
3. Kullanıcı deneyimi (UX)
   • Hızlı yüklenen sayfalar, hemen çıkma oranını düşürür ve etkileşimi artırır.
   • Google Analytics ile bu davranışlar izlenerek sıralamaya dolaylı etki yapar.
4. Tarama bütçesi (Crawl Budget)
   • Yavaş sunucular ve büyük dosyalar, Googlebot’un tarama sıklığını azaltabilir.
   • Sayfa hızının artması, daha fazla içeriğin indekslenmesini sağlar.

SEO için ideal PageSpeed hedefleri:

Metrik	SEO Dostu Değer
LCP	< 2.5 saniye
INP	< 200 ms
CLS	< 0.1
Mobil Puan	≥ 90
Masaüstü Puan	≥ 90

Sık yapılan SEO hataları:

• PageSpeed skorunu %100 yapmak için kullanıcı deneyimini bozan görsel ve içerik kaldırmaları
• AMP sayfalarının sadece hız için zorunlu kılınması
• JavaScript’i tamamen devre dışı bırakmak

Gerçek SEO başarısı, hız, içerik kalitesi ve kullanıcı sinyalleri arasında dengeli bir optimizasyon gerektirir.

PageSpeed Insight API nasıl kullanılır?

PageSpeed Insight API, geliştiricilerin site performansını otomatik olarak analiz edebilmesini sağlar. API, JSON formatında veri döndürür ve sürekli performans izleme sistemlerine entegre edilebilir.

API kullanmak için adımlar:

1. Google API Console’dan API anahtarı al
   • https://console.cloud.google.com adresinden yeni bir proje oluşturun.
   • “PageSpeed Insights API” servisini etkinleştirin.
   • API anahtarını oluşturun ve kopyalayın.
2. API uç noktasını yapılandırın
   • Temel API URL’si: https://www.googleapis.com/pagespeedonline/v5/runPagespeed
3. Temel istek formatı: https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://ornek.com&key=API_ANAHTARINIZ
4. Opsiyonel parametreler: ParametreAçıklamaurlTest edilecek sayfa URL’sikeyAPI anahtarınızstrategymobile veya desktopcategoryperformance, accessibility, seo vb.

API çıktısı neler içerir?

• Performans puanı (0–100)
• Core Web Vitals metrik değerleri
• Her bir metriğe ait detaylar ve açıklamalar
• Geliştirme önerileri ve hata raporları
• Lighthouse skorları (isteğe bağlı kategorilerle)

API kullanımı örneği (cURL ile):

curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://ornek.com&strategy=mobile&key=API_ANAHTARINIZ"

Kullanım sınırları:

• Ücretsiz sürüm: Günde 25.000 sorgu
• Ücretli kotaya geçiş: Google Cloud üzerinden yapılandırılır
• Rate limiting: Aynı anda çok fazla istek gönderilmesi engellenir

API kullanımı, özellikle büyük sitelerde performans izleme otomasyonları ve haftalık SEO raporları için idealdir.

LCP (Largest Contentful Paint) Metriğini Etkileyen Sorunlar ve Çözüm Yöntemleri

First Contentful Paint (FCP), kullanıcının ekranda ilk içerik parçasını gördüğü ana kadar geçen süredir. Bu metrik ne kadar düşükse, algılanan sayfa hızı o kadar yüksek olur. PageSpeed raporuna göre FCP değerini olumsuz etkileyen temel sorunlar aşağıda listelenmiştir.

1. Oluşturma engelleyen istekler

Sorun: CSS ve JS dosyaları, sayfa yüklenmeden önce bloklama yapıyor.

Çözüm:

• Kritik CSS’yi inline kullan, geri kalanını media="print" + JS ile yükle
• JS dosyalarını async veya defer ile yükle
• Gereksiz script ve font çağrılarını kaldır

2. Yazı tipi görüntüleme

Sorun: Font dosyalarının yüklenmesi gecikiyor veya FOUT yaşanıyor.

Çözüm:

• font-display: swap kullan
• Gereksiz font varyantlarını kaldır
• Yerel sistem fontlarına geçiş yap veya preload ile ön yükle

3. Resim yayınlamayı kolaylaştırın

Sorun: Görseller optimize edilmemiş veya yavaş yükleniyor.

Çözüm:

• WebP veya AVIF gibi modern formatlar kullan
• Görsel boyutlarını ekran çözünürlüğüne göre yeniden ölçeklendir
• LCP görseli için preload etiketi kullan

4. Eski JavaScript kullanımı

Sorun: Modern tarayıcılar için gereksiz polyfill veya eski JS kitaplıkları sunuluyor.

Çözüm:

• nomodule etiketiyle sadece eski tarayıcılara özel JS sun
• module desteği olan tarayıcılar için optimize edilmiş bundle oluştur
• Gereksiz kütüphaneleri kaldır (örneğin: jQuery)

5. Kullanılmayan CSS ve JS

Sorun: Sayfada yüklenip kullanılmayan stil ve script dosyaları var.

Çözüm:

• Tree-shaking destekli bundler kullan (Webpack, Vite)
• Sayfa bazlı CSS/JS ayrımı yap
• Kullanılmayan kütüphane parçalarını temizle

6. Ekran dışındaki görsellerin ertelenmemesi

Sorun: Tüm görseller sayfa başında yükleniyor.

Çözüm:

• loading="lazy" özelliğini tüm img etiketlerine uygula
• LCP dışındaki görselleri ertele
• Intersection Observer ile görünürlük bazlı yükleme kullan

LCP’yi Etkileyen Sorunlar ve Çözüm Yöntemleri

Largest Contentful Paint (LCP), sayfanın en büyük görsel veya metin bloğunun ekrana yüklenme süresini ölçer. LCP değeri, kullanıcıya “sayfa açıldı” hissini veren en kritik performans metriğidir. İdeal LCP süresi 2.5 saniyenin altında olmalıdır.

1. Resim yayınlamayı kolaylaştırın

Sorun: LCP öğesi (genellikle büyük bir görsel), optimize edilmeden yükleniyor.

Çözüm:

• LCP öğesini tanımlayıp preload etiketiyle erken yükle
• Görsel formatını WebP, AVIF gibi sıkıştırılmış formatlara çevir
• Görsel boyutunu cihaz ekranına göre yeniden ölçeklendir
• Responsive srcset yapısıyla farklı çözünürlüklere uygun versiyonları kullan

2. Oluşturma engelleyen kaynaklar

Sorun: CSS ve JS dosyaları, LCP öğesinin geç yüklenmesine neden oluyor.

Çözüm:

• Kritik CSS’yi inline ekle, geri kalanı media="print" + JS ile yükle
• JS dosyalarını defer ile sonradan yükle
• Üçüncü taraf script’leri azalt veya asenkron yap

3. Yazı tipi yüklenmesi

Sorun: LCP öğesi metin ise, font dosyasının geç yüklenmesi gecikmeye neden olur.

Çözüm:

• font-display: swap ile metnin hızlı görünmesini sağla
• Gereksiz font varyantlarını kaldır
• Fontları CDN yerine local olarak barındır

4. Eski JavaScript dosyaları

Sorun: Modern tarayıcılar için gereksiz JS kodları, LCP’nin işlenmesini geciktirir.

Çözüm:

• Eski tarayıcılara özel kodları nomodule etiketiyle ayır
• module kullanan bundle’larla modern JS gönder
• Polyfill ve kütüphaneleri optimize et

5. Sunucu yanıt süresi (TTFB)

Not: Görselde doğrudan görünmese de LCP üzerinde büyük etkisi vardır.

Çözüm:

• Sunucu optimizasyonu (CDN, cache, database iyileştirme) yap
• HTML önbellekleme stratejileri uygula
• Dinamik içerikleri statik hale getir (örneğin SSR yerine SSG)

Örnek: Bir e-ticaret ana sayfasında hero banner görseli LCP öğesidir. Bu görsel 1.8 MB boyutunda ve geç yükleniyorsa, LCP değeri 4 saniyeyi aşar ve puan ciddi şekilde düşer.

TBT’yi Etkileyen Sorunlar ve Çözüm Yöntemleri

Total Blocking Time (TBT), kullanıcı bir işlem yapmak istediğinde tarayıcının bu etkileşime ne kadar süre yanıt veremediğini ölçer. TBT, özellikle laboratuvar verilerinde etkileşim performansını yansıtır ve INP skorunun tahmini göstergesi olarak değerlendirilir.

İdeal TBT değeri: 200 milisaniyenin altında olmalıdır.

1. Kullanılmayan JavaScript’i azaltın

Sorun: Sayfa, çalıştırılmayan JS kodlarıyla şişmiş durumda.

Çözüm:

• Tree-shaking destekli modül paketleyici (Webpack, Rollup) kullan
• Sayfa bazlı script ayrımı yap
• JS bundle’larını modüler hale getir
• Gereksiz third-party script’leri kaldır

2. Oluşturma engelleyen JS ve CSS dosyaları

Sorun: JS ve CSS kaynakları kritik işleme süresini engelliyor.

Çözüm:

• Render-blocking kaynakları async veya defer ile yükle
• CSS dosyalarını böl ve kritik CSS’yi inline kullan
• Büyük kütüphaneleri (örn. jQuery) daha hafif alternatiflerle değiştir

3. Eski JavaScript dosyaları

Sorun: Modern tarayıcılar için gereksiz olan JS kodları çalıştırılıyor.

Çözüm:

• nomodule kullanarak eski tarayıcılar için ayrı bundle sun
• module ile modern, hızlı JS kullan
• Tarayıcı hedeflemelerini browserslist ile güncelle

4. Modern tarayıcılara eski JavaScript sunmaktan kaçının

Sorun: Tüm ziyaretçilere aynı, büyük boyutlu JS dosyaları yükleniyor.

Çözüm:

• Modern tarayıcılar için optimize edilmiş, ES6+ uyumlu kod gönder
• Bundle boyutunu düşür
• Farklı tarayıcılar için koşullu script yüklemeleri yap

5. Uzun görevler (Long Tasks)

Sorun: Ana iş parçacığı (main thread) uzun süre meşgul.

Çözüm:

• JS işlemlerini parçala (splitting & throttling)
• Web Workers kullanarak arka plan işleme yap
• Animasyon ve DOM güncellemelerini optimize et

Örnek: 300 KB’lık kullanılmayan JS kodu, TBT süresini 1.2 saniyeye çıkarabilir. Bu da INP değerini bozar ve sayfa etkileşimlerini geciktirir.

CLS’yi Etkileyen Sorunlar ve Çözüm Yöntemleri

Cumulative Layout Shift (CLS), sayfa içeriğindeki görsel veya yapısal kaymaların kullanıcı deneyimini ne kadar bozduğunu ölçer. İdeal CLS değeri 0.1’in altında olmalıdır. CLS, özellikle mobil kullanıcılar için kritik bir UX metriğidir.

1. Ekran dışındaki resimleri ertele

Sorun: Görseller sayfa başında yükleniyor, boyutları tanımlı değilse kayma oluşturuyor.

Çözüm:

• Tüm <img> etiketlerine width ve height parametreleri ekle
• loading="lazy" özelliği ile ekran dışındaki görselleri ertele
• CSS ile rezerv alan tanımla (örneğin aspect-ratio kullan)

2. Yazı tipi gecikmesi ve FOUT/FOIT sorunlar

Sorun: Özel fontlar geç yükleniyor, metin yapısı değişiyor.

Çözüm:

• font-display: swap kullanarak geçici sistem fontları göster
• Fontları yerel barındır (self-host)
• Gereksiz font stillerini ve ağırlıklarını yükleme

3. Dinamik içeriklerin geç yüklenmesi

Sorun: Reklamlar, iframe’ler, pop-up’lar geç yüklendiğinde kaymalara neden olur.

Çözüm:

• Bu içerikler için sabit yükseklikli kapsayıcı (container) alanları önceden oluştur
• Responsive reklam yerleşimleri için minimum boyut belirle
• İçerik yerleştirmede position ve transform kullanımına dikkat et

4. DOM yapısında dengesizlik

Sorun: Sayfa yukarıdan aşağıya doğru dengesiz biçimde render ediliyor.

Çözüm:

• CSS Flexbox/Grid ile yapısal denge kur
• Kayan (floating) bileşenleri sabitle
• Yerleşim için JS yerine CSS tercih et

5. Geç yüklenen UI bileşenleri

Sorun: Slider, galeri, video gibi etkileşimli öğeler yüklenirken kaymalara sebep oluyor.

Çözüm:

• placeholder kullan
• Yüklenmeden önce sabit boşluk bırak
• Element yüksekliğini JS ile dinamik hesaplamaktan kaçın

Örnek: Görsel alanında height tanımı olmayan bir hero banner, sayfa yüklenirken aşağıdaki tüm içeriklerin pozisyonunu değiştirebilir ve CLS değerini 0.25 üzerine çıkarabilir.

PageSpeed Insight puanı 100 olmalı mı? Gerçekçi hedef nedir?

PageSpeed Insight’ta 100 puan almak mümkün ama çoğu web sitesi için sürdürülebilir ve gerekli bir hedef değildir. Çünkü puan 100 olsa bile kullanıcı deneyimi, içerik kalitesi ve işlevsellik bozulabilir.

100 puan neden her zaman ideal değildir?

Neden	Açıklama
Gerçek Kullanıcı Deneyimi	Puan 100 olsa bile içerik anlamlı değilse ziyaretçi kalmaz.
3. Parti Entegrasyonlar	Analitik, reklam, chat widget’ları puanı düşürür ama işlevseldir.
Tasarım ve Görsel Kalite	Görsel ağırlıklı sayfalarda 100 puan zor ve gereksiz olabilir.
Geliştirme Maliyeti	%90’dan %100’e çıkmak için harcanan çaba genelde dönüş sağlamaz.

Gerçekçi performans hedefleri ne olmalı?

Alan	Önerilen Hedef Değer
Mobil PageSpeed	85+ puan
Masaüstü PageSpeed	90+ puan
LCP	< 2.5 saniye
INP	< 200 ms
CLS	< 0.1

Hangi durumlarda 100 puan anlamlı olur?

• Tek sayfalık, statik içerikli, düşük trafikli siteler
• Landing page’ler (minimal kod, az görsel)
• Teknik demo amaçlı sayfalar
• SEO testi yapılan prototip sayfalar

Örnek: E-ticaret siteleri, haber siteleri veya SaaS ürünleri genellikle 100 puan almaz; çünkü kullanıcı etkileşimi, analiz takibi ve reklam gibi unsurlar bu puanı teknik olarak düşürür.

WordPress’te PageSpeed Insight Verilerini Optimize Edebileceğiniz Eklentiler Nelerdir?

Hem kullanım hem de pratiklik açısından birçok kişi WordPress alt yapısını kullanıyor. Bu nedenle de bu içerikte PageSpeed Insight verilerini WordPress sitelerini optimize etmek için kullanabileceğiniz site hızı eklentilerine de değinmek istedim.

WP Rocket nedir, ne işe yarar?

WP Rocket, WordPress için geliştirilmiş premium bir hız optimizasyon eklentisidir. Sayfa önbellekleme, lazy load, render-blocking kaynakları erteleme ve kritik CSS oluşturma gibi işlemleri otomatik yapar. Teknik bilgi gerekmeden PageSpeed skorunu yükseltir.

WP Rocket hangi metrikleri iyileştirir?

• LCP: Gelişmiş önbellekleme ve görsel optimizasyon
• TBT/INP: JavaScript erteleme, defer özelliği
• CLS: Kritik CSS yükleme ve sabit içerik sunumu

Eklenti linki: https://wp-rocket.me/

LiteSpeed Cache eklentisi ne işe yarar?

LiteSpeed Cache, LiteSpeed sunucu altyapısıyla tam entegre çalışan gelişmiş bir önbellek eklentisidir. Sayfa önbelleği, CDN, resim optimizasyonu ve veritabanı temizleme gibi işlemleri destekler. Tamamen ücretsizdir.

Hangi metriklerde etkilidir?

• LCP: HTML sıkıştırma + görsel önbellekleme
• TBT: JS/CSS birleştirme ve optimize etme
• CLS: Lazy load ve LQIP desteği ile düzenli yükleme sağlar

Not: Maksimum verim için LiteSpeed sunucu altyapısı gerekir.

Eklenti linki: https://wordpress.org/plugins/litespeed-cache/

Autoptimize ne yapar?

Autoptimize, WordPress sitelerinde CSS, JS ve HTML dosyalarını küçültmek, birleştirmek ve optimize etmek için kullanılır. Özellikle başlangıç seviyesindeki kullanıcılar için hızlı kurulum avantajı sunar.

Hangi metrikleri geliştirir?

• TBT / INP: JS ve CSS’leri küçültme
• LCP: Font optimizasyonu ve sıkıştırma
• CLS: Gereksiz kodları azaltarak daha stabil DOM yapısı sağlar

Hafif bir eklenti olmakla birlikte, eklenti çatışması riski az ve ücretsizdir.

Eklenti linki: https://wordpress.org/plugins/autoptimize/

FlyingPress ne işe yarar?

FlyingPress, WP Rocket’e alternatif olarak geliştirilen, sade arayüzlü ama güçlü bir hız optimizasyon eklentisidir. Lazy load, kritik CSS, görsel optimizasyon ve cache özellikleri sunar. Görsel olarak zengin sitelerde öne çıkar.

Hangi metriklerde başarılıdır?

• LCP: Görsel preload, responsive image, WebP dönüşüm
• TBT: Render-blocking kaynakları geciktirme
• CLS: Görsel kaymaları azaltan yükleme önceliği algoritması

Ücretli bir eklentidir, detaylı ayar yapabilme özelliğine sahiptir.

Eklenti linki: https://flyingpress.com/

Perfmatters ne işe yarar?

Perfmatters, sayfada gereksiz WordPress varsayılanlarını devre dışı bırakarak hız artışı sağlayan hafif bir optimizasyon eklentisidir. DNS prefetch, script yönetimi ve etkileşim kontrolleri sunar.

Neyi optimize eder?

• INP / TBT: Script yüklenmesini sayfa bazlı kontrol etme
• LCP: Hafifletilmiş sayfa yapısı
• CLS: Kararlı içerik yüklemesini destekleyen sabit yapı

Gelişmiş kullanıcılar için idealdir. WP Rocket ile birlikte uyumlu çalışabilir.

Eklenti linki: https://perfmatters.io/

ShortPixel / Imagify ne işe yarar?

ShortPixel ve Imagify, görsel boyutlarını küçültüp kaliteyi koruyarak LCP ve CLS gibi metrikleri doğrudan iyileştiren görsel optimizasyon eklentileridir. WebP dönüşüm, lazy load ve sıkıştırma desteği sunar.

Hangi alanlarda etkilidir?

• LCP: Görsellerin boyutunu düşürerek yüklenme süresini azaltır
• CLS: Tanımlı boyutlarla görsel kaymaları önler
• PageSpeed Skoru: Toplam sayfa boyutunu düşürerek genel performansı artırır

Web siteleri için en hızlı kazanç sağlayan eklentilerden biridir.

Eklenti linki: https://shortpixel.com/