Google Lighthouse Nedir ve Nasıl Çalışır?
Google Lighthouse, Google tarafından geliştirilen, web sitelerinin performansını, erişilebilirliğini, SEO uyumluluğunu ve en iyi uygulamalarla (best practices) uyumunu ölçmek için kullanılan açık kaynaklı bir test aracıdır. Hem geliştiriciler hem de site yöneticileri tarafından yaygın olarak kullanılan Lighthouse, web sayfalarının kullanıcı deneyimini etkileyen kritik metrikleri analiz ederek iyileştirme önerileri sunar. Tarayıcı tabanlı çalışabildiği gibi, komut satırı üzerinden veya Node.js API’leriyle de entegre edilebilir.
Araç, test edilen sayfayı laboratuvar ortamında yeniden yükleyerek belirli simülasyonlar uygular. Bu simülasyonlar; ağ yavaşlatma (throttling), cihaz emülasyonu ve render süreci gibi faktörleri içerir. Böylece hem masaüstü hem de mobil senaryolarda performansın nasıl değiştiği ölçülebilir. Test sonunda sunulan rapor, puanlamalarla birlikte detaylı fırsat (opportunity) ve teşhis (diagnostics) listeleri içerir.
Lighthouse’un Çalışma Mantığı
Lighthouse, çalışmaya başladığında sayfanızın yüklenme sürecini sıfırdan simüle eder. Bu süreçte, tarayıcı konsolunu izler, kaynakların yüklenme sırasını kaydeder ve her bir kaynağın (CSS, JS, görsel vb.) yükleme süresini ölçer. Ardından Core Web Vitals metrikleri başta olmak üzere farklı kategorilerde puanlama yapar. Bu puanlar, 0 ile 100 arasında değer alır ve genel olarak şu şekilde değerlendirilir:
Performans
Sayfanın hız, etkileşim süresi ve görsel stabilite gibi kullanıcı deneyimi odaklı kriterlerdeki başarısını ölçer.
Erişilebilirlik
Engelli kullanıcılar dahil tüm ziyaretçiler için sitenin ne kadar erişilebilir olduğunu değerlendirir.
SEO
Arama motorlarının sayfanızı tarama ve dizine ekleme başarısını artıracak öneriler sunar.
Lighthouse Kullanım Yöntemleri
Google Lighthouse’u kullanmak için en yaygın yöntem, Google Chrome tarayıcısının Geliştirici Araçları (DevTools) üzerinden çalıştırmaktır. Bunun dışında:
- Komut satırından (
npm install -g lighthouse) kurulum yaparak terminal üzerinden test çalıştırabilirsiniz. - Node.js API’leri ile projelerinize entegre edebilir, otomatik test süreçlerine dahil edebilirsiniz.
- Chrome eklentisi olarak yükleyip tek tıkla çalıştırabilirsiniz.
Avantajları
Lighthouse, ücretsiz olması, açık kaynak yapısı ve kapsamlı metrik sunmasıyla web performans ölçümünde sektör standardı haline gelmiştir.
İş Etkisi ve Kullanım Alanları
Lighthouse raporları, geliştiricilerin sorun tespitini hızlandırır ve iyileştirme önceliklerini belirlemeye yardımcı olur. Örneğin, yüksek First Contentful Paint süresine sahip bir sayfa için görsel optimizasyonu önerilebilir. Ayrıca SEO bölümündeki eksiklikler, arama motoru sıralamalarınızı doğrudan etkileyebilir.
Lighthouse Raporundaki Metriklerin Anlamı
Google Lighthouse raporu, web sayfanızın performansını, erişilebilirliğini, en iyi uygulamalara uyumunu ve SEO durumunu analiz ederken çeşitli metrikler kullanır. Bu metrikler, sayfanın yüklenme süresinden etkileşim hızına, görsel kararlılıktan tarayıcı kaynak yönetimine kadar geniş bir alanı kapsar. Raporun sunduğu her metrik, kullanıcı deneyiminin belirli bir yönünü ölçerek iyileştirme fırsatlarını ortaya çıkarır.
Bu metrikleri doğru anlamak, performans iyileştirme sürecinde en kritik adımdır. Yanlış yorumlanan veriler, zaman ve kaynak israfına yol açabilir. Bu nedenle her metriğin neyi temsil ettiğini, hangi sınırların “iyi” kabul edildiğini ve hangi durumlarda aksiyon alınması gerektiğini bilmek gerekir.
Core Web Vitals Metrikleri
Lighthouse raporundaki en önemli metrikler, Google’ın Core Web Vitals başlığı altında topladığı üç temel göstergedir:
Largest Contentful Paint (LCP)
Sayfadaki en büyük içerik öğesinin yüklenme süresini ölçer. İyi bir kullanıcı deneyimi için LCP’nin 2,5 saniye altında olması gerekir.
First Input Delay (FID)
Kullanıcının ilk etkileşiminden tarayıcının yanıt vermesine kadar geçen süreyi ölçer. FID’nin 100 ms altında olması idealdir.
Cumulative Layout Shift (CLS)
Sayfa yüklenirken meydana gelen görsel kaymaları ölçer. CLS’nin 0,1’in altında olması hedeflenmelidir.
Diğer Önemli Lighthouse Metrikleri
First Contentful Paint (FCP)
Sayfanın ilk içerik öğesinin görüntülendiği zamanı ölçer. Hız algısı için kritik bir göstergedir.
Speed Index (SI)
Sayfanın içeriğinin görsel olarak ne kadar hızlı yüklendiğini gösterir. Kullanıcıların sayfayı “hazır” hissetme süresini etkiler.
Total Blocking Time (TBT)
Sayfanın etkileşime kapalı kaldığı toplam süreyi ölçer. Yüksek TBT, kullanıcı deneyimini olumsuz etkiler.
Metriklerin İş Etkisi
Bu metrikler yalnızca teknik veriler değildir; doğrudan dönüşüm oranlarınızı, SEO sıralamanızı ve kullanıcı memnuniyetinizi etkiler. Örneğin, yüksek LCP değeri, özellikle e-ticaret sitelerinde kullanıcıların ürün sayfalarından çıkmasına neden olabilir. Düşük CLS ise kullanıcıların alışveriş sepeti butonunu yanlışlıkla tıklamasını önler.
İyileştirme Öncelikleri
LCP, FID ve CLS değerlerini optimize etmek, genel Lighthouse puanınızı ve kullanıcı deneyiminizi hızla iyileştirir.
PageSpeed Insights ile Hız Optimizasyon Önerilerini Analiz Etme
PageSpeed Insights (PSI), Google tarafından sunulan, web sitelerinin hem masaüstü hem de mobil cihazlarda performansını değerlendiren ve iyileştirme önerileri sunan ücretsiz bir analiz aracıdır. Lighthouse teknolojisi üzerine inşa edilen PSI, sayfanızın hızını ve kullanıcı deneyimini doğrudan etkileyen faktörleri tespit eder. Özellikle mobil performansa verilen önem, Google’ın mobil öncelikli indeksleme stratejisiyle birebir uyumludur.
PSI, yalnızca ham puanlar vermekle kalmaz; aynı zamanda “Opportunities” ve “Diagnostics” bölümlerinde uygulamaya geçirilebilir öneriler sunar. Bu sayede, web geliştiriciler veya site yöneticileri hangi optimizasyonların en yüksek etkiyi yaratacağını hızlıca belirleyebilir.
PageSpeed Insights Raporunun Bölümleri
Performans Skoru
0-100 arasında verilen genel puandır. 90+ puan, yüksek performans seviyesini gösterir.
Opportunities
Sayfanın hızını artırmak için uygulanabilecek spesifik önerileri listeler. Her önerinin potansiyel kazanımı (ms cinsinden) belirtilir.
Diagnostics
Performansa dolaylı etki eden, en iyi uygulamalara yönelik teknik detayları içerir.
PSI Metriklerini Anlamak
First Contentful Paint (FCP)
Kullanıcıya ilk içerik öğesinin ne zaman göründüğünü ölçer. Düşük FCP, algılanan hız açısından önemlidir.
Largest Contentful Paint (LCP)
En büyük içerik öğesinin yüklenme süresini gösterir. İdeal değer 2,5 saniyenin altıdır.
Interaction to Next Paint (INP)
Kullanıcı etkileşimleri ile sayfanın görsel yanıtı arasındaki süreyi ölçer. 200 ms altında olmalıdır.
Analiz Sürecinde İzlenecek Adımlar
PageSpeed Insights kullanarak etkili bir analiz yapmak için şu adımlar izlenebilir:
- Test etmek istediğiniz URL’yi girin ve analiz başlatın.
- Öncelikle mobil sonuçları inceleyin, ardından masaüstü skoruna bakın.
- “Opportunities” kısmındaki önerileri önem derecesine göre sıralayın.
- Önce en yüksek zaman kazancı sağlayan optimizasyonları uygulayın.
- Tekrar test yaparak iyileştirmelerin etkisini ölçün.
Avantajları
PSI, Google’ın arama algoritmalarıyla uyumlu analizler sunar. Böylece yalnızca teknik iyileştirme değil, SEO avantajı da sağlar.
GTmetrix Kullanarak Detaylı Performans Raporu Alma
GTmetrix, web sitelerinin hız ve performansını analiz eden, dünya çapında popüler bir test aracıdır. Lighthouse ve PageSpeed Insights’a benzer şekilde çalışsa da, GTmetrix özellikle Waterfall Chart, yükleme zaman çizelgesi ve kaynak bazlı analizleriyle öne çıkar. Bu sayede, yalnızca sayfa genel puanınızı değil, hangi kaynakların ne kadar süre aldığını ve nerede darboğazlar yaşandığını net bir şekilde görebilirsiniz.
GTmetrix, testlerinizi farklı konumlardan, tarayıcı türlerinden ve bağlantı hızlarından çalıştırabilmenize imkan tanır. Böylece gerçek kullanıcı senaryolarına daha yakın sonuçlar elde edilir. Bu esneklik, küresel hedef kitlesi olan web siteleri için büyük avantaj sağlar.
GTmetrix Raporunun Ana Bölümleri
Performance
Sayfanın genel hız skorunu gösterir. Lighthouse ve Web Vitals metriklerine dayalıdır.
Structure
Site yapısını, kaynakların yüklenme sırasını ve optimize edilmemiş öğeleri listeler.
Waterfall
Her kaynağın yüklenme zamanını ayrıntılı olarak gösterir. Darboğaz tespitinde kritik öneme sahiptir.
GTmetrix Test Adımları
- GTmetrix.com adresine gidin ve ücretsiz bir hesap oluşturun.
- Test edilecek sayfanın URL’sini girin.
- Test konumu, tarayıcı ve bağlantı hızını seçin.
- Analizi başlatın ve sonuçları inceleyin.
- Öncelikli sorunları belirleyip iyileştirmeleri uygulayın.
GTmetrix Kullanım Avantajları
Konum Bazlı Test
Farklı lokasyonlardan test yaparak küresel kullanıcılar için gerçekçi performans verileri sağlar.
Kaynak Analizi
Waterfall Chart sayesinde yavaş yüklenen dosyaları ve sorunlu kaynakları kolayca belirleyebilirsiniz.
Bağlantı Simülasyonu
Farklı internet hızlarını simüle ederek düşük bant genişliğinde sitenizin nasıl davrandığını test edebilirsiniz.
İpucu
GTmetrix’te “Structure” sekmesindeki sorunları çözmek, genellikle “Performance” skorunu da iyileştirir. Bu nedenle raporu bütüncül olarak değerlendirin.
Test Sonuçlarını Yorumlama ve Önceliklendirme
Web performans test araçlarından (Google Lighthouse, PageSpeed Insights, GTmetrix) elde edilen raporlar, yalnızca sayısal skorlar vermekle kalmaz; aynı zamanda kullanıcı deneyimi üzerinde doğrudan etkili olan teknik sorunları da ortaya çıkarır. Ancak bu verilerin gerçek anlamda faydalı olabilmesi için, sonuçların doğru yorumlanması ve yapılacak iyileştirmelerin önceliklendirilmesi gerekir. Her sorun eşit derecede kritik değildir; bazıları kullanıcı deneyimini doğrudan etkilerken, bazıları uzun vadeli optimizasyon hedefleri kapsamında ele alınabilir.
Önceliklendirme süreci, hem teknik hem de ticari açıdan stratejik kararlar gerektirir. Örneğin, Largest Contentful Paint (LCP) süresini iyileştirmek, kullanıcıların sayfayı daha hızlı algılamasını sağlar ve hemen çıkma oranlarını düşürür. Buna karşılık, yalnızca düşük öncelikli bir JavaScript uyarısını çözmek, aynı ölçüde bir kullanıcı deneyimi artışı sağlamayabilir.
Test Sonuçlarını Okuma Adımları
- Öncelikle kritik metriklere odaklanın: LCP, FCP, INP, CLS gibi Core Web Vitals metrikleri, kullanıcı deneyimini doğrudan etkiler.
- Kaynak bazlı sorunları belirleyin: Yavaş yüklenen görseller, büyük JavaScript dosyaları veya bloklayıcı CSS’ler gibi.
- Etki alanını değerlendirin: Sorun tüm sayfaları mı etkiliyor yoksa yalnızca belirli bir bölümde mi ortaya çıkıyor?
- Kazanç tahminini yapın: İyileştirme sonucunda ne kadar hız artışı sağlanabileceğini tahmin edin.
- Uygulama maliyetini göz önünde bulundurun: Bazı optimizasyonlar çok emek isterken, sağladığı fayda sınırlı olabilir.
Önceliklendirme Kategorileri
Kritik
Kullanıcı deneyimini doğrudan etkileyen ve hemen çözülmesi gereken sorunlardır. Örneğin, mobil cihazlarda 5 saniyeden uzun yükleme süreleri veya bozuk görseller.
Yüksek Öncelik
Hız ve etkileşim süresini önemli ölçüde etkileyen ancak kritik seviyede olmayan sorunlardır. Örneğin, render-blocking JavaScript dosyaları.
Orta/Düşük Öncelik
SEO’ya veya uzun vadeli bakım süreçlerine katkı sağlayan, ancak anlık kullanıcı deneyimine düşük etki eden optimizasyonlardır. Örneğin, HTML minify eksiklikleri.
Feature List ile Uygulama Stratejisi
Etkisi En Yüksek Sorunları Önce Çözün
Örneğin, görselleri sıkıştırmak genellikle %20-40 arasında bir hız artışı sağlar.
Kolay Kazanç Sağlayan İyileştirmeler
HTTP cache ayarlarını optimize etmek veya gereksiz script’leri kaldırmak, hızlı uygulanabilir çözümler arasındadır.
Uzun Vadeli Yatırımlar
CDN entegrasyonu, modern framework’lere geçiş veya altyapı optimizasyonu gibi yüksek maliyetli ama kalıcı çözümler.
İpucu
Test sonuçlarını yorumlarken tek bir araca bağlı kalmayın. Lighthouse, GTmetrix ve WebPageTest gibi farklı kaynaklardan gelen verileri birleştirerek daha sağlıklı kararlar alın.
Mobil ve Masaüstü Sonuçları Karşılaştırma
Web performans test araçları, genellikle hem mobil hem de masaüstü cihazlar için ayrı değerlendirmeler sunar. Bunun nedeni, kullanıcıların cihaz türüne bağlı olarak farklı ağ koşulları, donanım kapasiteleri ve ekran boyutlarıyla web sitenizi deneyimlemesidir. Mobil cihazlarda düşük işlemci gücü ve daha yavaş ağ bağlantıları yaygın olduğundan, mobil puanlar çoğu zaman masaüstü puanlarına kıyasla daha düşük çıkar. Bu farkı anlamak ve performans optimizasyonlarını bu bağlamda yapmak, kullanıcı memnuniyeti açısından kritik öneme sahiptir.
Masaüstü testlerinde genellikle yüksek bant genişliği, güçlü işlemci performansı ve hızlı render süreleri baz alınır. Bu nedenle, masaüstü puanları çoğunlukla yüksek görünse de, bu sonuçlara güvenerek mobil deneyimi ihmal etmek ciddi bir hatadır. Google'ın Mobile-First Indexing yaklaşımı, SEO sıralamalarında mobil deneyimi öncelikli olarak değerlendirdiğinden, mobil optimizasyon eksiklikleri organik trafik üzerinde doğrudan olumsuz etki yaratabilir.
Mobil ve Masaüstü Testlerinin Farklı Yorumlanması
Mobil Testler
Mobil testler, düşük donanım gücünü ve daha yavaş ağ hızlarını simüle eder. Kaynak optimizasyonu, görsel sıkıştırma ve render-blocking script’lerin azaltılması önceliklidir.
Masaüstü Testleri
Masaüstü testleri yüksek hız ve işlem gücü varsayar. Daha çok büyük dosyalar, render süreleri ve sunucu yanıt zamanları gibi alanlara odaklanılır.
Performans Farklarını Yönetme Stratejileri
Kaynak Ayrımı
Masaüstü için yüksek çözünürlüklü görseller kullanılırken, mobil için düşük boyutlu versiyonlar sunmak.
Koşullu Yükleme
Mobilde gereksiz JavaScript ve CSS dosyalarını yüklememek, yalnızca cihaz için gerekli kaynakları göndermek.
Responsive Tasarım İyileştirmeleri
Ekran boyutuna uygun tasarım ve içerik düzenlemeleri ile her cihazda optimum görünüm sağlamak.
Mobil ve Masaüstü Karşılaştırma Tablosu
| Kriter | Mobil | Masaüstü |
|---|---|---|
| Bağlantı Hızı | 3G/4G | Yüksek hızlı fiber/ethernet |
| İşlem Gücü | Düşük-orta | Yüksek |
| Render Süresi | Daha uzun | Daha kısa |
| Öncelikli Optimizasyon | Kaynak sıkıştırma, lazy loading | Sunucu optimizasyonu, büyük dosya yönetimi |
İpucu
Mobil puanlar masaüstüne göre düşük çıkıyorsa, öncelikle görsel optimizasyonu, render-blocking kaynakların kaldırılması ve tarayıcı önbellekleme sürelerinin artırılması üzerinde çalışın.
Raporlardaki “Opportunity” ve “Diagnostics” Bölümlerini Anlama
Google Lighthouse, PageSpeed Insights ve benzeri performans test araçları, rapor sonuçlarını kategorilere ayırarak sunar. Bunlar arasında “Opportunities” (Fırsatlar) ve “Diagnostics” (Teşhisler) bölümleri, optimizasyon sürecinde hangi adımlara öncelik verilmesi gerektiğini anlamak açısından oldukça değerlidir. “Opportunities” bölümü, doğrudan hız artışı sağlayabilecek eylem önerilerini içerirken, “Diagnostics” bölümü site mimarisi, kod yapısı ve kullanıcı deneyimi ile ilgili derinlemesine teknik değerlendirmeler sunar.
Bu iki bölüm arasındaki farkı doğru anlamak, iyileştirme sürecinde zaman ve kaynak kullanımını verimli hale getirir. Örneğin, “Opportunities” kısmında “Serve images in next-gen formats” önerisini görmek, WebP veya AVIF formatında görseller kullanarak anında yükleme süresini kısaltabileceğiniz anlamına gelir. Ancak “Diagnostics” kısmında yer alan “Ensure text remains visible during webfont load” uyarısı, doğrudan hız skorunu etkilemeyebilir, fakat kullanıcı deneyimini uzun vadede iyileştirir.
Opportunities Bölümünün Özellikleri
Anında Etki Sağlayan İyileştirmeler
Örneğin görselleri optimize etmek, tarayıcı önbellekleme eklemek, render-blocking script’leri azaltmak.
Performans Skoruna Doğrudan Katkı
Buradaki adımlar uygulandığında, Lighthouse skoru üzerinde doğrudan yükselme gözlenir.
Kısa Vadeli Sonuçlar
Opportunities adımları genellikle gün veya saat bazında hızlıca uygulanabilir.
Diagnostics Bölümünün Özellikleri
Derin Teknik Analiz
Diagnostics, kod yapısı, erişilebilirlik, mobil uyum ve kullanılabilirlik konularında detaylı inceleme yapar.
Uzun Vadeli İyileştirmeler
Genellikle altyapı değişiklikleri, framework optimizasyonları ve kod refactoring süreçlerini kapsar.
Opportunities ve Diagnostics Karşılaştırma Tablosu
| Özellik | Opportunities | Diagnostics |
|---|---|---|
| Odak Noktası | Hız optimizasyonu | Teknik kalite ve mimari |
| Etkisi | Kısa vadede yüksek | Uzun vadede sürdürülebilir |
| Uygulama Süresi | Hızlı (saat/gün) | Orta/uzun (hafta/ay) |
| Örnek | Görsel sıkıştırma | Render stratejisi güncelleme |
İpucu
“Opportunities” bölümündeki iyileştirmeleri uyguladıktan sonra “Diagnostics” önerilerini hayata geçirerek uzun vadeli performans istikrarı sağlayın.
Sürekli Performans İzleme için Otomasyon Araçları
Tek seferlik Lighthouse/PSI/GTmetrix testleri, sorunları görmek için idealdir; ancak web performansı, kod, içerik ve üçüncü taraf script’lerdeki küçük değişikliklerle her gün dalgalanır. Bu yüzden sürdürülebilir başarı için otomasyon şarttır. Otomasyon; belirli aralıklarla ölçüm alma, “performans bütçeleri”ne göre geç/kaldı değerlendirmesi yapma, regresyon olduğunda ekibi anında uyarmayı kapsar. Amaç, performansı tıpkı testler ve güvenlik kontrolleri gibi CI/CD’nin doğal bir aşaması haline getirmektir.
Otomasyon stratejisinin kalbi iki veri kaynağına dayanır: Laboratuvar (Synthetic) ve Saha (RUM). Laboratuvar testleri, sabit koşullarda tekrarlanabilirlik sağlar; RUM (Real User Monitoring) ise gerçek kullanıcıların cihaz, ağ ve konum çeşitliliğini yansıtır. En iyi sonuç için her iki yaklaşımı birlikte konumlandırıp, CI’de “kapı” görevi gören laboratuvar testlerine ve canlıda “erken uyarı” görevi gören RUM’a rol verin.
Başlıca otomasyon araçları ve kullanımları
Lighthouse CI (LHCI)
CI/CD’de her PR ve her deploy’da Lighthouse koşturur, skor ve metrikleri karşılaştırır. Performance Budget tanımlar (örn. LCP < 2.5s, TBT < 200ms) ve eşik aşıldığında build’i başarısız bırakabilir.
GitHub Actions / GitLab CI entegrasyonu hazır.PageSpeed Insights API + CrUX
PSI API ile günlük skor çekip zaman serisi oluşturun; CrUX (Chrome UX Report) ile gerçek kullanıcı metriklerini (LCP/CLS/INP dağılımı) periyodik izleyin.
Gerçek kullanıcı verisi (RUM) ile karar kalitesi artar.WebPageTest / GTmetrix Monitoring
Belirli lokasyon, cihaz ve ağ senaryolarında planlı test; filmstrip, haritalar ve waterfall ile regresyon kaynağını hızla tespit.
Uyarı/rapor e-postası ve webhook desteği.RUM vs. Synthetic: birlikte nasıl kullanılır?
| Yaklaşım | Güçlü Yanı | Sınırlama | İdeal Kullanım |
|---|---|---|---|
| RUM (Gerçek Kullanıcı) | Cihaz/ağ çeşitliliğini yansıtır; trend analizi için mükemmeldir. | Kontrol zayıf, gürültü fazladır; hata kök nedeni tespiti zor olabilir. | Canlı izleme, SLO takibi, bölge/cihaz bazlı alarm. |
| Synthetic (Laboratuvar) | Tekrarlanabilir; değişikliğin etkisini izolasyonlu ölçer. | Gerçek kullanıcı çeşitliliğini yansıtmaz. | CI kapısı, PR karşılaştırması, kök neden analizi. |
Performans bütçeleri ve eşikler
Bütçe, “bu sayfa/route şu sınırı aşamaz” kuralıdır. Tipik bir set: LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms, Top JS ≤ 170KB, Top CSS ≤ 60KB, Top Image ≤ 1MB. LHCI, WebPageTest API veya SpeedCurve/Calibre gibi ticari araçlarla bu eşikleri build breaker (build’i durdur) ya da soft gate (uyarı ver) olarak uygularsınız. Bütçeleri “şablon” değil “başlangıç hipotezi” olarak belirleyin; gerçek trafik ve iş hedeflerine göre çeyrek dönemlerde güncelleyin.
CI/CD entegrasyon akışı (örnek)
Pull Request Aşaması
DakikalarÖn-derleme (preview) ortamında LHCI koşturulur; PR açıklamasına skor/maddeler yorumlanır. Eşik aşımı varsa PR kırmızıya düşer.
Staging Sonrası
PlanlıWebPageTest/GTmetrix senaryoları staging’de tetiklenir; filmstrip ve waterfall değişimleri kıyaslanır.
Prod Deploy + RUM
SürekliCrUX/Analytics RUM event’leri toplanır; SLO’lar izlenir (örn. ülke=TR, cihaz=Android için LCP p90 ≤ 3.0s).
Alarm ve görünürlük: kimin haberi olacak?
Slack/Teams Entegrasyonu
Eşik aşıldığında ekip kanalına otomatik mesaj; PR linki, test linki ve etkilenen metrikler tek mesajda.
Etiketleme ve Sahiplik
Raporları route/modül bazında etiketleyin (örn. checkout, product-listing) ve her etikete bir “owner” atayın.
Dashboard
Grafana/Data Studio ile LCP/INP/CLS p75 zaman serileri; versiyon/deploy notlarıyla korelasyon gösterin.
Uygulanabilir Kısa Rehber
1) LHCI ile PR kapısı kurun. 2) PSI API + CrUX ile günlük zaman serisi toplayın. 3) WebPageTest/GTmetrix ile haftalık senaryo testi planlayın. 4) Slack uyarıları ve bir “tek bakışta” dashboard hazırlayın. 5) Bütçeleri çeyrek bazında gözden geçirin.
Test Sonrası Performans İyileştirme Adımlarını Planlama
Web performansı testlerinden elde edilen veriler, yalnızca sayısal sonuçlardan ibaret değildir; bu veriler, sitenizin hız, etkileşim ve görsel istikrar açısından nasıl bir kullanıcı deneyimi sunduğunu gösteren stratejik bir yol haritasıdır. Ancak bu yol haritası, doğru şekilde yorumlanıp aksiyon planına dönüştürülmediğinde tek başına değer üretmez. Test sonrası iyileştirme süreci; önceliklendirme, uygulama, izleme ve tekrar test döngüsünden oluşur. Bu sistematik yaklaşım, performans sorunlarının kalıcı olarak çözülmesini ve gelecekte tekrarlamamasını sağlar.
Adım 1: Bulguları kategorize etme
İlk olarak test raporlarında çıkan sorunları kategorilere ayırmak gerekir. Bu ayrım genellikle üç ana grupta yapılır:
Hız ile ilgili sorunlar
Örneğin Largest Contentful Paint (LCP) süresinin yüksek olması, render engelleyici JS/CSS dosyaları veya ağır görseller.
Etkileşim sorunları
Interaction to Next Paint (INP) veya Total Blocking Time (TBT) değerlerinin kötü olması; kullanıcı etkileşimlerinin gecikmeli yanıtlanması.
Görsel kararlılık sorunları
Cumulative Layout Shift (CLS) değerinin yüksek olması; sayfa yüklenirken öğelerin kayması.
Adım 2: Önceliklendirme
Tüm sorunlar aynı etkiye sahip değildir. Kullanıcı deneyimini ve iş hedeflerini en çok etkileyen sorunlar öncelikli olarak ele alınmalıdır. Örneğin:
| Öncelik | Sorun | Beklenen Etki |
|---|---|---|
| Yüksek | 3MB üzerinde görsel dosyalar | Yükleme süresini 2-3 saniye kısaltır |
| Orta | Kritik CSS'in geç yüklenmesi | First Paint hızını artırır |
| Düşük | Küçük boyutlu JS dosyalarının minimize edilmemesi | Skorda %1-2 iyileşme sağlar |
Adım 3: Aksiyon planı oluşturma
Önceliklendirilmiş sorunlar için uygulanacak teknik adımlar net olarak belirlenmelidir. Bu adımlar; sorunu çözme yöntemi, sorumlu ekip üyesi ve tahmini çözüm süresini içermelidir.
Görsel Optimizasyonu
WebP formatına geçiş, lazy-loading kullanımı ve responsive boyutlandırma ile ortalama %40 dosya boyutu azaltma.
Kod Optimizasyonu
Kritik CSS’in inline olarak eklenmesi, gereksiz JS bağımlılıklarının kaldırılması ve minify işlemleri.
Önbellekleme
HTTP cache-control ayarlarının optimize edilmesi, CDN entegrasyonu ile hızlı veri sunumu.
Adım 4: İzleme ve tekrar test
İyileştirme adımları uygulandıktan sonra, performansın istenilen seviyeye gelip gelmediği mutlaka ölçülmelidir. Burada otomasyon araçları devreye girer; düzenli testler ve performans bütçeleri ile kalite sürekliliği sağlanır.
İpuçları
1) Öncelikle kullanıcı deneyimine en büyük etkisi olan sorunlardan başlayın. 2) Her değişiklik sonrası mutlaka ölçüm alın. 3) Performans iyileştirmelerini düzenli olarak gözden geçirin.
