Görseller, çoğu web sitesinde en çok veri indirten kaynak türüdür ve sıklıkla sayfanın en büyük içerik elementidir. Bu yüzden görsel optimizasyonu, sayfa hızını yükseltmek için en yüksek getirili alanlardan biridir. Doğru format, akıllı sıkıştırma, cihaza uygun boyut ve isabetli lazy loading ile hem yükleme süresini hem de Core Web Vitals skorlarınızı belirgin şekilde iyileştirebilirsiniz.
Görsellerin sayfa hızına etkisi neden bu kadar büyük?
Bir sayfa açıldığında tarayıcının indirmesi gereken her dosya, kullanıcının bekleme süresine eklenir. Görseller genellikle bu yükün en ağır parçasıdır. web.dev'in görsel performansı rehberine göre görseller, çoğu sitede en çok istek alan ve en çok bant genişliği tüketen kaynak türüdür. Yani metni veya kodu kırpmadan önce görsellere bakmak çok daha mantıklıdır.
İşin bir de SEO tarafı var. Google'ın Core Web Vitals metriklerinden biri olan LCP (Largest Contentful Paint), kullanıcının ekranındaki en büyük içerik parçasının ne zaman göründüğünü ölçer. web.dev'in LCP optimizasyon rehberine göre bu en büyük element çoğu zaman bir görseldir ve sitenizin ziyaretlerin en az %75'inde 2,5 saniye veya altında bir LCP hedeflemesi gerekir. Yavaş yüklenen bir hero görseli, doğrudan bu skoru bozar.
Kısacası görseller hem hızın hem de arama performansının kalbinde yer alır. Bir görseli optimize ettiğinizde tek bir şeyi değil, kullanıcı deneyimini, dönüşüm potansiyelini ve Google sıralama sinyallerini aynı anda iyileştirirsiniz.
Doğru formatı seçmek: WebP ve AVIF
Format seçimi, en az çabayla en büyük kazanımı verdiğiniz adımdır. Eski JPEG ve PNG dosyaları yerine modern formatlara geçmek, görselin görünür kalitesini koruyarak dosya boyutunu ciddi oranda düşürür.
WebP ile başlangıç
WebP, bugün neredeyse her tarayıcıda desteklenen olgun bir formattır. web.dev'in WebP rehberine göre WebP görselleri eşdeğer JPEG veya PNG dosyalarına kıyasla genellikle %25 ila %35 daha küçüktür. Aynı kaynakta Facebook'un WebP'ye geçişte JPEG'lerde %25-35, PNG'lerde ise yaklaşık %80 boyut tasarrufu bildirdiği aktarılır. Bu, sayfa başına indirilen veride hatırı sayılır bir düşüş demektir.
AVIF ile bir adım ileri
Daha agresif tasarruf isteyenler için AVIF devreye girer. web.dev'in görsel performansı rehberine göre AVIF, bazı durumlarda JPEG'e kıyasla %50'den fazla dosya boyutu tasarrufu sağlayabilir. AVIF'in sıkıştırma verimi yüksektir, ancak tarayıcı desteği WebP kadar yaygın değildir. Bu yüzden onu tek başına değil, bir yedek zinciri içinde sunmak en güvenli yaklaşımdır.
Pratikte mantık şudur: önce AVIF dene, tarayıcı desteklemiyorsa WebP'ye düş, o da yoksa klasik JPEG veya PNG göster. Bunu picture elementi ve sunucu tarafında Accept başlığını okuyarak kurabilirsiniz. Google Search Central'ın görsel SEO rehberine göre Google; WebP, AVIF, SVG, JPEG ve PNG formatlarını destekler ve srcset ya da picture kullanırken mutlaka bir src yedeği bırakmanızı önerir.
Sıkıştırma: kayıplı mı, kayıpsız mı?
Format kadar önemli bir konu da sıkıştırma seçimidir. İki ana yöntem vardır ve hangisini seçeceğiniz görselin türüne bağlıdır.
- Kayıplı (lossy) sıkıştırma: Gözle fark edilmesi zor bazı detayları atarak dosyayı küçültür. Fotoğraflar ve karmaşık, çok renkli görseller için idealdir.
- Kayıpsız (lossless) sıkıştırma: Hiçbir piksel verisini kaybetmeden dosyayı küçültür. Logolar, ikonlar, keskin kenarlı grafikler ve düz renkli görseller için daha uygundur.
web.dev'in görsel performansı rehberi bu ayrımı vurgular: bir fotoğrafı kayıpsız tutmak gereksiz yere büyük dosyalar üretir, bir logoyu agresif kayıplı sıkıştırmak ise kenarlarda bulanıklık yaratır. Doğru kararın temeli, kaliteyi yükleme hızıyla dengelemektir. Google da görsel SEO rehberinde tam olarak bu dengeyi, yani kaliteyi yükleme hızıyla birlikte düşünmeyi önerir. Genellikle birkaç farklı kalite seviyesini deneyip gözle kabul edilebilir en küçük dosyayı seçmek en sağlıklı yöntemdir.
Responsive images: her cihaza uygun boyut
Çok yapılan bir hata, masaüstü için hazırlanmış büyük bir görseli olduğu gibi telefon ekranına da göndermektir. Küçük bir ekranda 2000 piksel genişliğinde bir dosyayı indirmek tamamen israftır. Çözüm, tarayıcıya birden fazla boyut sunup en uygun olanı seçmesine izin vermektir.
Bunu srcset ve sizes nitelikleriyle yaparsınız. srcset aynı görselin farklı genişliklerdeki sürümlerini listeler, sizes ise görselin sayfada kaplayacağı alanı tarif eder. Tarayıcı, cihaz ekranına ve çözünürlüğüne bakıp en mantıklı dosyayı indirir. Sanat yönü gerektiren durumlarda, yani farklı ekranlarda farklı kırpılmış görseller göstermek istediğinizde picture elementini kullanırsınız.
Google Search Central, görsel SEO için tam olarak bu yaklaşımı, yani srcset veya picture ile bir src yedeği bırakmayı tavsiye eder. Responsive görseller, mobil kullanıcıların gereksiz veri indirmesini engelleyerek hem hızı hem de kullanıcı memnuniyetini doğrudan artırır.
Lazy loading'i doğru uygulamak
Lazy loading, ekranın altında kalan ve henüz görünmeyen görsellerin yüklenmesini, kullanıcı oraya yaklaşana kadar ertelemektir. Böylece sayfa ilk açıldığında yalnızca gerçekten görünen görseller indirilir ve başlangıç yükü hafifler.
İyi haber şu ki bunun için artık ağır JavaScript kütüphanelerine ihtiyacınız yok. web.dev'in tarayıcı seviyesinde lazy loading rehberine göre loading="lazy" niteliği, ekran dışı görselleri JavaScript olmadan erteler. Aynı kaynak, 4G bağlantıda tarayıcı seviyesindeki lazy loading ile görsellerin %97,5'inin görünür olduktan sonraki 10 milisaniye içinde tam yüklendiğini aktarır. Yani kullanıcı kaydırdığında görseller pratikte anında karşısına gelir.
Kritik uyarı: ekranın üst kısmında, yani sayfa açılır açılmaz görünen görsellere ve özellikle LCP görseline asla
loading="lazy"uygulamayın.
web.dev bu noktayı net biçimde belirtir: viewport içindeki veya LCP olan görseli geç yüklemek, kritik içeriği geciktirir ve hızı düşürür. Lazy loading bir araçtır; yanlış yere uygularsanız iyileştirmek istediğiniz metriği bozarsınız. Kural basittir: ekran altı görselleri tembelleştir, ekran üstü görselleri hemen yükle.
LCP hero görselini hızlandırmak
Sayfanın en üstündeki büyük görsel çoğu zaman LCP elementidir, dolayısıyla onu özellikle hızlandırmak gerekir. web.dev'in LCP optimizasyon rehberi burada iki güçlü teknik önerir. Birincisi preload ile görseli erken keşfettirmek, ikincisi fetchpriority="high" ile tarayıcıya bu görselin öncelikli olduğunu söylemektir. Bu ikisi birlikte, hero görselinin sıraya takılıp gecikmesini engeller.
Bunun yanında modern format ve iyi sıkıştırma, görselin kaynak yükleme süresini kısaltarak LCP'yi doğrudan iyileştirir. Bir ayrıntıya daha dikkat edin: progressive JPEG'lerden kaçının. LCP ölçümü görsel tam olarak indirildikten sonra tetiklendiği için, aşamalı yüklenen bir JPEG bu metriğe olumsuz yansıyabilir. Hero görseli için sade, tek seferde inen ve önceliklendirilmiş bir dosya en iyisidir.
Düzen kaymasını (CLS) önlemek
Hız sadece ne kadar hızlı yüklendiğiyle ilgili değildir; sayfanın yüklenirken ne kadar kararlı durduğu da önemlidir. Görsel yüklenmeden önce yerini ayırmazsanız, görsel geldiğinde altındaki metin aşağı kayar. Kullanıcı tam okuyacakken içeriğin zıplaması, hem rahatsız edicidir hem de Core Web Vitals'taki CLS (Cumulative Layout Shift) skorunu bozar.
Çözüm basittir: her görsele açık width ve height değerleri vererek tarayıcının en-boy oranını önceden bilmesini sağlayın. Böylece tarayıcı görsel inmeden önce ona yer ayırır ve hiçbir kayma yaşanmaz. Google'ın Türkçe PageSpeed Insights dokümanına göre iyi bir CLS değeri 0,1 veya altıdır, bu yüzden bu küçük detay skorunuz için fark yaratır.
Görsel CDN kullanmak
Tüm bu işleri her görsel için elle yapmak yorucudur. İşte görsel CDN'leri (içerik dağıtım ağları) burada devreye girer. Bir görsel CDN'i, görsellerinizi otomatik olarak modern formata dönüştürür, sıkıştırır ve ziyaretçiye coğrafi olarak en yakın sunucudan dağıtır. Böylece hem işlemi otomatikleştirir hem de gecikmeyi azaltırsınız.
web.dev'in görsel performansı rehberi, görsel CDN'lerini ölçeklenebilir bir çözüm olarak önerir. Eğer görsellerinizi ayrı bir CDN alan adından sunuyorsanız, Google Search Central bu görsellerin keşfedilmesi için bir görsel site haritası (image sitemap) kullanmanıza izin verir. Böylece CDN'de barındırılan görselleriniz arama görünürlüğünden mahrum kalmaz.
Görsel SEO'yu unutmayın
Hızlandırırken görsel SEO'sunu da ihmal etmeyin, çünkü ikisi aynı sayfada yaşar. Google Search Central'ın görsel SEO rehberine göre açıklayıcı dosya adları ve doğru, içeriği gerçekten anlatan alt metinleri kullanmak önemlidir. Alt metni anahtar kelimeyle doldurmaya çalışmayın; görseli görmeyen birine onu dürüstçe tarif edin. Bu, hem erişilebilirliği hem de görsel aramadaki görünürlüğü artırır. Aynı rehber, tüm bunları yaparken kaliteyi yükleme hızıyla dengelemeyi de hatırlatır.
Ölçüm ve doğrulama
Yaptığınız iyileştirmenin gerçekten işe yaradığını görmek için ölçüm şarttır. Burada en yaygın araç Google'ın PageSpeed Insights aracıdır, ancak verdiği iki tür veriyi karıştırmamak gerekir.
- Saha verisi (field): Google'ın Türkçe PSI dokümanına göre bu veri, gerçek kullanıcılardan CrUX üzerinden ve son 28 günlük dönemden toplanır. Sitenizin gerçek dünyadaki performansını yansıtır.
- Laboratuvar verisi (lab): Aynı dokümana göre bu veri, Lighthouse ile orta seviye bir cihaz (Moto G4) ve kısıtlı bir mobil ağ simülasyonu üzerinde üretilir. Kontrollü ve tekrarlanabilir bir test ortamı sunar.
Pratikte lab verisini optimizasyon sırasında hızlı denemeler için, saha verisini ise gerçek kullanıcı etkisini doğrulamak için kullanın. Karşılaştırma yaparken aynı sayfanın optimizasyon öncesi ve sonrası değerlerine bakın. Google'ın Türkçe PSI dokümanındaki eşikleri hedef alın: LCP için iyi ≤2500 ms ve kötü >4000 ms, CLS için iyi ≤0,1, INP için iyi ≤200 ms.
Wix, Ikas ve özel siteler için adım adım iş akışı
Hangi altyapıyı kullanırsanız kullanın, aynı mantık geçerlidir. İşte uygulanabilir bir sıra:
- Sayfadaki en ağır görselleri belirleyin ve LCP elementinin hangisi olduğunu tespit edin.
- Görselleri WebP'ye, mümkünse AVIF'e dönüştürün ve bir yedek zinciri bırakın.
- Fotoğraflarda kayıplı, grafik ve logolarda kayıpsız sıkıştırma uygulayın; kaliteyi hızla dengeleyin.
- Her görsele açık
widthveheightverin ve responsive boyutlar içinsrcsetilesizeskurun. - Ekran altı görsellere
loading="lazy"ekleyin, hero ve viewport içi görselleri bunun dışında bırakın. - LCP hero görselini
preloadvefetchpriority="high"ile önceliklendirin, progressive JPEG kullanmayın. - Mümkünse otomatik format ve sıkıştırma yapan bir görsel CDN'i devreye alın.
- Dosya adlarını ve alt metinlerini anlamlı hale getirin.
- PageSpeed Insights ile öncesi ve sonrasını ölçün; hem lab hem saha verisine bakın.
Wix gibi hazır platformlarda görsel sıkıştırma ve modern format dönüşümü çoğunlukla otomatik yürür, sizin işiniz daha çok yüklediğiniz görselin başlangıç boyutunu makul tutmak, alt metinleri doldurmak ve gereksiz büyük görsellerden kaçınmaktır. Ikas ve özel kodlu sitelerde ise format zinciri, srcset ve fetchpriority gibi ayrıntılar üzerinde tam kontrolünüz olur, dolayısıyla yukarıdaki adımların tamamını bizzat uygulayabilirsiniz.
VixSEO ile sitenizdeki görsel kaynaklı hız sorunlarını tek panelden takip edebilir, Core Web Vitals durumunuzu ve teknik SEO eksiklerinizi görebilirsiniz. Detaylar için araçlar sayfasına göz atabilir veya hizmetlerimizi inceleyebilirsiniz.