lazy loading: pratik rehber — LCP'nizi bozmayan doğru kullanım

Sayfanızın üstündeki görsel bulanık ve LCP 4 saniyeyi geçti

Siteyi açıyorsunuz, sayfanın üstü boş, sonra başlık görseli yavaşça beliriyor. PageSpeed Insights'ta da Lighthouse "Largest Contentful Paint" sınırını aştığını söylüyor. Suçluyu buldunuz: bir ay önce tüm görsellere mutlulukla eklediğiniz loading="lazy" attribute'u. İşte lazy loading'in bir optimizasyon aracından anti-pattern'e dönüştüğü yer tam olarak burası.

Şu işi bir kez olsun netleştirelim. lazy loading, tarayıcının kullanıcı öğeye yaklaşana kadar onu indirmemesi demek. Fikir doğru: uzun ve görsel dolu sayfalar, bu olmadan megabaytlarca gereksiz veri aktarır. Ancak yanlış uygulama, Google'ın kullanıcı deneyimi ana metriğini mahveder. Bu makale sadece "nasıl" ile ilgili değil; "nerede" ve "nerede değil" ile ilgili.

lazy loading gerçekten nerede yardımcı olur

Diyelim ki 40 galeri görselli bir ürün sayfanız var veya uzun bir yazıda 15 fotoğraflı bir blog yazınız. Kullanıcının onuncu fotoğrafı görmesi için kaydırması gerekir. Tüm görseller baştan indirilirse bant genişliği boşa harcanır ve sayfanın tam yüklenme süresi uzar. İşte lazy loading burada mucize yaratır: tarayıcı yalnızca viewport'a yakın görselleri alır ve gerisini ihtiyaç anına kadar bekletir.

Pratik sonucu basit bir testle görün. Her biri 200 KB olan 20 görselli bir sayfa düşünün. lazy loading olmadan tarayıcı yaklaşık 4 MB indirir. Onunla, tam kaydırma anına kadar belki sadece 2 MB. Bu, daha iyi TTFB ve algısal hız demek; sınırlı interneti olan mobil kullanıcılar için gerçek bir fark.

Ama bu hikayenin sadece yarısı. Doğru lazy loading, yalnızca sayfanın altındaki görsellerle sınırlı değil. Sayfanın altında YouTube video iframe'i veya Google Harita varsa, aynı mantığı uygulayın. Bu öğeler bir sayfanın en ağır parçalarıdır ve kullanıcı onlara ulaşana kadar indirilmeleri için bir neden yoktur.

Doğru uygulama yöntemi

En basit yol, HTML'in yerel attribute'u. Tek satır kod, hiçbir kütüphane olmadan:

<img src="product-1.jpg" alt="Ürün No: 1" loading="lazy" width="800" height="600">

width ve height değerlerini mutlaka verdiğinize dikkat edin. Bu ikisi olmadan tarayıcı görselin alanını bilemez ve kaydırma sırasında sayfa zıplar. Bu zıplama, CLS'yi (Cumulative Layout Shift) yükseltir ve Core Web Vitals'ın ikinci metriğini bozar. Görsel responsive ise, aynı attribute ile srcset kullanın:

<img src="small.jpg" srcset="small.jpg 400w, large.jpg 1200w" sizes="(max-width: 600px) 400px, 1200px" loading="lazy" width="1200" height="800" alt="Açıklama">

loading="lazy" desteklemeyen eski tarayıcılar için (Safari 15.4 öncesi), lazysizes gibi kütüphaneler kullanın. Ama önce şunu sorun: Hedef kitleniz gerçekten bu tarayıcıları kullanıyor mu? Google Analytics istatistiklerinizi kontrol edin. Eski Safari payı %2'nin altındaysa, kütüphane eklemeyin; 30 KB'lık bir script, sorunun kendisinin bir parçasıdır.

lazy loading'in LCP'yi bozduğu yer

LCP, ilk viewport'ta görülen en büyük içerik öğesi demektir. Genellikle bu öğe, başlık görseli, ana slider veya büyük başlıktır. Bu görsele loading="lazy" verirseniz, tarayıcı indirmeyi erteler. Sonuç mu? Kullanıcı boş veya yarı boş bir sayfa görür ve LCP'niz 2,5 saniyeden 4 veya 5 saniyeye çıkar.

İşte burada hata yapıyorlar: Birçok kişi "tüm görselleri lazy yapayım, site hızlanır" diye düşünür. Sonucu PageSpeed Insights'ta görürsünüz: LCP görselinin gecikmeli yüklendiğini söyleyen kırmızı bir uyarı. Bu hata o kadar yaygındır ki Google'ın buna özel bir denetimi vardır: "Largest Contentful Paint image was lazily loaded".

Altın kural: Sayfanın ilk 1000 pikselinde (veya daha iyisi, ilk viewport'ta) görünen herhangi bir öğe asla lazy yapılmamalıdır. Bu, logo, başlık görseli ve ana slider'ı içerir. Bunlar için fetchpriority="high" kullanarak tarayıcıya bu öğenin kritik olduğunu söyleyin:

<img src="hero.jpg" alt="Ana banner" fetchpriority="high" width="1920" height="1080">

Bu attribute'u lazy ile birleştirmeyin. İkisi birbiriyle çelişir ve tarayıcı öngörülemez davranış gösterebilir. Ya biri, ya diğeri.

Hangi görselin LCP olduğunu nasıl anlarsınız

Google'ın ücretsiz araçlarını unutmayın. Chrome DevTools'ta Performance sekmesini açın, bir kez kaydedin ve Timings bölümüne bakın. LCP öğesi mavi bir etiketle işaretlenmiştir. PageSpeed Insights'ta da ayrıntılı rapor alırsınız. Bu detaylara girmek istemiyorsanız, basit bir kuralım var: Kaydırmadan görünen her görsel LCP'dir veya ona yakındır. O yüzden lazy yapmayın.

Daha ayrıntılı teknik kontrol için, sunucunun doğru yanıt verdiğinden emin olmak üzere çevrimiçi DNS ve HTTP başlık kontrol araçlarını kullanabilirsiniz. DNS gecikmesi veya yüksek TTFB, doğru lazy loading ile bile LCP'yi bozar. Bu iki sorunu ayrı ele alın: lazy loading yalnızca tarayıcı indirmesini erteler, ancak sunucunun kendisi yavaşsa hiçbir istemci tarafı hilesi yardımcı olmaz.

CSS arka plan görsellerini unutmayın

Bir diğer yaygın senaryo: CSS'te background-image ile tanımlanan arka plan görselleri. Yerel loading="lazy" attribute'u bunlarda çalışmaz. Bu görseller HTML dışındadır ve tarayıcı onları normal bir asset gibi görür. Sonuç mu? Sayfanın üstünde ağır bir arka plan görseliniz varsa, hiçbir kontrol olmadan indirilir ve LCP'yi bozar.

Çözüm nedir? İki seçeneğiniz var. Birincisi, arka plan görseli yalnızca dekoratifse, onu bir CSS gradyanı veya düz renkle değiştirin. İkincisi, gerçekten gerekiyorsa, content-visibility: auto tekniğini kullanın:

.lazy-bg {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

Bu özellik tarayıcıya, bu bölümün render'ını viewport'ta olana kadar ertelemesini söyler. Ancak dikkat: Bu render içindir, indirme için değil. Tarayıcı görseli yine de indirebilir, sadece render'ı erteler. İndirmeyi gerçekten kontrol etmek için Intersection Observer kullanmanız ve sınıfı koşullu olarak eklemeniz gerekir. Bu daha karmaşıktır, ancak arka plan görselleri için tek doğru yoldur.

lazy loading ve SEO; yanlış anlaşılan ilişki

Google, lazy loading'i anladığını ve lazy edilmiş içeriği indekslediğini açıkladı. Google botları sayfayı daha büyük bir viewport ile görür ve lazy edilmiş öğeleri de inceler. Bu yüzden sayfanın altındaki görsellerin indeksten çıkacağından endişelenmeyin. Ancak bir koşul var: lazy loading için JavaScript kullanıyorsanız, içeriğin JS olmadan da erişilebilir olduğundan emin olun. Görsel yalnızca JS ile yükleniyorsa ve Googlebot script'i çalıştıramazsa, o görsel SEO için kaybolur.

Bir diğer önemli nokta: lazy loading, görsel sıkıştırmanın yerini tutmaz. 5 MB'lık bir görseli lazy yaparsanız, yalnızca indirmeyi ertelersiniz; kullanıcı ona ulaştığında yine o 5 MB'ı alır. WebP veya AVIF formatı, Squoosh gibi araçlarla sıkıştırma ve doğru boyutlar her zaman ilk önceliktir. lazy loading yalnızca optimizasyonun son katmanıdır, tüm hikaye değil.

Optimize edilmiş görseli lazy loading ile birleştirmek istiyorsanız, sırayı doğru kurun: önce sıkıştırma, sonra doğru boyutlar, sonra lazy loading. Bu sırayı değiştirmeyin. Birçok kişi lazy loading'in "artık görseli optimize etmeme gerek yok" anlamına geldiğini düşünür. Bu yanlıştır ve son kullanıcı bunun bedelini yavaş kaydırma ve takılma ile öder.

Son karar: lazy loading'i ne zaman kullanmalı

Hızlı karar için basit bir tablo:

Siteniz 3 görselli kısa bir açılış sayfasıysa, lazy loading neredeyse hiçbir şey kazandırmaz. Eklediği karmaşıklık buna değmez. Bu teknik, uzun ve içerik dolu sayfalar için tasarlanmıştır, her şey için değil. Benim tercihim mi? Her yeni projede önce görselleri sıkıştırırım, boyutları netleştiririm ve yalnızca ondan sonra sayfanın altındaki öğeler için lazy loading eklerim. Sayfa kısaysa, hiç eklemem.

Araçlar hakkında son bir not: WordPress kullanıyorsanız, Smush veya ShortPixel gibi eklentiler bunu otomatikleştirir. Ancak otomatik, dikkatsiz demektir. Bu eklentiler genellikle başlık görseli dahil tüm görselleri lazy yapar. Kurulumdan sonra ana sayfayı PageSpeed Insights'ta mutlaka kontrol edin ve "lazily loaded LCP image" hatası görürseniz, başlık görselini lazy listesinden çıkarın. Otomatik araçların size iş çıkardığı yer tam olarak burasıdır.

Sitenizin hız durumu hakkında daha kapsamlı bir inceleme arıyorsanız, ServerNet SEO ve webmaster araçları sitenizin teknik durumu hakkında genel bir bakış sunabilir. Ancak unutmayın: hiçbir araç, tarayıcı davranışını doğru anlamanın yerini tutmaz.

Sık sorulan sorular

lazy loading SEO'yu olumsuz etkiler mi?

Hayır, doğru uygulanırsa. Google lazy edilmiş içeriği indeksler ve normal görsel ile lazy edilmiş görsel arasında ayrım yapmaz. Sorun yalnızca içerik JavaScript olmadan erişilemediğinde veya LCP görselini lazy yapıp site hızını bozduğunuzda ortaya çıkar; bu da dolaylı olarak sıralamayı etkiler.

lazy loading'in çalıştığını nasıl anlarım?

Chrome DevTools'ta Network sekmesini açın ve sayfayı yenileyin. İstek listesine bakın; sayfanın altındaki görseller başlangıçta indirilmemelidir. Şimdi kaydırın ve her görsele yaklaştıkça isteğinin gönderildiğini görün. Tüm görseller baştan indirildiyse, attribute'u doğru koymamışsınız veya tarayıcı desteklemiyordur.

lazy loading video için de çalışır mı?

Evet, <video> etiketi için de loading="lazy" kullanabilirsiniz, ancak tarayıcı desteği daha sınırlıdır. Video için daha güvenli yöntem, tarayıcıya videoyu oynatma başlayana kadar indirmemesini söyleyen preload="none" attribute'udur. YouTube iframe'leri için de loading="lazy" iyi çalışır.

lazy loading ile preload arasındaki fark nedir?

Bu ikisi tamamen birbirinin zıttıdır. lazy loading "ihtiyaç olana kadar indirme" der. preload ise "hemen indir, çünkü yakında gerekecek" der. LCP görseli için fetchpriority="high" veya preload kullanın, geri kalanı için lazy loading. Bu ikisini aynı öğede birleştirmek, tarayıcı davranışını öngörülemez hale getirir.