# Core Web Vitals Optimizasyonu: Lighthouse 90+ Puanı için 12 Adımlık Rehber
Web sitenizin performansı, kullanıcı deneyimini ve Google sıralamalarınızı doğrudan etkiler. Core Web Vitals optimizasyonu modern web geliştirmenin temel konularından biri. Bu rehberle Lighthouse puanınızı 90+ çıkarmak için gereken tüm adımları ayrıntılı şekilde öğreneceksiniz.
Google'ın 2021'den beri sıralama faktörü olarak kullandığı Core Web Vitals, web sitenizin başarısını belirleyen üç temel metrikten oluşur. Bu rehber Türk işletmeciler için hazırlanmış pratik çözümler sunuyor.
Core Web Vitals nedir ve neden önemli?
Core Web Vitals, Google'ın web sitelerinin kullanıcı deneyimini ölçmek için belirlediği üç temel performans metriği:
- Largest Contentful Paint (LCP): Sayfanın ana içeriğinin yüklenmesi (2.5 saniye altında olmalı) - First Input Delay (FID): Kullanıcı etkileşimine tepki süresi (100ms altında olmalı) - Cumulative Layout Shift (CLS): Sayfanın görsel kararlılığı (0.1 altında olmalı)
Bu metrikler web sitenizin Google'da üst sıralarda yer alması için önemli. E-ticaret siteleri için sayfa hızının %1 iyileşmesi %2 dönüşüm artışı sağlayabiliyor.
Adım 1: Mevcut durumu analiz edin
Lighthouse audit çalıştırarak başlangıç puanınızı belirleyin. Chrome DevTools'u açın (F12) ve Lighthouse sekmesine gidin.
Pratik örnek: Bir e-ticaret sitesi için tipik başlangıç puanları: - Performance: 45-60 - LCP: 4.2 saniye - FID: 180ms - CLS: 0.25
PageSpeed Insights kullanarak hem masaüstü hem mobil performansı kontrol edin. Bu araçlar size ayrıntılı optimizasyon önerileri sunacak.
Adım 2: Resim optimizasyonunu gerçekleştirin
Web sitelerindeki en büyük performans sorunlarının %80'i resim dosyalarından kaynaklanır. Modern görüntü formatları kullanarak önemli iyileştirmeler elde edebilirsiniz.
Uygulama adımları: 1. JPEG/PNG dosyalarını WebP formatına dönüştürün 2. Yeni nesil formatlar için `<picture>` etiketi kullanın 3. Lazy loading uygulayın 4. Responsive images ayarlayın
Kod örneği: ```html <picture> <source srcset="urun.webp" type="image/webp"> <img src="urun.jpg" alt="Ürün Resmi" loading="lazy"> </picture> ```
Sonuç: 2MB'lık JPEG dosya 400KB WebP'ye dönüştürülerek %80 boyut azalımı sağlanır.
Adım 3: CSS ve JavaScript optimizasyonu
Critical CSS stratejisini uygulayarak above-the-fold içeriğin hızlı yüklenmesini sağlayın.
CSS optimizasyon teknikleri: 1. Önemli CSS'i inline olarak yerleştirin 2. Gereksiz CSS kurallarını temizleyin 3. CSS dosyalarını küçültün 4. Media queries kullanarak koşullu yükleme yapın
JavaScript iyileştirmeleri: - Bundle splitting uygulayın - Code splitting ile sadece gerekli kodu yükleyin - Tree shaking ile kullanılmayan kodu kaldırın - Async/defer özelliklerini kullanın
Örnek iyileştirme: 500KB JavaScript bundlei code splitting ile 3 ayrı 150KB dosyaya bölünerek ilk yüklemede sadece 150KB indiriliyor.
Adım 4: Font yükleme stratejinizi optimize edin
Web font optimizasyonu CLS değerinizi önemli ölçüde iyileştirebilir.
Font optimizasyon adımları: 1. `font-display: swap` kullanın 2. Font dosyalarını preload edin 3. WOFF2 formatını tercih edin 4. Font subsetting uygulayın
Kod örneği: ```html <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> ```
```css @font-face { font-family: 'CustomFont'; src: url('font.woff2') format('woff2'); font-display: swap; } ```
Adım 5: Server response time optimizasyonu
TTFB (Time to First Byte) değerinizi 200ms altına indirmeyi hedefleyin.
Server optimizasyon teknikleri: 1. CDN kullanımı (Cloudflare, AWS CloudFront) 2. Server-side caching (Redis, Memcached) 3. Database query optimizasyonu 4. GZIP sıkıştırma etkinleştirme
Pratik örnek: Türkiye'deki bir sunucudan Avrupa CDN'ine geçiş yapan işletme TTFB süresini 800ms'den 150ms'ye düşürdü.
Adım 6: Third-party script yönetimi
Üçüncü taraf scriptler performansınızı ciddi şekilde etkileyebilir. Google Analytics, Facebook Pixel gibi araçları optimize edin.
Optimizasyon stratejileri: 1. Script yüklemeyi geciktirin 2. Partytown gibi web worker çözümlerini kullanın 3. Gereksiz tracking scriptlerini kaldırın 4. Self-hosting uygulayın (Google Fonts için)
Kod örneği: ```html <!-- Gecikmeli Google Analytics yüklemesi --> <script> window.addEventListener('load', function() { // GA kodunu buraya yerleştir }); </script> ```
Adım 7: HTML yapısını iyileştirin
Anlamsal HTML kullanarak hem performans hem SEO avantajı elde edin.
HTML optimizasyon kontrol listesi: 1. Gereksiz DOM elementlerini kaldırın 2. Inline CSS/JS'yi azaltın 3. HTML dosyasını küçültün 4. Meta etiketlerini optimize edin
İyileştirme örneği: 15KB HTML dosyası küçültme ile 11KB'ye düşürüldü (%27 azalma).
Adım 8: Preloading ve prefetching stratejileri
Kaynak ipuçları kullanarak önemli kaynakları önceden yükleyin.
Resource hints teknikleri: 1. `preload` - Kritik kaynaklar için 2. `prefetch` - Sonraki sayfa kaynakları için 3. `dns-prefetch` - Dış domain bağlantıları için 4. `preconnect` - Kritik üçüncü taraf bağlantılar için
Uygulama örneği: ```html <link rel="preload" href="critical.css" as="style"> <link rel="prefetch" href="next-page.js"> <link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="preconnect" href="//api.example.com"> ```
Adım 9: Mobile-first optimizasyon
Mobil performans öncelikli yaklaşım benimseyin. Türkiye'de internet trafiğinin %65'i mobil cihazlardan geliyor.
Mobil optimizasyon checklist: 1. Touch target boyutlarını 44px+ yapın 2. Viewport meta etiketini doğru ayarlayın 3. Responsive images kullanın 4. AMP sayfaları oluşturmayı değerlendirin
Pratik sonuç: Mobil-first yaklaşım benimseyen e-ticaret sitesi mobil dönüşüm oranını %35 artırdı.
Adım 10: Caching stratejinizi geliştirin
Etkili caching stratejisi ile repeat visitor performansını önemli ölçüde artırın.
Caching seviyeleri: 1. Browser caching (Cache-Control headers) 2. CDN caching 3. Server-side caching 4. Application-level caching
Header örnekleri: ``` Cache-Control: public, max-age=31536000 (statik kaynaklar için) Cache-Control: public, max-age=3600 (HTML için) ```
Adım 11: Performance monitoring kurulumu
Sürekli izleme sistemi kurarak performans gerilemelerini önleyin.
İzleme araçları: 1. Google Search Console (Core Web Vitals raporu) 2. Real User Monitoring (RUM) 3. Synthetic monitoring 4. Özel dashboard'lar
Lovefengis olarak müşterilerimiz için özel performans dashboard'ları oluşturarak sürekli optimizasyon sağlıyoruz. Bu sayede performans sorunları anında tespit edilip çözülüyor.
Adım 12: A/B testing ve sürekli iyileştirme
Performans A/B testleri yaparak optimizasyonlarınızın etkisini ölçün.
Test edilecek alanlar: 1. Above-the-fold içerik yapısı 2. Resim yükleme stratejileri 3. Font loading teknikleri 4. Third-party script yönetimi
Başarı hikayesi: Türk e-ticaret firması 12 haftalık optimizasyon sürecinde Lighthouse puanını 42'den 94'e çıkardı. Organik trafik %120, dönüşüm oranı %45 arttı.
Sonuç ve eylem planı
Core Web Vitals optimizasyonu uzun vadeli bir süreç. Bu 12 adımlı rehberi sistematik olarak uygulayarak:
- 2-4 hafta içinde LCP değerinizi %50+ iyileştirebilirsiniz - FID problemlerini neredeyse tamamen çözebilirsiniz - CLS değerinizi 0.1'in altına indirebilirsiniz - Genel Lighthouse puanınızı 90+ çıkarabilirsiniz
Hemen başlayabileceğiniz önemli adımlar: 1. Mevcut durumu Lighthouse ile analiz edin 2. Resim optimizasyonuna başlayın 3. Critical CSS stratejisini uygulayın 4. CDN kurulumunu gerçekleştirin
Profesyonel destek alarak bu süreçleri daha hızlı ve etkili şekilde yönetebilirsiniz. Lovefengis ile Core Web Vitals optimizasyonu konusunda profesyonel destek almak isterseniz bize ulaşın.
