Lighthouse Performans Skoru Nedir ve Neden 100 Puan Hedeflenmeli?
Google Lighthouse, web sayfalarının performans, erişilebilirlik, en iyi uygulamalar ve SEO açısından otomatik olarak değerlendirilmesini sağlayan açık kaynaklı bir denetim aracıdır. 2018 yılında Chrome tarayıcısına entegre edilen bu araç, geliştiricilerin sayfalarını gerçek dünya koşullarında test etmelerine olanak tanır. Lighthouse 10 sürümüyle birlikte, simüle edilmiş 4G bağlantısı ve 4x CPU yavaşlatma gibi standart test ortamları sunarak daha tutarlı sonuçlar üretmektedir.
100 puan Lighthouse skoru elde etmek yalnızca prestij meselesi değildir; doğrudan iş sonuçlarına etki eden somut faydalar sağlar. HTTP Archive verilerine göre, Lighthouse performans skoru 90'ın üzerinde olan siteler, 50'nin altında olanlara kıyasla ortalama yüzde 32 daha fazla organik trafik almaktadır. Ayrıca Google, 2021 yılından itibaren Core Web Vitals'ı sıralama faktörü olarak kullanmaya başlamış, bu da sayfa hızının SEO üzerindeki etkisini resmi olarak teyit etmiştir.
Walmart tarafından yapılan bir araştırma, sayfa yükleme süresinin her 100 milisaniye artışında dönüşüm oranlarının yüzde 2 azaldığını ortaya koymuştur. Benzer şekilde, BBC'nin yayınladığı rapora göre her 1 saniyelik gecikme, kullanıcı katılımında yüzde 10'luk bir düşüşe neden olmaktadır. Bu veriler, 100 Lighthouse puanının salt teknik bir başarı olmadığını, doğrudan gelir ve kullanıcı memnuniyeti ile ilişkili olduğunu göstermektedir.
Lighthouse Skorunu Etkileyen Temel Faktörler
Lighthouse performans değerlendirmesi, laboratuvar verilerine dayalı olarak hesaplanır ve altı temel metriği kapsar. Bu metrikler; First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS), Speed Index ve Time to Interactive (TTI) olarak sıralanabilir. Her bir metrik, kullanıcı deneyiminin farklı bir boyutunu ölçer ve toplam puanın ağırlıklı ortalaması üzerinde farklı etkilere sahiptir.
2024 yılı itibarıyla Lighthouse 12 sürümünde bu ağırlıklar güncellenmiştir. FCP yüzde 10, Speed Index yüzde 10, LCP yüzde 25, TBT yüzde 30, CLS yüzde 25 oranında toplam puana katkıda bulunmaktadır. Bu dağılım, etkileşim gecikmesinin ve görsel kararlılığın en az kaynak yükleme süresi kadar kritik olduğunu göstermektedir.
Core Web Vitals Metriklerini Anlamak ve Optimize Etmek
Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için tanımladığı üç temel metrikten oluşur: LCP, CLS ve INP (Interaction to Next Paint). Bu metrikler, 75. yüzdelik dilimde ölçülür ve "iyi", "iyileştirilmesi gerekiyor", "kötü" olmak üzere üç kategoriye ayrılır. LCP için iyi eşik 2.5 saniye, CLS için 0.1 ve INP için 200 milisaniye olarak belirlenmiştir.
Largest Contentful Paint, sayfanın ana içeriğinin yüklenme süresini ölçer ve genellikle viewport'taki en büyük görsel veya metin bloğunu ifade eder. LCP'yi iyileştirmek için ilk adım, hero görselin boyutunu ve formatını optimize etmektir. WebP formatı, JPEG ve PNG'ye kıyasla yüzde 25-35 daha küçük dosya boyutları sunarken, AVIF formatı bu avantajı yüzde 50'ye kadar çıkarabilmektedir.
LCP Optimizasyonu İçin Pratik Adımlar
LCP süresini 2.5 saniyenin altına indirmek için <link rel="preload"> direktifi kritik rol oynar. Hero görseli için <link rel="preload" as="image" href="hero.webp"> ifadesini HTML head bölümüne yerleştirmek, tarayıcının görseli keşfetmeden önce indirmeye başlamasını sağlar. Cloudflare'nin 2023 raporuna göre, preload uygulayan sitelerde LCP süresi ortalama 450 milisaniye kısalmıştır.
Bunun yanı sıra, kritik CSS yaklaşımı (Critical CSS) uygulamak LCP'yi önemli ölçüde iyileştirir. Sayfanın üst kısmında görünen stilleri ayrı bir dosyada satır içi olarak yerleştirmek, render-blocking kaynakları ortadan kaldırır. Statik analiz araçları kullanılarak otomatik olarak oluşturulabilen bu yaklaşım, Chrome DevTools'un Coverage sekmesi aracılığıyla doğrulanabilir.
Cumulative Layout Shift, sayfa yüklenirken öğelerin beklenmedik şekilde kaymasını ölçer ve CLS değeri beklenen kayma mesafesi ile etkilenen alanın çarpımıyla hesaplanır. CLS'yi azaltmak için tüm görsellerde width ve height özniteliklerinin açıkça belirtilmesi gerekir. Bu öznitelikler, tarayıcının görsel yüklenmeden önce ayıracağı alanı hesaplamasını sağlayarak kaymayı önler.
INP Optimizasyonu ve JavaScript Performansı
Interaction to Next Paint, FID (First Input Delay) metriğinin yerini almış olup, kullanıcının bir etkileşimde bulunması ile sonraki görsel güncelleme arasındaki süreyi ölçer. INP'yi iyileştirmek için ana thread'i uzun süre meşgul eden JavaScript görevlerini parçalamak gerekir. 50 milisaniyeden uzun süren görevler "uzun görev" (long task) olarak kabul edilir ve INP puanını doğrudan olumsuz etkiler.
Web Worker'lar kullanmak, ana iş parçacığından yoğun hesaplamaları arka plana taşıyarak INP'yi iyileştirir. Örneğin, e-ticaret sitelerinde ürün filtreleme işlemleri Web Worker'da çalıştırılırsa, ana thread serbest kalır ve kullanıcı etkileşimleri gecikmeden yanıtlanır. V8 motorunun güncel sürümleri, Web Worker'larda yapılan hesaplamaları yüzde 30'a kadar daha verimli çalıştırmaktadır.
Görüntü ve Medya Optimizasyonu Stratejileri
Web sayfalarının ortalama yüzde 51'i görsellerden oluşmaktadır ve HTTP Archive'ın 2023 verilerine göre, mobil sayfaların ortalama ağırlığı 2.045 KB olup bunun 1.024 KB'ı görsellere aittir. Bu oran, görsel optimizasyonunun toplam performans üzerindeki etkisinin ne kadar büyük olduğunu açıkça göstermektedir. Görsellerin optimize edilmemesi, hem bant genişliği israfına hem de artan LCP süresine yol açar.
Modern görsel formatları kullanmak, dosya boyutlarını önemli ölçüde azaltır. WebP formatı, JPEG'e kıyasla yüzde 25-35, PNG'ye kıyasla yüzde 26 daha küçük dosyalar üretir. AVIF formatı ise daha agresif sıkıştırma algoritmaları sayesinde yüzde 50'ye varan tasarruf sağlayabilir. Ancak Safari desteği 2020'de, Chrome desteği ise 2021'de eklendiğinden, eski tarayıcılar için fallback çözümleri sunmak gerekmektedir.
Responsive Görseller ve srcset Kullanımı
Responsive görseller, farklı ekran boyutları için optimize edilmiş varyantların sunulmasını sağlar. <img> etiketinde srcset ve sizes özniteliklerini kullanmak, tarayıcının cihazın ekran boyutuna ve piksel yoğunluğuna en uygun görseli seçmesine olanak tanır. Örneğin:
<img src="image-1x.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" sizes="(max-width: 600px) 100vw, 50vw" alt="Açıklayıcı metin">
Bu yaklaşım, mobil kullanıcıların küçük ekranları için gereksiz büyük görseller indirmesini önler. Google'ın kendi mühendislik blogunda paylaştığı verilere göre, responsive görseller kullanan sitelerde toplam sayfa ağırlığı yüzde 40-60 oranında azalmaktadır. Ayrıca <picture> etiketi kullanılarak AVIF ve WebP formatlarına tarayıcı desteğine göre geçiş yapılabilir.
Lazy Loading ve Fetchpriority
Lazy loading, viewport dışındaki görsellerin yalnızca kullanıcı o kaydırma yaptığında yüklenmesini sağlar. HTML5 native lazy loading, JavaScript kütüphanelerine gerek kalmadan loading="lazy" özniteliği ile etkinleştirilebilir. Chrome verilerine göre, native lazy loading kullanılan sayfalarda ilk yükleme sırasında yüzde 70'e kadar daha az görsel indirilmektedir.
fetchpriority="high" özniteliği ise kritik hero görsellerin önceliklendirilmesini sağlar. Bu öznitelik, 2023 itibarıyla Chrome ve Edge tarafından tam olarak desteklenmekte olup LCP süresini ortalama 100-200 milisaniye kısaltabilir. Ancak lazy loading'in hero görselde kullanılmaması gerektiği unutulmamalıdır; aksi takdirde LCP süresi olumsuz etkilenir.
CSS ve JavaScript Optimizasyonu Teknikleri
CSS ve JavaScript dosyaları, render-blocking kaynaklar olarak sınıflandırılır ve indirilip ayrıştırılana kadar tarayıcının sayfayı oluşturmasını engeller. HTTP Archive verilerine göre, ortalama bir mobil sayfada 75 KB CSS ve 444 KB JavaScript bulunmaktadır. Bu kaynakları optimize etmek, hem FCP hem de TBT metriklerini doğrudan iyileştirir.
CSS dosyalarını küçültmek (minification) ve sıkıştırmak (compression), ilk adım olarak değerlendirilmelidir. Minification, boşluk ve yorumları kaldırarak dosya boyutunu yüzde 20-30 azaltır. Brotli sıkıştırma algoritması, geleneksel Gzip'e kıyasla yüzde 15-20 daha iyi sıkıştırma oranları sunar. Cloudflare'nin varsayılan sıkıştırma algoritması Brotli'dir ve performans üzerinde anlamlı etki yaratmaktadır.
Kritik CSS ve CSS Trimming
Kritik CSS (Critical CSS) tekniği, sayfanın üst kısmını oluşturmak için gereken minimum CSS kurallarını satır içi olarak <style> etiketleri içine yerleştirmeyi içerir. Geri kalan CSS ise media="print" veya rel="preload" ile asenkron olarak yüklenir. Bu yaklaşım, FCP süresini ortalama 200-500 milisaniye kısaltabilir.
Araçlar arasında Critters, Penthouse ve Critical en popüler seçeneklerdir. Bu araşlar, HTML çıktısını analiz ederek gerekli CSS kurallarını otomatik olarak çıkarır. Build sürecine entegre edilen bu araçlar, geliştirici deneyimini bozmadan performans iyileştirmesi sağlar. Özellikle e-ticaret gibi büyük CSS dosyalarına sahip sitelerde bu yaklaşım dramatik fark yaratır.
JavaScript Bundle Optimizasyonu ve Code Splitting
Code splitting, tek büyük JavaScript bundle'ını daha küçük parçalara bölerek yalnızca gerektiğinde yüklenmesini sağlar. Webpack, Rollup ve Vite gibi modern bundler'lar, dinamik import ifadelerini kullanarak otomatik code splitting yapabilir. import('./module.js') sözdizimi, modülün yalnızca ihtiyaç duyulduğunda yüklenmesini sağlar.
Tree shaking, kullanılmayan kodun bundle'dan otomatik olarak çıkarılması sürecidir. ES modülleri ile yazılmış kodda etkili olan bu teknik, ESM'nin statik yapısı sayesinde derleyicinin hangi fonksiyonların kullanıldığını tespit etmesini mümkün kılar. Lodash yerine Lodash-es kullanmak, tree shaking'i etkinleştirir ve bundle boyutunu yüzde 70'e kadar azaltabilir.
defer ve async öznitelikleri, script etiketlerinin nasıl yükleneceğini kontrol eder. defer, script'in HTML ayrıştırılması tamamlandıktan sonra çalıştırılmasını sağlarken, async indirme tamamlanır tamamlanmaz çalıştırılmasını tetikler. Kritik olmayan üçüncü taraf script'lerinde async, sayfa işlevselliği için gerekli olanlarda defer tercih edilmelidir.
Caching Stratejileri ve CDN Kullanımı
Tarayıcı önbelleği, tekrar eden ziyaretlerde kaynakların yeniden indirilmesini önleyerek performansı artırır. Doğru yapılandırılmış bir önbellek stratejisi, dönüş kullanıcılarında sayfa yükleme süresini yüzde 80'e kadar azaltabilir. Cache-Control HTTP başlığı, önbellek davranışını kontrol etmek için en etkili mekanizmadır.
Statik varlıklar (CSS, JS, görseller, fontlar) için Cache-Control: public, max-age=31536000, immutable kullanılması önerilir. Bu yapılandırma, tarayıcıya varlığın bir yıl boyunca önbellekte kalacağını ve değişmeyeceğini bildirir. Cache busting için ise dosya adlarına hash değerleri eklenir; örneğin main.3a4b5c.js gibi. Bu yaklaşım, agresif önbelleklemenin avantajlarını korurken güncellemelerin de geçerli olmasını sağlar.
Service Worker ve Progressive Web App Stratejileri
Service Worker'lar, web sayfalarının çevrimdışı çalışmasını ve gelişmiş önbellek stratejileri uygulamasını sağlayan JavaScript tabanlı proxy'lerdir. Cache First, Network First ve Stale While Revalidate olmak üzere üç temel strateji vardır. Hangi stratejinin uygulanacağı, kaynağın doğasına göre belirlenir.
Stale While Revalidate stratejisi, önbellekten hızlıca yanıt verirken arka planda güncel sürümü indirir. Bu yaklaşım, statik içerikler için idealdir ve kullanıcıya her zaman hızlı yanıt sunar. Workbox kütüphanesi, Service Worker stratejilerini uygulamayı büyük ölçüde basitleştirir ve Google'ın kendi sitelerinde de aktif olarak kullanılmaktadır.
Content Delivery Network Mimarisi
CDN, içeriği kullanıcıya coğrafi olarak yakın edge sunuculardan sunarak gecikmeyi azaltır. Ortalama RTT (Round Trip Time) değeri, kaynak sunucuya 200 ms iken CDN üzerinden 20 ms'ye düşebilir. Bu azalma, özellikle uluslararası trafiğe sahip sitelerde dramatik performans iyileştirmesi sağlar.
Bulut tabanlı CDN sağlayıcıları (Cloudflare, Fastly, Akamai), HTTP/3 ve QUIC protokollerini varsayılan olarak desteklemektedir. HTTP/3, TCP yerine UDP üzerinde çalışarak bağlantı kurulum süresini ortadan kaldırır ve paket kaybına karşı daha dirençli hale getirir. Cloudflare'nin 2023 verilerine göre, HTTP/3 kullanan sitelerde ortalama sayfa yükleme süresi yüzde 12 azalmaktadır.
İleri Düzey Optimizasyon Teknikleri ve İzleme
100 Lighthouse puanına ulaşmak, sürekli bir optimizasyon sürecidir. Web Vitals JavaScript kütüphanesi, gerçek kullanıcı verilerini toplamak ve Lighthouse'un ölçtüğü metrikleri production ortamında izlemek için kullanılır. web-vitals npm paketi, Core Web Vitals değerlerini analitik servislerine gönderebilir ve performans regresyonlarını erken tespit etmeyi sağlar.
Resource Hints, tarayıcıya gelecekteki kaynak ihtiyaçları hakkında bilgi verir. preconnect, dns-prefetch, prefetch ve preload direktifi, farklı senaryolar için optimize edilmiş performans iyileştirmeleri sunar. Üçüncü taraf servisler için preconnect kullanmak, DNS araması ve TLS anlaşması için gereken süreyi önceden tamamlar.
Font Optimizasyonu ve FOIT/FOUT Önleme
Web fontları, genellikle göz ardı edilen ancak performans üzerinde önemli etkiye sahip kaynaklardır. Bir web fontu dosyası 50-200 KB arasında değişebilir ve yanlış yüklenmesi FOIT (Flash of Invisible Text) veya FOUT (Flash of Unstyled Text) sorunlarına yol açabilir. font-display: swap CSS özelliği, font yüklenene kadar yedek fontun gösterilmesini sağlar.
Font subsetting, yalnızca kullanılan karakterlerin font dosyasına dahil edilmesini sağlar. Latin alfabesi için tam bir font dosyası 100 KB iken, subsetting sonrası bu boyut 20-30 KB'a düşebilir. Google Fonts üzerinde sunulan fontlar otomatik olarak subset edilmiş olup, Unicode-range özelliği ile ek optimizasyon yapılabilir.
Üçüncü Taraf Script Yönetimi
Üçüncü taraf script'ler (analitik, reklam, sohbet widget'ları), ortalama bir sayfada 20'den fazla HTTP isteği oluşturabilir. HTTP Archive verilerine göre, mobil sayfaların yüzde 67'si üçüncü taraf kaynakları içermektedir ve bu kaynaklar toplam aktarım boyutunun yüzde 44'ünü oluşturmaktadır. Bu script'lerin yönetimi, TBT ve TTI metrikleri için kritik öneme sahiptir.
Partytown kütüphanesi, üçüncü taraf script'leri Web Worker'da çalıştırarak ana thread'i serbest bırakır. Bu yaklaşım, analitik ve reklam script'lerinin performans üzerindeki etkisini minimize eder. Alternatif olarak, kritik olmayan script'lerin IntersectionObserver ile sayfa yüklendikten sonra tetiklenmesi de etkili bir stratejidir.
Gerçek Kullanıcı İzleme ve Sürekli Optimizasyon
Laboratuvar verileri ile gerçek kullanıcı verileri arasında önemli farklılıklar olabilir. Lighthouse laboratuvar ortamında 100 puan alan bir site, düşük cihazlarda ve yavaş ağlarda çok farklı performans gösterebilir. Chrome User Experience Report (CrUX), gerçek dünya performans verilerini sağlar ve sıralama algoritması bu verilere dayanır.
RUM (Real User Monitoring) araçları (Datadog, New Relic, Sentry Performance), production ortamında Core Web Vitals değerlerini toplar. Bu veriler, hangi cihaz ve ağ koşullarında sorunlar yaşandığını tespit etmeyi sağlar. A/B testleri ile performans iyileştirmelerinin iş metriklerine etkisi ölçülmeli ve her değişikliğin gerçek kullanıcı deneyimini nasıl etkilediği analiz edilmelidir.
Sonuç olarak, 100 Lighthouse puanına ulaşmak disiplinli bir optimizasyon sürecinin ürünüdür. Metriklerin sürekli izlenmesi, regresyonların erken tespit edilmesi ve kullanıcı deneyiminin her zaman ön planda tutulması gerekmektedir. Web performansı, tek seferlik bir proje değil, sürekli iyileştirme gerektiren bir mühendislik disiplinidir.