performance 2025-05-08 · 9 min read

Core Web Vitals İçin Görselleri Optimize Edin

Görsel optimizasyonunun LCP, CLS ve INP'yi nasıl doğrudan etkilediği. Google'ın performans eşiklerini geçmek için pratik teknikler.

# Görüntü Optimizasyonu Core Web Vitals'ı Nasıl Etkiler Google'ın Core Web Vitals'ı, arama sıralamalarınızı doğrudan etkileyen üç metriktir. Ve görüntüler? Hepsini etkilerler. ## LCP (Largest Contentful Paint) **Hedef: < 2,5 sn** Kahraman görüntünüz genellikle LCP öğesidir. Optimize etmek için: 1. **Önceden yükle** LCP görüntüsünü: `` 2. **WebP kullan** — %30 daha küçük = %30 daha hızlı yükleme 3. **Duyarlı görüntüler** — 2000px görüntüyü mobil'e sunma 4. **Öncelik ipucu** — kahraman görüntülerde `fetchpriority="high"` ## INP (Interaction to Next Paint) **Hedef: < 200 ms** Ana iş parçacığındaki ağır görüntü işleme etkileşimleri engeller: 1. **Tembel yükleme** katlanın altındaki görüntüleri 2. **Asenkron kod çözme** — `decoding="async"` 3. **Tarayıcı araçlarımızı kullanın** — işleme Web Workers aracılığıyla ana iş parçacığı dışında gerçekleşir ## CLS (Cumulative Layout Shift) **Hedef: < 0,1** Boyutsuz görüntüler düzen kaymalarına neden olur: 1. **Her zaman genişlik/yükseklik belirtin** — HTML veya CSS'de 2. **En boy oranı kutuları kullanın** — görüntü yüklenmeden önce alan ayırın 3. **İçerik enjeksiyonlarından kaçının** — mevcut içeriğin üzerine görüntü yüklemeyin ## Gerçek Dünya Etkisi Optimizasyondan önce: - LCP: 4,2 sn ❌ - CLS: 0,25 ❌ - INP: 380 ms ❌ Görüntü optimizasyonundan sonra: - LCP: 1,8 sn ✅ - CLS: 0,02 ✅ - INP: 120 ms ✅ ## AmberPic Avantajı Araçlarımız size şunlarda yardımcı olur: - Yüklemeden önce görüntüleri sıkıştırma (daha küçük LCP) - Modern formatlara dönüştürme (daha hızlı kod çözme) - Duyarlı kırılma noktaları için toplu yeniden boyutlandırma (uygun boyutlar) --- *Görüntüleriniz CDN'nize ulaşmadan önce optimize edin — [AmberPic'i deneyin](/tr/compress/).*
#performans #core-web-vitals #seo #optimizasyon

Görselleri ücretsiz işleyin, yükleme yok

Sıkıştırma, dönüştürme ve boyutlandırma araçlarımızı deneyin.

Araçları gör