Görsellerde geç yükleme: ne zaman kullanılmalı, ne zaman kullanılmamalı?

Geç yükleme neyi değiştirir?

Geç yükleme, yani lazy loading, tarayıcının görseli ne zaman istediğini değiştirir. Piksel boyutlarını, biçimini veya sıkıştırmasını değiştirmez. Uzun bir tarif sayfasında ziyaretçi başlangıcı hemen görmek ister ama sondaki on beş fotoğrafa hiç ulaşmayabilir. Bu fotoğrafları ertelemek, sayfa açılırken gereksiz indirmeleri önleyebilir.

Üç ayrı iş vardır: yeniden boyutlandırma gereksiz pikselleri kaldırır, sıkıştırma veri miktarını azaltır, geç yükleme ise isteği erteler. Büyük bir görsel daha sonra yüklendiğinde de ağırdır. Küçük bir görselin isteği gecikirse o da geç görünebilir.

Uygun boyutları boyutlandırma aracıyla hazırlayın ve gerekirse sıkıştırmayı karşılaştırın. Ardından başlangıçta gereken görselleri seçin. Dosya boyutunu küçültme rehberi hazırlığı anlatır; burada yükleme zamanına odaklanıyoruz.

Kod yazmadan nasıl başlanır?

Önce yüklenecek görselleri seçmek için HTML düzenlemeniz gerekmez. Bir ürün sayfası veya uzun yazıyla başlayın. İlk ekran, kaydırmadan gördüğünüz bölümdür.

1. Mevcut ayarı bulun. Site yönetiminde tema, görsel veya performans ayarlarına bakın. “Lazy loading”, “geç yükleme” veya “ertelenmiş yükleme” ifadelerini arayın. Ad ve konum değişir; bazı hizmetler bunu otomatik yönetir. Bulamazsanız yeni eklenti kurmadan önce site sorumlusuna danışın.
2. İlk ekranı hazır tutun. Ana görsel ve hemen görünen diğer görseller normal yüklensin. İstisna ayarı varsa bunları nasıl hariç tutacağınızı öğrenin. Ana görselin nasıl ele alındığını bilmeden tüm görsellere bir kural uygulamayın.
3. Aşağıdaki görsellerle deneyin. Yazının ilerleyen bölümlerindeki görseller iyi bir başlangıçtır. Varsa önizleme veya test sayfasını kullanın, sonra yayınlanan sayfayı kontrol edin. Ziyaretçi hızlı geçiş yapabileceği için galerileri ayrıca test edin.
4. Okuma deneyimini kontrol edin. Telefonda ve bilgisayarda açın. Ana fotoğraf hızlı görünüyor mu? Yavaş ve hızlı kaydırırken diğerleri zamanında geliyor mu? Görsel gelince metin sıçrıyor mu? Daha aşağıdaki bir bölüme doğrudan bağlantıyı da deneyin.

Sorun görürseniz son değiştirdiğiniz ayarı geri alın ve o sayfa için yardım isteyin. Gözle kontrol belirgin gecikmeleri ve kaymaları gösterir, ancak hızlanmayı kanıtlamaz. Bunun için ölçüm gerekir; test bölümü hangi değerleri kaydedeceğinizi anlatır.

Site sorumlusuna şu isteği gönderebilirsiniz: “Bu sayfanın görsel geç yüklemesini kontrol edin. Ana görsel ve ilk ekrandakiler normal yüklensin. Uygun alt görselleri erteleyin ve metin sıçramaması için yerlerini ayırın. Telefon ve bilgisayarda test ederek ana görselin değişiklik öncesi ve sonrası yükleme süresini karşılaştırın.” Sayfa bağlantısını ekleyin ve geç görünen görselleri belirtin.

Hangi görseller daha sonra yüklenebilir?

Tipik bir sayfayı kaydırmadan açın. Hangi görseller görünüyor ve içeriği anlamaya yardımcı oluyor? Dar bir telefonda ve geniş bilgisayar ekranında tekrar deneyin. Banner, başlık ve ürün galerisi farklı yerlere gelebilir.

Dosya adına veya yükleme sırasına değil, gerçek konuma göre karar verin. Medya kitaplığının ilk görseli sayfanın ilk görseli olmayabilir. Uzun bir girişin altındaki fotoğraf, başka bir şablonda ilk ekrana gelebilir.

Aynı görsel bilgisayarda hemen, telefonda daha aşağıda görünüyorsa normal yükleme daha güvenli bir başlangıçtır. loading, picture gibi bir medya sorgusu sunmaz. Tek bir isteği azaltmak için ekran boyutuna göre çalışan bir betik eklemeden önce bu isteğin kayda değer bir yük oluşturup oluşturmadığını araştırın.

Gizli bir galeri görselinin indirilmesi mutlaka ertelenmez. Galeri betiği, görsel özelliklerinden bağımsız olarak ön yükleme yapabilir. Yalnızca kaydırmayı değil, hızlı geçişleri ve önceki görsele dönmeyi de test edin.

Ana görsel neden beklememeli?

Largest Contentful Paint (LCP), ilk ekrandaki en büyük içerik öğesinin ne kadar sürede göründüğünü ölçer. Bu genellikle ana fotoğraftır, ancak bir metin bloğu da olabilir. Öğeyi performans raporunda bulun. Görselse geç yükleme uygulamayın. Adresi ilk HTML içinde varsa tarayıcı erken başlayabilir; bir betik adresi sonradan ekliyorsa ek gecikme oluşabilir.

Geç yüklemeyi kaldırmak her sorunu çözmez. Sunucu yanıtı, indirilen dosyanın boyutu ve ekranda gösterilmesi hâlâ etkili olabilir. Google’ın LCP optimizasyon rehberi bu aşamaları ayırır. Pixilo Core Web Vitals rehberi yükleme sorunlarıyla düzen kaymalarını ayırt etmeye yardımcı olur.

fetchpriority="high" ipucunu önemli olduğunu belirlediğiniz görsel için seçici kullanın. Tüm galeriye yüksek öncelik vermek yararlı bir sıralama oluşturmaz. Bu ipucu, geç yükleme ertelemesini de kaldırmaz.

CMS ve galerinin mevcut davranışını kontrol etme

Eklenti kurmadan önce yayınlanan görseli inceleyin. CMS, tema veya optimizasyon hizmeti özelliği zaten ekliyor olabilir. Yalnızca “görsel optimizasyonu” adına değil, oluşan HTML ve gerçek isteğe bakın.

Davranışı tek yerden yönetin. Bir betik adresleri değiştiriyor, görsellerin çevresine öğe ekliyor veya galeri görsellerini önceden yüklüyorsa ikinci mekanizma teşhisi zorlaştırabilir. Bir sayfadan başlayın ve ana görseli erteleme dışında tutun.

CSS arka planı ayrı bir durumdur: img yükleme özelliği arka plan tanımına uygulanmaz. Şablon sorumlusundan bu kaynağın nasıl bulunduğunu incelemesini isteyin. İçerik bloğuna görsel HTML’i yapıştırmak temanın arka planını değiştirmez.

HTML görseline yerleşik geç yükleme ekleme

İlk ekranın belirgin şekilde altındaki bir görsel için gerçek adresi src içinde tutun ve yükleme özelliğini ekleyin. Örnek yolları kendi dosyalarınızla değiştirin. Alternatif metin görselin gösterdiğini anlatır; tarif talimatları normal metinde kalır. Yalnızca dekoratif görselde alt="" kullanın.

<img
  src="/images/recipe-step-04.webp"
  width="1200"
  height="800"
  loading="lazy"
  alt="İç harcın üzerine katlanmış, kenarları henüz kapatılmamış hamur"
>

İlk ekranda LCP olarak ölçülen fotoğraf için farklı bir seçim gerekir:

<img
  src="/images/finished-loaf.webp"
  width="1200"
  height="800"
  loading="eager"
  fetchpriority="high"
  alt="Altın rengi kabuklu, fırından yeni çıkmış ekmek"
>

eager normal yükleme demektir; loading belirtmemek de genellikle aynıdır. Şablon aksi hâlde otomatik geç yükleme ekliyorsa açık değer yardımcı olur. İndirmenin anında tamamlanacağı anlamına gelmez. MDN görsel öğesi başvurusu özellikleri açıklar.

Tarayıcı, görseli istemek için ne zaman yeterince yaklaştığına karar verir. İstek görünmeden önce başlayabilir; ekran dışındaki bir istek tek başına hata kanıtı değildir. Testi sabit bir kaydırma mesafesine bağlamayın. web.dev yerleşik geç yükleme rehberine bakın.

Yer ayırma ve uyumlu görsel sürümlerini koruma

width ve height için kaynak dosyanın piksel ölçülerini girin; örnekte 1200 × 800. Bunlar oranı belirler, CSS daha küçük gösterebilir. Farklı oranlı görsele aynı değerleri kopyalamak yanlış alan ayırır. Kırpmadan ölçeklemek için:

.article-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Görsele class="article-image" ekleyin veya mevcut kuralı uyarlayın. Sabit kırpma varsa gösterilen alanı ayırın. Gerçek düzeni kontrol edin: başka CSS kuralları sonucu değiştirebilir.

Geç yükleme srcset ve sizes yerine geçmez. Tarayıcının uygun dosyayı seçebilmesi için yararlı sürümleri koruyun. picture içinde yükleme ayarı img üzerine gelir. Duyarlı görseller rehberi tam örnekler içerir.

Yayınlanan sayfada değişikliği test etme

1. Başlangıç değerlerini kaydedin. URL, pencere boyutu, LCP öğesi ve süresi, ana görsel isteğinin başlangıcı ve kaydırma öncesi aktarılan görsel verisini not edin. İlk ziyaret mi, önbellekli test mi olduğunu belirtin.
2. Görsel isteklerini inceleyin. Yenilemeden önce Network panelini açıp görselleri filtreleyin. İlk ekranda hangi dosyalar isteniyor, ne zaman başlıyor?
3. Tek kuralı değiştirin. Ana görselin ertelemesini kaldırın veya sonraki görseller için etkinleştirin.
4. Yayınlanan sonucu doğrulayın. Gereken önbellek yenilemesinden sonra özellikleri ve istenen adresleri kontrol edin. Yerel şablon değişikliği henüz canlı sayfayı değiştirmez.
5. Tekrarlayın ve kaydırın. Eşdeğer testleri karşılaştırın. Yavaş ve hızlı kaydırın, galerileri ve bölüm bağlantılarını deneyin. Boş alanları ve düzen kaymalarını izleyin.

“Disable cache”, geliştirici araçları açıkken tarayıcı önbelleğini devre dışı bırakır; sunucu veya CDN önbelleğini temizlemez. Chrome Network belgeleri incelemeyi açıklar. Ağ koşullarını aynı tutun ve yalnızca en iyi sonucu değil, birkaç denemeyi karşılaştırın.

Aynı pencere, ağ ayarları ve kaydırma öncesi gözlem süresiyle en üstten başlayın. Sonraki isteklerin karşılaştırmayı bozmaması için başlangıç sonuçlarını önce kaydedin. Tarayıcının eski kaydırma konumunu geri getirmesi, aşağıdaki görseli hemen yükletebilir.

Başarılı değişiklik, ilk ekranı hızlı ve sonraki görselleri gerektiğinde hazır tutar. Erken isteklerin azalması ancak okuma ve gezinme akıcı kalırsa faydalıdır. Sonuçlar için PageSpeed rehberini kullanın.

Örnek: bir kapak ve on iki görsel

Uzun bir yazıda ilk ekranda kapak, aşağıda on iki fotoğraf olsun. Genel ayar on üçünü de erteliyor. Kapak dosyası küçük olsa da telefonda geç görünüyor. Bu bir iş akışı örneğidir, ölçülmüş hız artışı değildir.

Kapağın LCP öğesi olup olmadığını doğrulayın. Ertelemesini kaldırıp yalnızca bunu test edin. Sonraki uygun görsellerde seçici ertelemeyi ve ayrılmış alanı koruyun. İlk görsel bilgisayarda hemen görünüyorsa o da normal yüklensin.

Yayınlamadan sonra benzer koşullarda isteğin başlangıcını ve LCP’yi karşılaştırın. On iki fotoğrafı ve bir bölüm bağlantısını kontrol edin. Kapak erken geliyor ama animasyonla gizleniyorsa yükleme özelliğini tekrar değiştirmek yerine gösterim gecikmesini araştırın.

Görselleri arama motorları için erişilebilir tutma

Anlamlı alternatif metin ve gerçek kaynak adresi kullanın. Tıklama veya kaydırma olana kadar yalnızca yer tutucu bırakan betiği inceleyin. Google’ın geç yüklenen içerik önerileri, kullanıcı etkileşimi olayına bağlı kalmadan görünür alana girerken yüklemeyi önerir.

Gerekirse Search Console URL Denetimi ile işlenmiş sayfayı inceleyin. Önemli görsel adresleri işlenmiş HTML’de yer alıyor mu? Bir performans ayarı tüm görsellerin dizine eklenmesini veya sıralamaların iyileşmesini garanti etmez.

Sık sorulan sorular

Tüm görseller geç mi yüklenmeli?

Hayır. Konuma ve öneme göre seçin. İlk ekranda gerekenler, özellikle LCP görseli, beklememeli.

Dosya küçülür mü?

Hayır, isteğin zamanı değişir. Piksel veya dosya boyutu fazlaysa ayrı bir kopyayı boyutlandırın ya da sıkıştırın.

JavaScript kitaplığı gerekir mi?

Normal HTML görsellerinin yerleşik geç yüklemesi için gerekmez. JavaScript kapalıysa erteleme yapılmaz, gerçek adresli görseller normal yüklenir. Tek adresi data-src içinde saklayan betik yedek çözüm gerektirir. Özel çözümü yalnızca belirli bir ihtiyaç için seçip dikkatle test edin.

Neden bazı ekran dışı görseller hemen yükleniyor?

Yeterince yakın olabilirler veya başka bir bileşen ön yükleme yapıyordur. Hata demeden önce isteği başlatanı ve galeri veya tema ayarlarını kontrol edin.

Asenkron çözümleme geç yüklemenin yerini alır mı?

Hayır. decoding çözümleme ve gösterimle, loading ertelemeyle ilgilidir. Biri diğerinin ayarını göstermez.

Yapay zekâyla özetleChatGPT (yeni sekmede açılır)Grok (yeni sekmede açılır)Google (yeni sekmede açılır)Perplexity (yeni sekmede açılır)Claude (yeni sekmede açılır)