Tembel yüklemenin doğru kullanımı.
Tembel yükleme, bir kaynağın kullanıcı ona yaklaşana kadar indirilmemesidir ve yanlış yere uygulandığında performansı iyileştirmek yerine bozar.
Fikir basit ve doğru: kullanıcının hiç görmeyeceği bir görseli indirmenin anlamı yok. Uzun bir sayfada yirmi görsel varsa ve kullanıcı yalnız ilk üçünü görüyorsa, on yedi indirme boşa gitmiştir — hem bant genişliği hem de ana iş parçacığı zamanı açısından.
Modern tarayıcılar bunu tek bir öznitelikle sunuyor; ek kütüphane gerekmiyor. Ama tam da bu kolaylık, en yaygın hatayı üretiyor: özniteliği tüm görsellere toplu olarak uygulamak.
Görünür alandaki kaynağa uygulanmaz
Kural tek cümledir: görünür alanda olan hiçbir kaynak tembel yüklenmez. Sebebi doğrudan LCP ile ilgili — tembel yükleme, tarayıcının kaynağı keşfetmesini ve istemeye başlamasını geciktirir. Görünür alandaki bir görsel zaten hemen gerekiyorsa, geciktirmek net kayıptır.
Hero görseli neredeyse her zaman LCP öğesidir ve tembel yüklendiğinde LCP doğrudan uzar. Bu, ölçülebilir ve tekrar edilebilir bir gerilemedir — ve iyi niyetle yapılmış bir optimizasyonun sitesi yavaşlatmasının en net örneğidir.
- Görünür alandaki görsel — tembel yükleme YOK. Gerekirse öncelik yükseltme.
- Görünür alanın hemen altındaki — sınırda; tarayıcı zaten belirli bir mesafe önceden yüklemeye başlar.
- Sayfanın derinlerindeki görseller — tembel yükleme EVET, en büyük kazanç burada.
- Gömülü çerçeveler — video oynatıcı, harita, sosyal kutu. Tembel yükleme kesinlikle evet; en ağır kaynaklar bunlar.
- Arka plan görselleri — öznitelik çalışmaz; ayrı bir teknik gerekir.
Dördüncü madde çoğu sitede en büyük tek kazançtır. Gömülü bir video oynatıcı, kendisiyle birlikte yüz kilobaytlarca betik getirir ve kullanıcı videoyu hiç oynatmasa bile o maliyet ödenir. Oynatıcıyı yalnız tıklamada yüklemek, sayfa ağırlığını yarıya indirebiliyor.
Boyut rezervasyonu şart
Tembel yüklenen her kaynak, bir düzen kayması adayıdır: kaynak geldiğinde yer kaplamaya başlar ve altındaki her şeyi iter. Bu yüzden tembel yükleme ile boyut bildirimi ayrılmaz ikilidir — biri diğeri olmadan uygulanmamalıdır.
Görsellerde çözüm genişlik ve yükseklik özniteliklerini yazmaktır; tarayıcı bu ikisinden en-boy oranını hesaplar ve duyarlı düzende bile doğru yeri ayırır. Gömülü çerçevelerde ise bir kapsayıcıya oran verilmesi gerekir.
Bu sitede §17.8 canlı önizleme videoları tam olarak böyle kurulu: videolar önceden yüklenmiyor, yeri poster karesiyle rezerve ediliyor ve hareket azaltma tercihi açıkken video hiç yüklenmiyor. Üç davranış da doğrulama süitinde ayrı ayrı ölçülüyor.
Tembel yükleme ile boyut bildirimi ayrılmaz ikilidir; biri diğeri olmadan uygulanmaz.
İçerik görünürlüğü
Görsellerin ötesinde, sayfanın tamamen ekran dışında kalan bölümleri için de bir kazanç var: tarayıcıya o bölümlerin düzenini ve boyamasını erteleme talimatı verilebiliyor. Uzun sayfalarda bu, ilk boyama süresini belirgin biçimde kısaltıyor.
Aynı tuzak burada da geçerli: ertelenen bölümün yer kaplayacağı alan bildirilmezse, kullanıcı oraya kaydırdığında düzen değişir. Tahmini bir boyut vermek bu riski kapatıyor.
Bir de erişilebilirlik boyutu var ve gözden kaçıyor: ertelenen içerik sayfa içi aramada bulunmayabilir. Kullanıcı tarayıcının arama işleviyle bir kelime aradığında, henüz render edilmemiş bir bölümdeki metin bulunmaz. Bu, uzun belgelerde gerçek bir kullanılabilirlik kaybıdır ve tekniğin nerede uygulanacağını sınırlar.
Ne kadar erken yüklenmeli
Tembel yükleme «görünene kadar bekle» demek değil; tarayıcılar belirli bir mesafe önceden yüklemeye başlar. Aksi hâlde kullanıcı kaydırdığında boş bir alan görür ve görsel gecikmeli gelir — bu, tembel yüklemenin en sık şikâyet edilen yan etkisidir.
Tarayıcının varsayılan öngörü mesafesi bağlantı hızına göre değişiyor ve genelde makul. Elle kontrol gerektiğinde bir gözlemci ile özel bir mesafe tanımlanabiliyor — ama varsayılanı değiştirmeden önce gerçekten sorun olup olmadığı ölçülmelidir.
Pratik test şu: sayfayı normal hızda kaydırın ve görsellerin yerinde hazır olup olmadığına bakın. Boş alan görüyorsanız mesafe artırılmalı; hiç boş alan görmüyorsanız muhtemelen fazla erken yükleniyor ve tasarruf kayboluyor.
Bir de ölçüm notu: tembel yüklemenin kazancı toplam bayt olarak ölçülmeli, sayfa ağırlığı raporlarında görülen ilk yükleme değerine bakılarak değil. İlk yükleme her zaman iyi görünür — asıl soru, kullanıcı sayfayı sonuna kadar kaydırdığında toplamın ne olduğudur.
Denetim: neyin tembel olduğunu görmek
Bir sitede tembel yüklemenin doğru uygulanıp uygulanmadığını görmek birkaç dakika sürüyor. Tarayıcı ağ panelinde sayfa açıldığında hangi görsellerin indirildiğine bakılır; görünür alan dışındaki görseller listede varsa tembel yükleme çalışmıyor demektir.
Ters kontrol daha önemli: görünür alandaki görseller listede YOK ise, onlara yanlışlıkla tembel yükleme uygulanmış demektir ve LCP zarar görüyor. Bu, toplu uygulamanın tipik sonucudur ve raporlarda hiç görünmez.
Üçüncü kontrol gömülü çerçevelerdir: sayfa açılışında bir video oynatıcı ya da harita betiği iniyorsa, o kaynak tembelleştirilmemiş demektir. Bunlar genelde en ağır kalemlerdir ve en büyük kazanç oradadır.
Bu üç kontrol bir denetim listesine dönüştürülebilir ve otomatikleştirilebilir: sayfa açılışında inen kaynakların listesi çıkarılır ve beklenen listeyle karşılaştırılır. Beklenmeyen bir kaynak indiğinde test kırmızı verir.
Son bir ilke: tembel yükleme bir varsayılan değil bir karardır. «Her şeyi tembelleştir» ile «hiçbir şeyi tembelleştirme» arasındaki doğru yer, sayfanın hangi kaynağının görünür alanda olduğuna bağlı ve bu, her sayfa şablonu için ayrı belirlenir. Toplu uygulanan hiçbir performans ayarı, ölçülerek verilmiş bir karardan iyi sonuç vermiyor.
Pratik kontrol listesi
Bu sayfanın anlattıklarını bir denetim adımına çevirmek gerekirse, tembel yükleme kurulumunu için bakılacaklar şunlar. Liste kısa tutuldu çünkü uzun listeler yürünmüyor; altı madde bir oturumda tamamlanabilir.
- Görünür alandaki görsellere uygulanmış mı — uygulanmışsa KALDIRILMALI.
- Hero görseli yüksek öncelikli mi?
- Derindeki görseller tembel mi — değilse en büyük kazanç orada.
- Gömülü çerçeveler tembel mi — video, harita, sosyal kutu.
- Her tembel kaynağın yeri rezerve edilmiş mi?
- Kaydırırken boş alan görünüyor mu — görünüyorsa öngörü mesafesi artırılmalı.
Birinci ve üçüncü madde birbirinin zıddı ve ikisinin de kontrol edilmesi gerekiyor: yanlış yere uygulanmış bir tembel yükleme LCP'yi bozar, uygulanmamış bir tembel yükleme bant genişliğini yakar.