Guide
Sayfa Hızı İçin Görsel Sıkıştırma: LCP Neye İhtiyaç Duyar?
Bir kahraman görsel, çoğu zaman bir sayfanın Largest Contentful Paint skorundaki tek en büyük kaldıraçtır.
By Buğra SözeriPublished
Core Web Vitals bir sayfayı Largest Contentful Paint'e göre puanlar — en büyük görünür unsurun (içerik sitelerinde neredeyse her zaman bir kahraman görsel, banner veya katlama üstü fotoğraf) render'ının tamamlandığı süre. Google'ın "iyi" eşiği, gerçek ziyaretlerin 75. persentilinde 2,5 saniyedir. Görsel ağırlıklı sayfalarda, o tek görselin dosya boyutu sıklıkla mevcut en büyük kaldıraçtır — sıkıştırılmamış 4 MB'lık bir fotoğraf, orta seviye bir mobil bağlantıda LCP'yi tek başına eşiğin ötesine itebilirken, aynı fotoğrafın doğru sıkıştırılmış bir versiyonu saniyenin bir parçasında yüklenir.
Dosya boyutu, görsel ağırlıklı sayfalarda LCP'ye neden hakim olur?
İndirme süresi, aktarılan bayt sayısı ve mevcut bant genişliğiyle doğrudan ölçeklenir. Gerçekçi olarak saniyede birkaç megabit ortalayan bir 4G bağlantısında, optimize edilmemiş 3-4 MB'lık bir fotoğraf, tarayıcı onu çözüp boyamadan önce indirmesi bile tam bir saniye veya daha fazla sürebilir — bu da sunucu yanıt süresi, DNS araması ve yükleme sırasında öndeki render engelleyici kaynaklar hesaba katılmadan böyledir. Aynı fotoğrafı doğru boyutlandırılmış, 200 KB altında bir WebP dosyasına sıkıştırın; LCP'nin indirme kısmı bütçeden fiilen kaybolur.
Gerçekçi boyut hedefleri
| Görsel rolü | Makul hedef boyut |
|---|---|
| Tam genişlik kahraman / banner | 100-250 KB |
| Makale içi fotoğraf | 50-150 KB |
| Küçük resim / kart görseli | 10-40 KB |
| İkon / logo (mümkünse SVG kullanın) | 10 KB altı |
Bu hedefler, görselin gerçek görüntülenme boyutlarına uyacak şekilde yeniden boyutlandırıldığını da varsayar — 4000 piksel genişliğinde bir kaynak dosyayı 1200 piksel genişliğinde bir kahraman alanına sunmak, dosya ne kadar iyi sıkıştırılmış olursa olsun, tarayıcının hemen atacağı pikseller için bant genişliği israf eder. Görüntüleme boyutuna yeniden boyutlandırmayı format ve kalite sıkıştırmasıyla birleştirin — en büyük iyileşme için.
Format seçimi, kalite kaydırıcısı kadar önemlidir
Fotoğrafik içerik için WebP, eşleştirilmiş görsel kalitede tipik olarak JPEG'i %25-35 oranında geçer ve her büyük tarayıcı 2020'den beri bunu destekliyor — modern bir sitede varsayılan olarak JPEG kullanmak için pek bir neden yok. Büyük düz renk alanları, keskin kenarlar veya metin içeren grafikler (ekran görüntüleri, diyagramlar, logolar) için WebP'nin otomatik olarak kazandığını varsaymak yerine WebP'yi PNG ile karşılaştırın; nasıl karar vereceğiniz için PNG mi JPG mi WebP mi sayfasına bakın. Hangi formata karar verirseniz verin, LCP sayısını gerçekten değiştiren şey doğru piksel boyutları artı makul bir kalite ayarının (WebP/JPEG için 75-85) birleşimidir — tek başına format değil.
Frequently asked questions
- İyi bir LCP skoru nedir?
- Google'ın 'iyi' eşiği, gerçek kullanıcı ziyaretlerinin 75. persentilinde 2,5 saniye veya daha hızlıdır. 2,5 ile 4 saniye arası 'iyileştirme gerekiyor'; 4 saniyenin üzeri 'kötü'dür. İçerik ağırlıklı çoğu sayfada LCP unsuru büyük bir görseldir; bu nedenle o tek görselin sıkıştırması ve formatı, sayfanın hangi kategoriye düştüğünü sıklıkla belirler.
- Görsel sıkıştırması tek başına yavaş bir LCP'yi düzeltir mi?
- Genellikle yolun büyük kısmını, ama tamamını değil. Dosya boyutu indirme süresini belirler ve bu, görsel ağırlıklı sayfalarda LCP'nin tipik olarak en büyük parçasıdır; ama render'ı engelleyen CSS/JS, sunucu yanıt süresi ve görselin erken yükleme için önceliklendirilip önceliklendirilmediği de katkıda bulunur. LCP görselini sıkıştırmak çoğu sitede en yüksek etkili tek düzeltmedir, ama tek düzeltme değildir.
- Sayfa hızına yardımcı olmak için her görselde WebP mi kullanmalıyım?
- Fotoğraflar için, neredeyse her durumda evet — WebP eşdeğer görsel kalitede tipik olarak JPEG'den %25-35 daha küçük dosyalar üretir ve tüm büyük tarayıcılar 2020'den beri bunu destekliyor. Büyük düz renk alanları ve metin içeren ekran görüntüleri veya grafikler için WebP'yi otomatik olarak kazanan varsaymak yerine PNG ile karşılaştırın, çünkü PNG'nin kayıpsız sıkıştırması bu tür içerikte bazen üstün gelebilir.
Sources & references
Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.
- web.dev — Largest Contentful Paint (LCP) — Google'ın LCP ölçütü tanımı ve 2,5 saniyelik 'iyi' eşiği(as of )
- web.dev — LCP'yi optimize edin — LCP için görsel sıkıştırma, format seçimi ve kaynak önceliği rehberliği(as of )
- Google Search Central — Sayfa Deneyimi raporu — Core Web Vitals'ın Arama'nın sayfa deneyimi sinyallerini nasıl beslediği(as of )
Related
Published September 25, 2026