Google PageSpeed Insights ve Lighthouse ile Web Sitesi Hız Testi ve Performans Optimizasyonu Rehberi

Konu İçeriği — Hızlı Bakış ( cPanel / Web • ⏱ ~11 dk okuma • Kod: HTML)
01. 1. Google PageSpeed Insights Nedir?
02. 2. PageSpeed Insights ile Site Hız Testi Nasıl Yapılır?
03. 3. PageSpeed Insights Performans Puanları Ne Anlama Geliyor?
04. 4. Google Lighthouse Nedir?
05. 5. Google Chrome Üzerinden Lighthouse Denetimi Nasıl Yapılır?
06. 6. Core Web Vitals Nedir?

Genişletmek için tıkla ...

Web sitelerinin hızlı açılması, kullanıcı deneyimi, mobil uyumluluk ve teknik SEO açısından önemli bir konudur. Özellikle yüksek boyutlu görseller, gereksiz JavaScript dosyaları, yavaş sunucu yanıt süreleri ve optimize edilmemiş CSS kaynakları, web sitelerinin performansını olumsuz etkileyebilir.

Peki web sitemizin gerçekten ne kadar hızlı olduğunu, hangi dosyaların yavaşlamaya neden olduğunu ve hangi alanlarda iyileştirme yapılması gerektiğini nasıl öğrenebiliriz?

Google tarafından sunulan PageSpeed Insights ve Lighthouse araçları, web sitelerinin performansını analiz etmek ve teknik sorunları tespit etmek için kullanılabilecek ücretsiz çözümlerdir.

Bu rehberde PageSpeed Insights ve Lighthouse araçlarının nasıl kullanıldığını, performans puanlarının nasıl yorumlandığını ve tespit edilen sorunların nasıl giderilebileceğini inceleyeceğiz.

1. Google PageSpeed Insights Nedir?

Google PageSpeed Insights, web sayfalarının mobil ve masaüstü performansını analiz eden ücretsiz bir araçtır.

Araç, web sayfasını test ederek performansı etkileyebilecek sorunları tespit eder ve bu sorunların giderilmesi için öneriler sunar.

PageSpeed Insights ile aşağıdaki kontroller gerçekleştirilebilir:

• Web sitesinin mobil performansını ölçme
• Masaüstü performansını değerlendirme
• Sayfa yüklenme sürelerini analiz etme
• Core Web Vitals metriklerini inceleme
• Büyük görselleri ve gereksiz kaynakları tespit etme
• JavaScript ve CSS kaynaklı gecikmeleri belirleme
• Sunucu yanıt sürelerini değerlendirme
• Teknik optimizasyon önerilerini inceleme

PageSpeed Insights, performans analizinde Lighthouse tarafından oluşturulan laboratuvar verilerinden ve yeterli veri bulunduğunda gerçek Chrome kullanıcılarının deneyimlerinden yararlanır.

2. PageSpeed Insights ile Site Hız Testi Nasıl Yapılır?

Bir web sitesinin performans analizini gerçekleştirmek oldukça basittir.

Adım 1: Aşağıdaki adrese giriş yapın.

Adım 2: Açılan sayfada bulunan URL alanına analiz etmek istediğiniz web sayfasının adresini yazın.

Örneğin.

Adım 3: Analyze (Analiz Et) butonuna tıklayın.

Adım 4: Analiz tamamlandıktan sonra mobil ve masaüstü sonuçlarını ayrı ayrı inceleyin.

Adım 5: Performans metriklerini ve tespit edilen sorunları değerlendirin.

Önemli: PageSpeed Insights bir web sitesinin bütün sayfalarını tek seferde denetlemez. Girilen URL'yi analiz eder. Bu nedenle ana sayfa, ürün sayfası, kategori sayfası ve içerik sayfası gibi farklı sayfa türlerini ayrı ayrı test etmek gerekir.

3. PageSpeed Insights Performans Puanları Ne Anlama Geliyor?

PageSpeed Insights, Lighthouse performans puanlarını 0 ile 100 arasında değerlendirir.

Puan aralıkları:

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

Örneğin bir web sitesinin mobil performans puanı 45, masaüstü performans puanı ise 92 olabilir.

Bu durum, sayfanın mobil test koşullarında daha fazla performans problemi yaşadığını gösterebilir.

Ancak burada dikkat edilmesi gereken önemli bir nokta bulunuyor.

PageSpeed Insights puanının 100 olması zorunlu değildir. Ayrıca yalnızca yüksek puan almak, her ziyaretçinin mükemmel bir deneyim yaşayacağı anlamına gelmez.

Asıl önemli olan, gerçek kullanıcı deneyimini iyileştirmek ve performans sorunlarını mümkün olduğunca azaltmaktır.

4. Google Lighthouse Nedir?

Google Lighthouse, web sayfalarının kalitesini ve teknik performansını incelemek için geliştirilen açık kaynaklı bir denetim aracıdır.

Lighthouse yalnızca sayfa hızını ölçmez. Aynı zamanda erişilebilirlik, modern web geliştirme standartları ve temel SEO uygulamalarını da kontrol edebilir.

Başlıca denetim kategorileri:

1. Performance (Performans)

Sayfanın ne kadar hızlı yüklendiğini ve kullanıcıya ne kadar hızlı içerik sunduğunu değerlendirir.

1. Accessibility (Erişilebilirlik)

Web sitesinin engelli kullanıcılar ve yardımcı teknolojiler açısından ne kadar erişilebilir olduğunu analiz eder.

1. Best Practices (En İyi Uygulamalar)

Web sitesinde kullanılan teknolojilerin, güvenlik uygulamalarının ve temel geliştirme standartlarının uygunluğunu kontrol eder.

1. SEO (Arama Motoru Optimizasyonu)

Sayfanın bazı temel teknik SEO gerekliliklerini karşılayıp karşılamadığını inceler.

Lighthouse'un SEO puanı kapsamlı bir SEO analizi veya Google sıralama tahmini değildir. Yalnızca belirli teknik kontrollerin sonuçlarını yansıtır.

5. Google Chrome Üzerinden Lighthouse Denetimi Nasıl Yapılır?

Lighthouse kullanmak için herhangi bir ücretli programa ihtiyaç bulunmuyor.

Google Chrome tarayıcısının geliştirici araçları üzerinden doğrudan çalıştırılabilir.

Adım 1: Google Chrome tarayıcısını açın.

Adım 2: Denetlemek istediğiniz web sitesine giriş yapın.

Adım 3: F12 tuşuna basarak geliştirici araçlarını açın.

Adım 4: Üst menüde bulunan Lighthouse sekmesine geçin. Sekme görünmüyorsa ek sekmeler menüsünden seçebilirsiniz.

Adım 5: Denetlemek istediğiniz kategorileri seçin.

Adım 6: Mobil veya masaüstü cihaz türünü belirleyin.

Adım 7: Navigation modunu seçerek Generate report veya Analyze page load seçeneğiyle denetimi başlatın.

İşlem tamamlandığında Lighthouse, performans sonuçlarını ve iyileştirme önerilerini içeren bir rapor oluşturacaktır.

İpucu: Daha tutarlı sonuçlar elde etmek için test sırasında gereksiz sekmeleri kapatabilir ve tarayıcı eklentilerinin etkisini azaltmak amacıyla gizli pencere kullanabilirsiniz.

Daha ayrıntılı performans sorunlarını araştırmak için Chrome DevTools içerisindeki Performance paneli de kullanılabilir.

6. Core Web Vitals Nedir?

Core Web Vitals, Google tarafından kullanıcı deneyimini değerlendirmek amacıyla kullanılan üç temel performans metriğinden oluşur.

Bu metrikler sayfanın yüklenme performansını, kullanıcı etkileşimlerine verdiği yanıtı ve görsel kararlılığını ölçer.

Largest Contentful Paint (LCP)

LCP, sayfanın görünür alanındaki en büyük içerik öğesinin ne kadar sürede görüntülendiğini ölçer.

Genellikle büyük bir görsel, banner veya metin bloğu bu metrikte belirleyici olabilir.

Değerlendirme:

• 2,5 saniye ve altı: İyi
• 2,5–4 saniye arası: İyileştirme gerekli
• 4 saniyenin üzeri: Zayıf

LCP değerinin yüksek olmasının olası nedenleri:

• Büyük ve sıkıştırılmamış görseller
• Yavaş sunucu yanıt süresi
• Oluşturmayı engelleyen CSS ve JavaScript dosyaları
• Önemli görsellerin geç yüklenmesi
• Yetersiz önbellekleme

Interaction to Next Paint (INP)

INP, web sayfasının kullanıcı etkileşimlerine ne kadar hızlı görsel yanıt verdiğini değerlendirir.

Örneğin bir kullanıcı menüye tıkladığında veya bir işlem gerçekleştirdiğinde sayfanın yanıt verme gecikmesi bu metrik açısından önemlidir.

Değerlendirme:

• 200 ms ve altı: İyi
• 200–500 ms arası: İyileştirme gerekli
• 500 ms üzeri: Zayıf

Yüksek INP değerinin olası nedenleri:

• Uzun süren JavaScript işlemleri
• Ana iş parçacığını meşgul eden görevler
• Karmaşık etkileşim işlemleri
• Gereksiz üçüncü taraf scriptleri

Not: INP, gerçek kullanıcı etkileşimlerini esas alan bir metriktir. Standart Lighthouse sayfa yükleme testinde doğrudan ölçülmez. Laboratuvar testlerinde Total Blocking Time (TBT), olası etkileşim sorunları için yardımcı bir göstergedir.

Cumulative Layout Shift (CLS)

CLS, web sayfasındaki öğelerin beklenmedik şekilde yer değiştirmesini ölçer.

Örneğin bir kullanıcı sayfadaki bir bağlantıya tıklamak üzereyken sonradan yüklenen bir reklamın içeriği aşağı kaydırması, olumsuz bir kullanıcı deneyimine neden olabilir.

Değerlendirme:

• 0,1 ve altı: İyi
• 0,1–0,25 arası: İyileştirme gerekli
• 0,25 üzeri: Zayıf

CLS değerini iyileştirmek için:

• Görsellerin boyutlarını önceden belirtin.
• Reklam ve iframe alanları için yer ayırın.
• Dinamik içerikleri kontrol edin.
• Yazı tipi yüklemelerinin düzen kaymasına neden olmasını azaltın.

Bu üç metrik için gerçek kullanıcı verilerinin 75. yüzdelik dilimde önerilen eşikleri karşılaması hedeflenir.

7. Lighthouse Raporundaki Diğer Performans Metrikleri

Core Web Vitals dışında Lighthouse raporlarında farklı performans ölçümleri de bulunmaktadır.

First Contentful Paint (FCP):

Sayfada ilk metin veya görsel içeriğin ne zaman görüntülendiğini ölçer.

Speed Index (SI):

Sayfanın görünür içeriğinin ne kadar hızlı görüntülendiğine ilişkin bir ölçümdür.

Total Blocking Time (TBT):

Sayfa yüklenmesi sırasında ana iş parçacığının uzun görevler nedeniyle ne kadar süre engellendiğini ölçer.

Time to First Byte (TTFB):

Tarayıcının bir isteği başlatmasından ilk yanıt baytını almasına kadar geçen süreyi ifade eder.

TTFB özellikle sunucu ve ağ gecikmelerini değerlendirmek açısından faydalıdır.

8. Laboratuvar Verileri ile Gerçek Kullanıcı Verileri Arasındaki Fark

PageSpeed Insights analizlerinde iki farklı veri türüyle karşılaşabilirsiniz.

Laboratuvar verileri (Lab Data):

Lighthouse tarafından kontrollü ve simüle edilmiş koşullarda oluşturulur.

Bu veriler, performans sorunlarını araştırmak ve yapılan optimizasyonların etkisini test etmek için kullanılır.

Gerçek kullanıcı verileri (Field Data):

Chrome User Experience Report (CrUX) üzerinden sağlanır.

Bu veriler, uygun koşulları sağlayan gerçek Chrome kullanıcılarının son 28 günlük deneyimlerini temel alır.

Buradaki önemli ayrıntı şudur:

Bir web sitesinde yaptığınız optimizasyonlar, yeni Lighthouse testinde hemen etkisini gösterebilir.

Ancak gerçek kullanıcı verileri 28 günlük bir dönemi kapsadığından, yapılan değişikliklerin bu bölümdeki etkisinin görünmesi zaman alabilir.

Ayrıca yeterli gerçek kullanıcı verisi bulunmuyorsa PageSpeed Insights, ilgili URL yerine site genelindeki kaynak düzeyinde veri gösterebilir veya gerçek kullanıcı verilerini hiç gösteremeyebilir.

9. PageSpeed Insights ile Tespit Edilen Sorunlar Nasıl Giderilir?

PageSpeed Insights ve Lighthouse raporları, performans problemlerini belirlemenin yanında uygulanabilecek iyileştirmeler konusunda da öneriler sunar.

En sık karşılaşılan sorunlardan bazıları şunlardır:

A. Optimize Edilmemiş Görseller

Büyük JPEG ve PNG dosyaları sayfa yüklenmesini yavaşlatabilir.

Çözüm:

Görselleri uygun çözünürlüğe düşürün, sıkıştırın ve mümkün olduğunda WebP veya AVIF formatlarını değerlendirin.

Ekranın altında kalan görseller için Lazy Loading kullanılabilir.


Ancak sayfanın ilk açılışında görünmesi gereken ana LCP görseline Lazy Loading uygulanmamalıdır.

B. Gereksiz JavaScript Yüklenmesi

Kullanılmayan veya gereğinden büyük JavaScript dosyaları, sayfanın yüklenmesini ve etkileşimlere yanıt vermesini geciktirebilir.

Çözüm:

• Kullanılmayan JavaScript kodlarını temizleyin.
• Büyük JavaScript dosyalarını gerektiğinde parçalara ayırın.
• Üçüncü taraf scriptleri azaltın.
• Uygun scriptlerde defer veya async özelliklerini değerlendirin.

Örnek:


defer özelliği, klasik harici JavaScript dosyasının HTML ayrıştırmasını engellemeden indirilmesini ve belge ayrıştırıldıktan sonra çalıştırılmasını sağlar.

Ancak tüm scriptlere kontrolsüz şekilde defer eklenmemelidir. Scriptlerin çalışma sırası ve bağımlılıkları dikkate alınmalıdır.

C. Kullanılmayan CSS Kodları

Büyük CSS dosyaları ve gereksiz stil kuralları sayfanın oluşturulmasını geciktirebilir.

Çözüm:

• Kullanılmayan CSS kurallarını temizleyin.
• CSS dosyalarını uygun şekilde küçültün.
• Kritik stilleri önceliklendirin.
• Gereksiz CSS kütüphanelerini kaldırın.

CSS dosyalarının küçültülmesi, yorumların ve gereksiz boşlukların kaldırılmasıyla veri boyutunu azaltabilir.

D. Yavaş Sunucu Yanıt Süresi

Sunucunun yanıt vermekte gecikmesi, sayfanın diğer kaynaklarının yüklenmesini de etkileyebilir.

Çözüm:

• Sunucu performansını inceleyin.
• Veritabanı sorgularını optimize edin.
• Uygun önbellekleme mekanizmaları kullanın.
• CDN kullanımını değerlendirin.
• Gereksiz sunucu işlemlerini azaltın.

Özellikle PHP ve MySQL tabanlı web sitelerinde yavaş veritabanı sorguları, yüksek TTFB değerlerine neden olabilir.

E. Tarayıcı Önbelleklemesinin Yetersiz Olması

Aynı görsellerin, CSS dosyalarının ve JavaScript kaynaklarının tekrar tekrar indirilmesi gereksiz ağ trafiğine neden olabilir.

Çözüm:

Statik kaynaklar için uygun Cache-Control başlıkları yapılandırılabilir.

Apache sunucusunda uzun süreli önbellekleme için örnek:


Önemli: Bu yapılandırma yalnızca içerik değiştiğinde dosya adı veya URL'si de değişen, sürümlendirilmiş statik kaynaklar için uygundur. Aksi halde kullanıcılar güncellenmiş CSS, JavaScript veya görselleri göremeyebilir.

10. Lighthouse ile Komut Satırından Performans Analizi

Daha ileri düzey kullanıcılar Lighthouse'u komut satırından da çalıştırabilir.

Bunun için Node.js ve Google Chrome kurulumu gereklidir.

İlk olarak Lighthouse paketini yükleyin.


Ardından denetlemek istediğiniz web sitesinin adresini kullanarak analiz gerçekleştirin.


HTML biçiminde bir rapor oluşturmak için:


Bu yöntem özellikle geliştiricilerin performans testlerini tekrarlaması ve raporları dosya olarak saklaması açısından kullanışlıdır.

Ayrıca Lighthouse CI kullanılarak yazılım geliştirme süreçlerine otomatik performans kontrolleri eklenebilir.

11. Performans Optimizasyonu Sonrasında Test Nasıl Yapılmalı?

Web sitesinde yapılan her değişiklikten sonra performans testinin tekrarlanması önemlidir.

Önerilen test süreci:

1. Web sitesinin ilk performans puanlarını kaydedin.
2. Mobil ve masaüstü sonuçlarını ayrı ayrı inceleyin.
3. Lighthouse raporundaki önemli sorunları belirleyin.
4. Öncelikli performans problemlerini giderin.
5. Aynı URL üzerinde yeniden test gerçekleştirin.
6. Yeni sonuçları önceki değerlerle karşılaştırın.
7. Gerçek kullanıcı verilerini zaman içerisinde takip edin.

Özellikle Lighthouse testlerinde cihaz koşulları, ağ değişkenliği ve arka plandaki işlemler sonucu etkileyebilir.

Bu nedenle yalnızca tek bir test sonucuna güvenmek yerine, benzer koşullarda birden fazla ölçüm yapmak daha sağlıklı olacaktır.

12. Lighthouse Performans Puanı SEO Sıralamasını Doğrudan Belirler mi?

Web yöneticilerinin sıkça merak ettiği konulardan biri de Lighthouse performans puanının Google sıralamalarını doğrudan etkileyip etkilemediğidir.

Lighthouse performans puanı tek başına Google'ın doğrudan sıralama ölçütü değildir.

Google, sayfa deneyimi değerlendirmelerinde Core Web Vitals gibi kullanıcı deneyimi sinyallerinden yararlanır. Ancak bu metrikler de arama sonuçlarındaki sıralamayı tek başına belirlemez.

Bir web sitesinin arama performansında içerik kalitesi, arama niyetiyle uyum, teknik erişilebilirlik ve diğer birçok faktör rol oynar.

Bu nedenle yalnızca Lighthouse puanını 100 yapmak amacıyla kullanıcı deneyimini veya önemli site özelliklerini bozacak değişikliklerden kaçınılmalıdır.

13. PageSpeed Insights ve Lighthouse Arasındaki Farklar

Her iki araç da web sitesi performansını değerlendirmede kullanılabilir ancak aralarında bazı farklılıklar bulunmaktadır.

PageSpeed Insights:

• Tarayıcı üzerinden URL girilerek kullanılabilir.
• Mobil ve masaüstü performansını analiz eder.
• Lighthouse laboratuvar verilerini kullanır.
• Yeterli veri bulunduğunda gerçek kullanıcı deneyimlerini gösterir.
• Hızlı performans kontrolü için uygundur.

Lighthouse:

• Chrome DevTools üzerinden çalıştırılabilir.
• Komut satırından kullanılabilir.
• Performans dışında erişilebilirlik, SEO ve en iyi uygulamalar denetimlerini gerçekleştirir.
• Yerel geliştirme ortamlarında ve giriş gerektiren sayfalarda kullanılabilir.
• Otomatik denetim süreçlerine entegre edilebilir.

Her iki aracı birlikte kullanmak, web sitesinin performansını daha kapsamlı biçimde değerlendirmeye yardımcı olabilir.

Sonuç

PageSpeed Insights ve Google Lighthouse, web sitesi performansını iyileştirmek isteyen geliştiriciler ve site yöneticileri için önemli analiz araçlarıdır.

Bu araçlar sayesinde yavaş yüklenen kaynaklar, gereksiz JavaScript işlemleri, büyük görseller, sunucu gecikmeleri ve kullanıcı deneyimini etkileyen çeşitli teknik problemler tespit edilebilir.

Ancak performans optimizasyonunda amaç yalnızca yüksek puana ulaşmak olmamalıdır.

Gerçek kullanıcıların sayfaya daha hızlı erişebilmesi, siteyi sorunsuz kullanabilmesi ve etkileşimlere hızlı yanıt alabilmesi esas hedef olmalıdır.

Düzenli performans denetimleri ve kontrollü optimizasyon çalışmalarıyla web sitelerinin daha hızlı, erişilebilir ve kullanıcı dostu hale getirilmesi mümkündür.

Sıkça Sorulan Sorular (SSS)