Bir web sitesi tasarlarken estetik ve içerik kadar — belki daha fazla — sayfa performansı önem taşır. Google, 2021'den bu yana Core Web Vitals metriklerini sıralama faktörü olarak kullanıyor. Daha da önemlisi: yavaş bir site doğrudan satış kaybettirir.
📌 GERÇEK SENARYO: Bir mobilya firması, yeni web sitesini yayınladıktan sonra mobile hız skorunun 34 olduğunu fark etti. Ürün sayfaları 8-12 saniyede yükleniyordu. Mobil kullanıcıların %70'i siteyi terk ediyordu. Performans optimizasyonundan sonra skor 91'e, mobil satışlar ise %3 tıklama oranına yükseldi.
Core Web Vitals Nedir?
Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için belirlediği üç temel performans metriğidir:
- LCP — Largest Contentful Paint: Sayfanın en büyük içerik öğesinin (genellikle hero görseli veya ana başlık) yüklenme süresi. Hedef: 2,5 saniye altı
- CLS — Cumulative Layout Shift: Sayfa yüklenirken elementlerin beklenmedik yer değiştirmesi. Hedef: 0,1'in altı
- INP — Interaction to Next Paint: Kullanıcının bir butona tıklaması ile sayfanın tepki vermesi arasındaki süre. Hedef: 200ms altı
Lighthouse Skoru Nasıl Hesaplanır?
Google'ın Lighthouse aracı, web sitenizi Performance, Accessibility, Best Practices ve SEO olmak üzere dört kategoride 0-100 arasında puanlar. Biz genellikle Performance ve SEO puanlarına odaklanıyoruz.
Performance skoru hesaplanırken şu metrikler ağırlıklandırılır:
- FCP (First Contentful Paint) — %10
- LCP — %25
- Speed Index — %10
- Total Blocking Time — %30
- CLS — %25
Lighthouse 90+ Skoru İçin 8 Kritik Adım
1. Görsel Optimizasyonu
Görseller genellikle sayfa ağırlığının %60-70'ini oluşturur. Şu adımları uygulayın:
- AVIF veya WebP formatını kullanın (JPEG'e göre %30-50 daha küçük)
- Her görsel için
widthveheightattribute'u tanımlayın (CLS'yi önler) - Hero görselini
loading="eager", geri kalanlarıloading="lazy"yapın - Responsive görseller için
srcsetkullanın
2. JavaScript'i Optimize Edin
Gereksiz JavaScript hem yükleme süresini hem de INP'yi olumsuz etkiler:
- Kullanılmayan JS kütüphanelerini kaldırın
- Kritik olmayan scriptleri
deferveyaasyncyapın - Third-party scriptleri (analytics, chat widget) lazy load edin
- JavaScript bundle boyutunu tree-shaking ile küçültün
3. CSS Optimizasyonu
- Kritik CSS'i
<head>'de inline olarak tanımlayın - Kullanılmayan CSS'i PurgeCSS ile temizleyin
- CSS dosyalarını minify edin
- CSS animasyonlarında
transformveopacitykullanın (layout reflow tetiklemez)
4. Font Optimizasyonu
- Yalnızca ihtiyaç duyduğunuz font ağırlıklarını yükleyin
font-display: swapkullanın (FOIT'yi önler)- Font dosyalarını kendi sunucunuzda barındırın
<link rel="preconnect">ile Google Fonts bağlantısını önceden başlatın
5. Sunucu Tarafı Optimizasyonları
- Gzip veya Brotli sıkıştırması etkinleştirin
- Cache-Control header'larını doğru ayarlayın (statik dosyalar: min. 1 yıl)
- CDN kullanın (özellikle görsel dosyaları için)
- TTFB (Time to First Byte) 600ms altında tutun
6. Render-Blocking Kaynakları Elimine Edin
Tarayıcı, render-blocking resource yüklenene kadar sayfayı gösteremez. Bunu önlemek için:
- Kritik olmayan CSS'i async yükleyin
- JavaScript dosyalarını
<body>sonuna taşıyın <link rel="preload">ile kritik kaynakları önceden yükleyin
7. LCP'yi Doğrudan Hedefleyin
LCP skorunuzu iyileştirmenin en hızlı yolları:
- Hero görseli için
fetchpriority="high"ekleyin - Hero görselini CSS background yerine
<img>tag'i ile kullanın (preload edilebilir) - Görsel CDN'den sunun
- LCP öğesi metin ise font preload yapın
8. CLS'yi Sıfıra Yaklaştırın
- Tüm görsellere
widthveheightekleyin - Reklam ve embed içerikleri için min-height tanımlayın
- Web fontlarında
font-display: swapkullanın - Dinamik olarak eklenen içerikleri sayfa yüklenmeden önce yerleştirin
💡 İPUCU: Chrome DevTools'da Performance sekmesini ve Lighthouse'u ücretsiz kullanabilirsiniz. Ancak mobile ve desktop skorları önemli ölçüde farklılık gösterir — her ikisini de test edin.
PageSpeed Insights vs Lighthouse
Google'ın PageSpeed Insights aracı, hem lab verileri (Lighthouse) hem de gerçek kullanıcı verileri (CrUX - Chrome User Experience Report) kullanır. Lighthouse skoru anlık ölçüm verirken, CrUX son 28 günün ortalamasını gösterir. SEO için önemli olan CrUX verisidir.
Sonuç: Performans Yatırımının Geri Dönüşü
Web sitesi performansına yatırım yapmak somut iş sonuçları üretir. Yavaş bir siteden hızlı bir siteye geçiş genellikle şu sonuçları doğurur:
- Hemen çıkma oranında %20-40 azalma
- Sayfa başına görüntülenme oranında artış
- SEO sıralamalarında iyileşme
- Form ve satış dönüşüm oranında artış
Hızlı İşler olarak geliştirdiğimiz tüm web sitelerinde Lighthouse Performance skoru minimum 85, hedef 95+ olarak belirliyoruz.