Hibrit Tembel Yükleme: Yerel Tembel Yüklemeye Aşamalı Geçiş

Geçtiğimiz birkaç hafta içinde, önümüzdeki aylarda Chromium 75'e gelecek olan yerel tembel yükleme hakkında bir şeyler duymuş veya okumuş olabilirsiniz.

"Evet, harika bir haber ama tüm tarayıcılar bunu destekleyene kadar beklememiz gerekecek."

Aklınızdan geçen ilk şey buysa, okumaya devam edin. Seni tam tersine ikna etmeye çalışacağım.

Yerel tembel yükleme ile eski iyi JavaScript güdümlü yükleme arasında bir karşılaştırma ile başlayalım.

Native Versus JavaScript-Driven Tembel Yüklemeye Karşı

Tembel yükleme, ekranın alt kısmındaki içeriğin yüklenmesini erteleyerek ekranın üst kısmındaki görüntülerin ve iframe'lerin (ve bazen videoların) oluşturma hızını en üst düzeye çıkararak bir web sitesinin veya web uygulamasının performansını artırmanın bir yoludur.

JavaScript'e Dayalı Tembel Yükleme

Resimleri veya iframe'leri tembelce yüklemek için, uygun src niteliğini benzer bir veri niteliği olan data-src ile değiştirerek bunları işaretlemek ve ardından resimlerin/iframe'lerin ne zaman alındığını algılamak için bir JavaScript çözümüne güvenmek çok yaygın bir uygulamadır. web sitesinin görünür kısmına yakın (genellikle kullanıcı aşağı kaydırdığı için) ve veri özniteliklerini uygun olanlara kopyalamak, ardından içeriklerinin ertelenmiş yüklenmesini tetiklemek için.

 <img data-src="turtle.jpg" alt="Lazy turtle" class="lazy">

Yerel Tembel Yükleme

Yerel tembel yükleme spesifikasyonuna göre (hala geliştirme aşamasında), yerel tembel yükleme özelliğini kullanarak görüntüleri veya iframe'leri tembel olarak yüklemek istiyorsanız, ilgili etikete loading=lazy niteliğini eklemeniz yeterlidir.

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

Addy Osmani, “Web İçin Yerel Görüntü Tembel Yükleme!” başlıklı makalesinde bu konu hakkında kapsamlı bir şekilde yazdı. Google Chrome ekibinin zaten özelliği geliştirdiğini ve Chrome 75'te göndermeyi planladığını belirtti.

Opera ve Microsoft Edge gibi diğer Chromium tabanlı tarayıcılar da Chromium 75 tabanlı ilk güncellemelerinde aynı özelliği kazanarak bu geliştirmeden yararlanacak.

Yerel Tembel Yüklemeye Başlayın

Web sitenizin resimlerinin, sayfa açılışında gecikmeli yükleme olmadan tek seferde indirilmesi durumunda, web sitenizde yerel tembel yüklemeyi (destekleniyorsa) bir HTML özniteliği eklemek kadar kolay bir şekilde etkinleştirebilirsiniz. loading özelliği, tarayıcılara hangi resimlerin hemen yüklenmesinin önemli olduğunu ve kullanıcılar aşağı kaydırdıkça hangilerinin tembelce indirilebileceğini söyler. Aynı nitelik iframe'lere de uygulanabilir.

Tarayıcılara, belirli bir görüntünün önemli olduğunu ve böylece onu mümkün olan en kısa sürede yükleyebileceklerini söylemek için, img etiketine loading="eager" niteliğini eklemelisiniz. En iyi uygulama, bunu birincil görüntüler için yapmaktır - genellikle ekranın üst kısmında görüntülenecek olanlar için.

 <img src="rabbit.jpg" alt="Fast rabbit" loading="eager">

Tarayıcılara bir görüntünün tembelce indirilmesi gerektiğini söylemek için loading="lazy" özniteliğini eklemeniz yeterlidir. Bu, yalnızca ikincil görüntülere yaparsanız en iyi uygulamadır - genellikle ekranın altında görüntülenenler için.

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

Yalnızca resimlerinize ve iframe'lerinize loading özelliğini ekleyerek, web sitenizin aşamalı bir geliştirme olarak yerel tembel yüklemeyi kullanmasını sağlayabilirsiniz. Çoğu modern tarayıcıda kullanıcılarınıza destek geldikçe web siteniz yavaş yavaş bundan faydalanacaktır.

Bu, web siteniz bugün herhangi bir tür tembel yükleme kullanmıyorsa, kullanılacak en iyi yaklaşımdır, ancak JavaScript'e dayalı bir tembel yükleme çözümünü zaten uyguladıysanız, aşamalı olarak yerel tembel yüklemeye geçerken bunu korumak isteyebilirsiniz.

İdeal çözüm, yerel tembel yüklemeyi hemen kullanmaya başlamak ve tüm tarayıcılarda çalışmasını sağlamak için bir çoklu dolgu kullanmak olacaktır. Ne yazık ki, yerel tembel yükleme, JavaScript ile çoklu doldurabileceğimiz bir özellik değil.

Polyfill İçin Kullanılmaz

Tek bir tarayıcıda yeni bir tarayıcı teknolojisi yayınlandığında, açık kaynak topluluğu genellikle aynı teknolojiyi diğer tarayıcılara sağlamak için bir JavaScript çoklu dolgusu yayınlar. Örneğin, IntersectionObserver çoklu dolgusu, yerel API'nin davranışını yeniden oluşturmak için Element.getBoundingClientRect() 'i koordine etmek için JavaScript ve DOM öğelerini kullanır.

Ancak, yerel tembel yükleme durumu farklıdır, çünkü loading="lazy" için bir JavaScript çoklu dolgusu, tarayıcıların bir görüntünün veya iframe'in işaretlemesinde bir URL buldukları anda içerik yüklemesini engellemek zorunda kalacaktır. JavaScript'in sayfa oluşturmanın bu ilk aşaması üzerinde hiçbir kontrolü yoktur, bu nedenle yerel tembel yüklemeyi çoklu doldurmak mümkün değildir.

Hibrit Tembel Yükleme

Yalnızca aşamalı bir geliştirme olarak yerel tembel yüklemeye sahip olmaktan memnun değilseniz veya JavaScript tabanlı tembel yüklemeyi zaten uyguladıysanız ve daha az modern tarayıcılarda bu özelliği kaybetmek istemiyorsanız (ancak yine de tarayıcılarda yerel tembel yüklemeyi etkinleştirmek istiyorsanız) destekleyen), o zaman farklı bir çözüme ihtiyacınız var. Tanıtımı: hibrit tembel yükleme.

Hibrit tembel yükleme, onu destekleyen tarayıcılarda yerel tembel yüklemeyi kullanmak için bir tekniktir, aksi takdirde tembel yüklemeyi işlemek için JavaScript'e güvenir.

“

Hibrit tembel yükleme yapmak için, tembel içeriğinizi gerçek öznitelikler yerine data özniteliklerini kullanarak işaretlemeniz (JavaScript güdümlü tembel yüklemede olduğu gibi) ve loading="lazy" özniteliğini eklemeniz gerekir.

 <img data-src="turtle.jpg" loading="lazy" alt="Lazy turtle">

O zaman biraz JavaScript'e ihtiyacınız var. İlk olarak, yerel tembel yüklemenin tarayıcı tarafından desteklenip desteklenmediğini tespit etmeniz gerekir. Ardından, loading="lazy" özniteliğine sahip her öğe için aşağıdakilerden birini yapın:

• Yerel tembel yükleme destekleniyorsa, data-src öznitelik değerini src özniteliğine kopyalayın;
• Desteklenmiyorsa, öğeler görünüm alanına girerken bunu yapmak için bir JavaScript tembel yükleme komut dosyası veya eklentisi başlatın.

Bu işlemleri kendi başınıza gerçekleştirmek için gerekli JavaScript kodunu yazmanız çok zor değil. Yerel tembel yüklemenin şu koşulla desteklenip desteklenmediğini tespit edebilirsiniz:

 if ('loading' in HTMLImageElement.prototype)

Öyleyse, src öznitelik değerini data-src öğesinden kopyalamanız yeterlidir. Değilse, seçtiğiniz bazı tembel yükleme komut dosyalarını başlatın.

İşte bunu yapan bir kod parçası.

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <script> (function() { if ("loading" in HTMLImageElement.prototype) { var lazyEls = document.querySelectorAll("[loading=lazy]"); lazyEls.forEach(function(lazyEl) { lazyEl.setAttribute( "src", lazyEl.getAttribute("data-src") ); }); } else { // Dynamically include a lazy loading library of your choice // Here including vanilla-lazyload var script = document.createElement("script"); script.async = true; script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"; window.lazyLoadOptions = { elements_selector: "[loading=lazy]" //eventually more options here }; document.body.appendChild(script); } })(); </script>

Yukarıdaki kodu bu canlı demoda bulabilir ve test edebilirsiniz.

Yine de, bu çok basit bir komut dosyasıdır ve duyarlı görüntüler elde etmek için ek öznitelikler veya etiketler ( srcset ve sizes öznitelikleri ve hatta picture ve source etiketleri gibi) kullandığınızda işler karmaşıklaşabilir.

Küçük Bir Üçüncü Taraf Yardımı

Son dört yıldır, “ vanilla-lazyload ” adında açık kaynaklı bir tembel yükleme betiğinin bakımını yapıyorum ve Addy Osmani'nin yerel tembel yükleme hakkında yazmasından birkaç gün sonra topluluk, senaryomun yapılıp yapılmayacağını sorarak tepki verdi. çoklu dolgu görevi görür.

Daha önce açıkladığım gibi, yerel tembel yükleme özelliği için bir çoklu dolgu oluşturamazsınız, ancak geliştiricilerin herhangi bir JavaScript kodu yazmaya gerek kalmadan yerel tembel yüklemeye geçişe başlamasını kolaylaştıracak bir çözüm düşündüm. Daha önce bahsetmiştim.

vanilla-lazyload 12. sürümünden başlayarak, karma tembel yüklemeyi etkinleştirmek için use_native seçeneğini true olarak ayarlayabilirsiniz. Komut dosyası yalnızca 2.0 kB gzip'lidir ve GitHub, npm ve jsDelivr'de zaten mevcuttur.

• GitHub'da vanilla-lazyload

Demolar

Chrome Canary veya Microsoft Edge Insider'ı ( dev channel ) indirip ardından "Geç görüntü yüklemeyi etkinleştir" ve "Gecik çerçeve yüklemeyi etkinleştir" bayraklarını etkinleştirerek bugün yerel tembel yüklemeyle oynamaya başlayabilirsiniz. Bu bayrakları etkinleştirmek için tarayıcınızın URL alanına about:flags yazın ve arama kutusunda “lazy” ifadesini arayın.

Yerel Tembel Yükleme Demosu

Geliştirici araçlarında yerel tembel yüklemenin nasıl çalıştığını analiz etmek için aşağıdaki demoyla oynamaya başlayabilirsiniz. Bunda, tek bir JavaScript satırı kullanılmaz . Evet, sadece tam düz yerel tembel yükleme.

• Yerel tembel yükleme demosunu test edin

Ne beklenir : Tüm resimler aynı anda, ancak farklı HTTP yanıtlarıyla alınır. 200 yanıt koduna sahip olanlar hevesle yüklenen görüntülerdir, yanıt kodu 206 sahip olanlar ise görüntüler hakkında ilk bilgileri almak için yalnızca kısmen getirilir. Bu görüntüler daha sonra aşağı kaydırdığınızda 200 yanıt koduyla tamamen getirilecektir.

Hibrit Tembel Yükleme Demosu

Hibrit tembel yüklemenin nasıl çalıştığını analiz etmek için bir sonraki demo ile oynamaya başlayabilirsiniz. Burada, [email protected] kullanılır ve use_native seçeneği true olarak ayarlanır:

• Hibrit tembel yükleme demosunu test edin

Ne beklenir : Nasıl davrandığını görmek için demoyu farklı tarayıcılarda deneyin. Yerel tembel yüklemeyi destekleyen tarayıcılarda davranış, yerel tembel yükleme demosundakiyle aynı olacaktır. Yerel tembel yüklemeyi desteklemeyen tarayıcılarda, siz aşağı kaydırdıkça resimler indirilecektir.

Lütfen vanilla-lazyload kaputun altında IntersectionObserver API'sini kullandığını unutmayın, bu nedenle Internet Explorer'da ve Safari'nin daha az yeni sürümlerinde çoklu doldurmanız gerekir. Yine de bir çoklu dolgu sağlanmadıysa önemli değil, çünkü bu durumda vanilla-lazyload tüm görüntüleri bir kerede indirecektir.

Not : Daha fazlasını vanilla-lazyload benioku dosyasının “Çoklu Doldurmak Veya Birden Fazla Doldurmamak” bölümünde okuyun.

Web Sitenizde Hibrit Tembel Yüklemeyi Deneyin

Yerel tembel yükleme yakında bazı tarayıcılara geleceğine göre, neden bugün karma tembel yüklemeyi kullanarak bir şans vermiyorsunuz? İşte yapmanız gerekenler:

HTML İşaretlemesi

En basit görüntü işaretlemesi iki öznitelikle yapılır: src ve alt .

Ekranın üst kısmındaki resimler için src niteliğini bırakıp loading="eager" niteliğini eklemelisiniz.

 <img src="important.jpg" loading="eager" alt="Important image">

Ekranın altındaki resimler için, src niteliğini data-src veri niteliğiyle değiştirmeli ve loading="lazy" niteliğini eklemelisiniz.

 <img data-src="lazy.jpg" loading="lazy" alt="A lazy image">

Duyarlı görüntüler kullanmak istiyorsanız, aynısını srcset sizes ile yapın.

 <img alt="A lazy image" loading="lazy" data-src="lazy.jpg">

picture etiketini kullanmayı tercih ederseniz, source etiketlerinde de srcset , sizes ve src öğelerini değiştirin.

 <picture> <source media="(min-width: 1200px)"> <source media="(min-width: 800px)"> <img alt="A lazy image" loading="lazy" data-src="lazy.jpg"> </picture>

picture etiketi, resimleriniz için WebP biçimini seçerek yüklemek için de kullanılabilir.

Not : vanilla-lazyload daha fazla kullanımını öğrenmek istiyorsanız , lütfen benioku dosyasının “Başlarken” HTML bölümünü okuyun.

JavaScript Kodu

Her şeyden önce, web sitenize vanilla-lazyload eklemeniz gerekir.

jsDelivr gibi bir CDN'den yükleyebilirsiniz:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

Veya npm kullanarak yükleyebilirsiniz:

 npm install vanilla-lazyload@12

Otomatik başlatma ile bir zaman async komut dosyası kullanmak da mümkündür; type="module" kullanarak bir ES modülü olarak yükleyin veya RequireJS kullanarak AMD olarak yükleyin. Benioku dosyasının "Başlarken" komut dosyası bölümünde vanilla-lazyload dahil etmenin ve kullanmanın daha fazla yolunu bulun.

Ardından, web sitenizin/web uygulamanızın JavaScript koduna aşağıdakileri ekleyin:

 var pageLazyLoad = new LazyLoad({ elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading });

Not : Komut dosyası, vanilla-lazyload davranışını özelleştirmek için kullanabileceğiniz birçok başka ayara sahiptir , örneğin öğeleri yüklemeye başlamak için kaydırma alanının mesafesini artırmak veya yalnızca görünüm alanında kaldıkları takdirde öğeleri yüklemek için. verilen zaman. Benioku dosyasının API bölümünde daha fazla ayar bulun.

Hep Birlikte, async Bir Komut Dosyası Kullanma

Hepsini bir araya getirmek ve performansı en üst düzeye çıkarmak için bir zaman async komut dosyası kullanmak için lütfen aşağıdaki HTML ve JavaScript koduna bakın:

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <!-- Set the options for the global instance of vanilla-lazyload --> <script> window.lazyLoadOptions = { elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading }; </script> <!-- Include vanilla lazyload 12 through an async script --> <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

Bu kadar! Bu çok basit ve kolay adımlarla, web sitenizde hibrit tembel yüklemeyi etkinleştirmiş olacaksınız!

Önemli En İyi Uygulamalar

• Tembel yüklemeyi yalnızca, muhtemelen ekranın alt kısmında görüntüleneceğini bildiğiniz resimlere uygulayın. Performansı en üst düzeye çıkarmak için ekranın üst kısmındakileri hevesle yükleyin. Sayfanızdaki tüm resimlere tembel yükleme uygularsanız, oluşturma performansını yavaşlatırsınız.
• Resimler yüklenmeden önce biraz yer ayırmak için CSS'yi kullanın. Bu şekilde, içeriğin geri kalanını aşağıya iteceklerdir. Bunu yapmazsanız, daha fazla sayıda resim, olması gerekenden önce ekranın üst kısmına yerleştirilecek ve bunlar için anında indirmeleri tetikleyecektir. Bunu yapmak için bir CSS numarasına ihtiyacınız varsa, vanilla-lazyload benioku sayfasının ipuçları ve püf noktaları bölümünde bir tane bulabilirsiniz.

Lehte ve aleyhte olanlar

Toplama

Tarayıcılara yerel tembel yükleme geliyor diye çok heyecanlıyım ve tüm tarayıcı satıcılarının bunu uygulamasını bekleyemem!

Bu arada, aşamalı geliştirme için HTML işaretlemenizi zenginleştirmeyi ve yalnızca desteklendiğinde yerel tembel yüklemeyi almayı seçebilir veya karma tembel yüklemeye gidebilir ve yerel tembel yüklemenin başlayacağı güne kadar hem yerel hem de JavaScript güdümlü tembel yükleme elde edebilirsiniz. tarayıcıların büyük çoğunluğu tarafından desteklenmelidir.

Bir şans ver! GitHub'da vanilla-lazyload yıldızlamayı/izlemeyi unutmayın ve yorum bölümünde düşüncelerinizi bana bildirin.

SmashingMag'de Daha Fazla Okuma :

• Şimdi Beni Görüyorsun: IntersectionObserver ile Nasıl Ertelenir, Tembel Yüklenir ve Hareket Edilir
• ConditionerJS ile JavaScript Modüllerini Tembel Yükleme
• Ön Uç Performans Kontrol Listesi 2019 (PDF, Apple Pages, MS Word)
• Web Sitesi Performansını Geliştirmek Gezegeni Kurtarmaya Nasıl Yardımcı Olabilir?