Büyük görseller sayfa açılışını yavaşlatıyorsa hangi optimizasyon sırası izlenmeli?

Önce Ölçüm: PageSpeed Insights ve Lighthouse ile Görsel Sorununu Tespit Edin

Optimizasyona başlamadan önce neyi optimize edeceğinizi bilmek zorundasınız. PageSpeed Insights’a URL’nizi girdiğinizde rapor; hangi görselin LCP (Largest Contentful Paint) elementi olduğunu, “Serve images in next-gen formats” ve “Properly size images” uyarılarını liste halinde sunar. Google’ın resmi image performance rehberine göre LCP elementini doğru tespit etmeden yapılan optimizasyon çalışmaları sıklıkla yanlış görseli hedef alır ve beklenen etkiyi vermez.

Lighthouse’un Waterfall şeması, görsellerin ne zaman ve ne sırayla yüklendiğini net biçimde gösterir. Bu şemada görsellerin sayfa ağırlığının %50-75’ini oluşturduğunu doğrudan gözlemleyebilirsiniz. Hangi dosyanın yükleme süresini en çok uzattığını tespit ettikten sonra müdahale noktanız kesinleşir; ölçüm yapmadan “en büyük görseli küçültelim” mantığıyla başlamak yaygın ve maliyetli bir hatadır.

LCP elementi genellikle hero görseli olsa da her sitede aynı değildir. Blog yazılarında büyük bir metin bloğu, e-ticarette ürün görseli LCP elementi olabilir. Doğru teşhis, optimizasyonun hangi adımdan başlaması gerektiğini belirler ve yanlış önceliklendirme riskini ortadan kaldırır.

Sıra Neden Önemli? Aynı Görselleri Farklı Sırayla Optimize Edince Ne Olur?

Optimizasyon adımlarının sırası sonuçları doğrudan etkiler. Somut bir senaryo: 1,2 MB boyutundaki bir JPEG’i önce CDN’e yükleyip ardından lazy loading ekliyorsunuz. CDN büyük dosyayı hızlı sunabilir; ancak LCP görseline lazy loading uygulandığında tarayıcının geciktirme mekanizması devreye girer ve LCP süreniz uzar. PageSpeed skoru iyileşmek bir yana, kötüleşir.

Tersine, önce AVIF formatına dönüştürüp sıkıştırdıktan sonra CDN’e yüklediğinizde, CDN optimize edilmiş küçük dosyayı dağıtır. NitroPack’in 2026 Core Web Vitals strateji raporuna göre sıkıştırma sonrası CDN entegrasyonu, sıkıştırma öncesi CDN kullanımına kıyasla LCP süresini ortalama %20-35 daha fazla düşürmektedir. Aynı görseller, farklı sıra, belirgin performans farkı.

Optimizasyon önceliğini belirleyen temel ilke şudur: en büyük boyut azaltımını en düşük teknik karmaşıklıkla sağlayan adım her zaman ilk sıraya gelir. Format dönüşümü ve sıkıştırma bu tanımı tam karşılar; araç sayısı azdır, boyut kazanımı maksimumdur ve sonraki tüm adımlar daha küçük dosya üzerinde çalışır.

1. ve 2. Adım: Doğru Format Seçimi ve Sıkıştırma — En Hızlı Kazanım

2026 itibarıyla AVIF formatı Chrome, Firefox, Safari ve Edge’de tam tarayıcı desteğine kavuşmuş; aynı kalite düzeyinde JPEG’den %30-50 daha küçük dosya boyutu sunarak modern web’in birincil görsel formatı konumuna gelmiştir. WebP, JPEG’den %15-35 küçük olup eski tarayıcılara fallback olarak sunulması önerilen ikincil seçenektir. PNG şeffaflık gerektiren logo ve ikonlar için saklanmalıdır.

Lossy sıkıştırma 75-85 kalite oranında gözle fark edilmeden %60-80 boyut azaltımı sağlar. Bu, 1,2 MB’lik bir JPEG’i 200-480 KB’ye indirmek demektir. Lossless sıkıştırma ise kalite kaybetmeksizin %10-30 küçültür; ekran görüntüleri ve vektör tabanlı görseller için tercih edilir. Squoosh (ücretsiz, tarayıcı tabanlı), ShortPixel ve Imagify bu dönüşüm için en yaygın araçlardır.

Format dönüşümü ve sıkıştırmanın birinci sıraya alınması şu nedenle kritiktir: CDN, fetchpriority veya lazy loading fark etmeksizin, izleyen tüm adımlar bu küçük dosya üzerinde çalışacaktır. 150 KB’lik bir AVIF’i CDN üzerinden sunmak, 1,2 MB’lik JPEG’i aynı CDN’den sunmaktan çok daha hızlıdır; fark yalnızca transfer süresinde değil, tarayıcının ayrıştırma ve render sürecinde de kendini gösterir.

3. ve 4. Adım: LCP Görseline fetchpriority ve Fold Altına lazy loading

LCP görseline loading=”lazy” eklemek sayfayı hızlandırmak bir yana, doğrudan yavaşlatır. Tarayıcı bu talimatı aldığında görseli görünür alana girilene kadar geciktirir; oysa LCP elementi tanım gereği ilk ekranda görünen en büyük elemandır. Google’ın resmi image performance rehberinde bu açıkça vurgulanmaktadır: LCP elementine lazy loading uygulamak en yaygın ve en yıkıcı performans hatalarından biridir.

Doğru yaklaşım şudur: hero veya LCP görseline fetchpriority=”high” attribute’unu ekleyin ve head bölümüne link rel=”preload” etiketi yerleştirin. Bu iki önlem birlikte kullanıldığında tarayıcı LCP görselini diğer tüm kaynaklardan önce indirir; LCP süresi kısalır, Core Web Vitals skoru yükselir. 2026’da yaygınlaşan HTTP 103 Early Hints ise sunucunun HTML yanıtı gelmeden önce kritik görselleri tarayıcıya önceden bildirmesini sağlar ve preload zincirini daha da optimize eder.

Fold altındaki görseller için tam tersi geçerlidir: loading=”lazy” eklenerek tarayıcının bu görselleri yalnızca kullanıcı ilgili alana yaklaştığında indirmesi sağlanır. content-visibility: auto ile lazy loading birlikte kullanılabilir; ancak LCP elementi olan hiçbir görsele bu kombinasyon uygulanmamalıdır. Hangi görselinizin fold altında kaldığını Lighthouse raporu veya tarayıcı geliştirici araçlarıyla doğrulayabilirsiniz.

5. Adım: CDN ve Tarayıcı Önbelleği ile Görsel Dağıtımını Hızlandırın

Optimize edilmiş görselleri CDN üzerinden sunmak TTFB’yi (Time to First Byte) düşürür ve coğrafi olarak uzak ziyaretçiler için yükleme süresini belirgin biçimde kısaltır. CDN, görseli kullanıcıya en yakın edge sunucusundan sunar; İstanbul’daki bir ziyaretçiye İstanbul edge’inden gelen görsel, Almanya’daki ana sunucuya kıyasla yüzlerce milisaniye fark yaratabilir.

Cloudinary ve imgix, srcset/sizes ile responsive image özelliklerini CDN düzeyinde otomatize eder; tek bir kaynak yüklersiniz, araç farklı ekran boyutları için otomatik varyant üretir. BunnyCDN ise daha uygun maliyetli bir seçenek olarak öne çıkar. Tarayıcı önbelleğini yapılandırmak için Cache-Control: max-age=31536000, immutable başlığı, değişmeyen görsel dosyalarında bir yıllık önbellekleme sağlar.

CDN’i sıkıştırma ve format dönüşümünden sonra uygulamanın önemi burada netleşir: CDN optimize edilmiş küçük dosyayı önbelleğe alır. Sıkıştırılmamış büyük dosyayı CDN’e taşıyıp sonra sıkıştırmaya çalışırsanız, CDN önbelleğindeki büyük dosya geçersiz hale gelir ve yeniden dağıtım gerekir; zaman ve kaynak israfı yaratırsınız.

Büyük Görselleri Doğru Sırayla Optimize Etme: Adım Adım Rehber

1. PageSpeed Insights ile görsel sorunlarını tespit edin: URL’yi PageSpeed Insights’a girin; LCP elementini, “Serve images in next-gen formats” ve “Properly size images” uyarılarını not edin. Hangi görsel LCP elementi olduğunu ayırt edin; ölçüm yapmadan başlamak yanlış önceliklendirme riskini artırır.
2. Görselleri AVIF veya WebP formatına dönüştürün: 2026’da AVIF tam tarayıcı desteğine sahiptir. Squoosh veya Cloudinary ile JPEG/PNG dosyalarını AVIF’e, eski tarayıcılar için WebP’ye dönüştürün. Her iki formatı aynı picture elementi içinde sunarak tarayıcının kendi desteklediği formatı otomatik seçmesini sağlayabilirsiniz.
3. Lossy sıkıştırmayla dosya boyutunu küçültün: ShortPixel veya Imagify ile 75-85 kalite oranında sıkıştırın; gözle fark edilmeden %60-80 boyut azaltımı hedefleyin. 1,2 MB’lik JPEG bu aralıkta 200-480 KB’ye iner. Grafik ve ikonlar için lossless sıkıştırma tercih edin.
4. LCP görselini belirleyip fetchpriority ekleyin: Hero veya ilk ekran görselini Lighthouse raporu yardımıyla tespit edin. img etiketine fetchpriority=”high” attribute’u ekleyin ve head bölümüne link rel=”preload” as=”image” satırı yerleştirin. Bu iki önlem birlikte LCP süresini belirgin biçimde kısaltır.
5. LCP görselinde kesinlikle loading=”lazy” kullanmayın: Tarayıcının LCP elementini geciktirmesine yol açar ve Core Web Vitals skorunu doğrudan düşürür; en yaygın ve yıkıcı görsel optimizasyon hatalarından biridir. loading=”lazy” yalnızca fold altındaki görsellere uygulanmalıdır.
6. Fold altındaki görsellere loading=”lazy” ekleyin: Sayfa yüklendiğinde görünür alanın dışında kalan tüm görsellere loading=”lazy” attribute’u ekleyin; LCP elementini bu adımın dışında tutun. Hangi görselinizin fold altında olduğunu Lighthouse ile doğrulayın.
7. Optimize edilmiş görselleri CDN üzerinden sunun: Sıkıştırılmış ve format dönüşümü tamamlanmış dosyaları BunnyCDN, Cloudinary veya imgix gibi bir CDN’e yükleyin; edge caching ile TTFB’yi ve coğrafi gecikmeyi düşürün. CDN’i her zaman sıkıştırmadan sonra uygulayın.
8. Core Web Vitals iyileşmesini ölçün: PageSpeed Insights ile LCP, CLS ve INP değerlerini optimizasyon öncesi/sonrası karşılaştırın. Google eşik değerleri: LCP için 2,5 saniye altı, INP için 200 ms altı, CLS için 0,1 altı.

Site Türüne Göre Öncelik Farkı ve Core Web Vitals İyileşmesini SEOYEN ile Ölçme

E-ticaret sitelerinde yüzlerce ürün görseli söz konusu olduğunda toplu optimizasyon araçları kaçınılmazdır. Kategori sayfalarında above-the-fold görünen ilk 4-6 ürün görseli öncelikli işlenmeli, geri kalanlar lazy loading ile sunulmalıdır. ShortPixel veya Imagify gibi WordPress eklentileri bu süreci büyük ölçüde otomatize eder; NitroPack ise sıkıştırma, CDN ve lazy loading adımlarını tek noktadan yönetir.

Blog ve kurumsal sitelerde hero image çoğunlukla tek LCP elementidir; fetchpriority uygulamak ve içerik görsellerini lazy loading ile yüklemek genellikle yeterlidir. INP (Interaction to Next Paint), 2025 sonunda Core Web Vitals’a FID’in yerini alarak kalıcı olarak eklendi. Büyük görsel dosyaları layout hesaplamalarını geciktirerek INP skorunu olumsuz etkiler; görsellere width ve height attribute’u tanımlamak hem CLS’yi hem layout shift riskini ortadan kaldırır.

Optimizasyon sonrası iyileşmeyi ölçmek için SEOYEN’in site sağlığı raporu Türkçe arayüzde görsel kaynaklı LCP, CLS ve INP sorunlarını otomatik raporlar. Ahrefs gibi araçlara kıyasla SEOYEN, Türkiye pazarına uyarlanmış TL bazlı abonelik seçenekleri ve yerel Türkçe destekle aynı işlevselliği tek platformda sunar. Sıralama takibi ile Core Web Vitals iyileşmesinin organik görünürlüğe yansımasını da aynı platformdan izleyebilirsiniz.

Sıkça Sorulan Sorular