Hızlı bir site sadece teknik bir başarı değildir; satışa dönüşen, kullanıcının cebine para koyan bir sistemdir. Bu yazıda Core Web Vitals metriklerini ve sitenizi 95+ Lighthouse skoruna nasıl çıkaracağınızı anlatıyoruz.
Core Web Vitals nedir?
- LCP (Largest Contentful Paint)
- Sayfadaki en büyük görsel öğenin yüklenme süresi. Hedef: 2.5 saniye altı.
- INP (Interaction to Next Paint)
- Kullanıcı etkileşiminden ekranın yanıt vermesine kadar geçen süre. Hedef: 200 ms altı. (FID'in yerini aldı.)
- CLS (Cumulative Layout Shift)
- Sayfa yüklenirken oluşan beklenmedik kaymalar. Hedef: 0.1 altı.
LCP'yi nasıl hızlandırırız?
- Hero görselini WebP/AVIF formatında, doğru boyutta ve sıkıştırılmış olarak yayınlayın.
- Görseli fetchpriority="high" ile işaretleyin.
- Above-the-fold görsellerde loading="lazy" KULLANMAYIN — bu LCP'yi geciktirir.
- Hosting/CDN coğrafi olarak hedef pazara yakın olsun (Türkiye için Cloudflare İstanbul edge).
- Sunucu yanıt süresini (TTFB) 600ms altına indirin.
INP için optimizasyon
- JS bundle boyutu küçük tutulmalı; gereksiz kütüphaneler tree-shaking ile temizlenmeli.
- Long task'lar parçalanmalı (50ms üstü iş bloklarını parçala).
- Form etkileşimleri için debounce/throttle kullanın.
- Animasyonları main thread yerine GPU'da çalıştırın (transform / opacity).
CLS'i sıfıra yakın tutmak
- Görsel ve videolarda width/height veya aspect-ratio kullanın.
- Web fontlar için font-display: swap + display: optional kombinasyonu test edilmeli.
- Reklam ve embed alanları için sabit boyutlu placeholder rezerve edin.
- Yumuşak skeleton loader'lar layout shift'i azaltır.
Görsel optimizasyon disiplini
Bir kurumsal sitenin hızının %60'ı görsel yönetiminde belirlenir. WebP/AVIF format dönüşümü, srcset ile responsive image, lazy loading (above-the-fold dışında), Cloudflare Image veya benzeri bir image CDN kullanmak hızı dramatik şekilde artırır.
Font stratejisi
- Google Fonts'tan yalnızca kullanacağınız ağırlıkları yükleyin.
- preconnect ile fonts.gstatic.com'a erken bağlantı açın.
- font-display: swap kullanın (görünmez metin yerine sistem fontu).
- Variable font'lar (Space Grotesk, Inter VF) ile dosya boyutunu küçültün.
Kritik CSS ve JS
İlk ekranı boyamak için gereken minimal CSS "kritik CSS" olarak inline yerleştirilir; geri kalan stil sonra yüklenir. JS kodu için route bazlı code-splitting, dynamic import ve lazy component yapılarını kullanın.
Ölçümleme ve takip
- Search Console → Core Web Vitals raporu.
- PageSpeed Insights (Lab + Field data).
- Chrome UX Report (CrUX) — gerçek kullanıcı verisi.
- Local: Lighthouse CI ile build sırasında performance gating.
Sıkça sorulan sorular
Pratikte tüm metriklerde 100 zor; ama Performance, Accessibility, Best Practices, SEO için 95+ standart hedefimizdir. Önemli olan saha verisi (CrUX) — laboratuvar değil.
wty
Web Tasarım Yazılım
İstanbul Bahçeşehir merkezli dijital stüdyo
Son güncelleme · 18 Şubat 2026