Încărcare leneră hibridă: o migrare progresivă la încărcare leneră nativă

În ultimele săptămâni, s-ar putea să fi auzit sau citit despre încărcarea nativă leneșă, care va veni pe Chromium 75 în lunile următoare.

„Da, vești grozave, dar va trebui să așteptăm până când toate browserele îl acceptă.”

Dacă acesta a fost primul lucru care ți-a trecut prin minte, continuă să citești. Voi încerca să vă conving de contrariul.

Să începem cu o comparație între încărcarea leneșă nativă și cea bună, bazată pe JavaScript.

Încărcare leneră nativă versus JavaScript

Încărcarea leneră este o modalitate de a îmbunătăți performanța unui site web sau a unei aplicații web prin maximizarea vitezei de redare a imaginilor și a cadrelor iframe (și, uneori, a videoclipurilor) de deasupra paginii, prin amânarea încărcării conținutului de mai jos.

Încărcare leneră determinată de JavaScript

Pentru a încărca leneș imagini sau cadre iframe, este o practică foarte obișnuită să le marcați prin înlocuirea atributului src adecvat cu un atribut de date similar, data-src , apoi să vă bazați pe o soluție JavaScript pentru a detecta când imaginile/iframe-urile primesc aproape de porțiunea vizibilă a site-ului web (de obicei pentru că utilizatorul a derulat în jos) și să copieze atributele datelor în cele adecvate, declanșând apoi încărcarea amânată a conținutului acestora.

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

Încărcare lenenă nativă

Conform specificației native de încărcare leneșă (încă în curs de dezvoltare), dacă doriți să încărcați leneș imagini sau cadre iframe folosind caracteristica nativă de încărcare leneșă, ar trebui doar să adăugați atributul loading=lazy pe eticheta aferentă.

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

Addy Osmani a scris pe larg despre acest subiect în articolul său „Native Image Lazy-Loading For The Web!” în care a declarat că echipa Google Chrome dezvoltă deja caracteristica și intenționează să o livreze în Chrome 75.

Alte browsere bazate pe Chromium, cum ar fi Opera și Microsoft Edge, vor beneficia și ele de această dezvoltare, obținând aceeași caracteristică în prima lor actualizare bazată pe Chromium 75.

Începeți cu încărcarea leneră nativă

În cazul în care imaginile site-ului dvs. sunt descărcate simultan la aterizarea paginii fără încărcare leneră, puteți activa (dacă este acceptată) încărcarea leneră nativă pe site-ul dvs. la fel de ușor ca și adăugarea unui atribut HTML. Atributul de loading le spune browserelor ce imagini sunt importante pentru a încărca imediat și care pot fi descărcate leneș pe măsură ce utilizatorii derulează în jos. Același atribut poate fi aplicat cadrelor iframe.

Pentru a le spune browserelor că o anumită imagine este importantă, astfel încât să o poată încărca cât mai curând posibil, trebuie să adăugați atributul loading="eager" pe eticheta img . Cea mai bună practică este să faceți acest lucru pentru imaginile primare - de obicei pentru cele care vor fi afișate deasupra pliului.

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

Pentru a le spune browserelor că o imagine ar trebui să fie descărcată leneș, trebuie doar să adăugați atributul loading="lazy" . Aceasta este cea mai bună practică numai dacă o faceți numai pentru imagini secundare - de obicei pentru cele vor fi afișate sub pliul.

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

Doar adăugând atributul de loading imaginilor și cadrelor dvs. iframe, veți permite site-ului dvs. web să utilizeze încărcarea leneșă nativă ca o îmbunătățire progresivă. Site-ul dvs. web va beneficia treptat de pe urma acestuia, pe măsură ce asistența ajunge la utilizatorii dvs. în majoritatea browserelor moderne.

Aceasta este cea mai bună abordare de utilizat dacă site-ul dvs. web nu folosește nici un fel de încărcare leneră astăzi, dar dacă ați implementat deja o soluție de încărcare leneră bazată pe JavaScript, este posibil să doriți să o păstrați în timp ce treceți progresiv la încărcarea leneră nativă.

Soluția ideală ar fi să începeți să utilizați imediat încărcarea leneșă nativă și să utilizați o completare polivalentă pentru a o face să funcționeze în toate browserele. Din păcate, încărcarea nativă leneșă nu este o caracteristică pe care o putem completa cu JavaScript.

Nu este folosit pentru o umplutură polivalentă

Atunci când o nouă tehnologie de browser este lansată într-un singur browser, comunitatea open-source lansează de obicei un polyfill JavaScript pentru a oferi aceeași tehnologie pentru restul browserelor. De exemplu, polifillul IntersectionObserver folosește elemente JavaScript și DOM pentru a coordona Element.getBoundingClientRect() pentru a reproduce comportamentul API-ului nativ.

Dar cazul încărcării native lazy este diferit, deoarece o completare JavaScript polyfill pentru loading="lazy" ar trebui să împiedice browserele să încarce conținut imediat ce găsesc o adresă URL în marcajul unei imagini sau al unui iframe. JavaScript nu are control asupra acestei etape inițiale a redării paginii, prin urmare nu este posibilă completarea policompletei native lazy loading.

Încărcare leneșă hibridă

Dacă nu sunteți mulțumit de încărcarea leneră nativă doar ca îmbunătățire progresivă sau dacă ați implementat deja încărcarea leneră bazată pe JavaScript și nu doriți să pierdeți această funcție în browsere mai puțin moderne (dar doriți totuși să activați încărcarea leneră nativă pe browsere care îl susțin), atunci aveți nevoie de o soluție diferită. Introducere: încărcare leneșă hibridă.

Încărcarea leneră hibridă este o tehnică de utilizare a încărcării leneșe native pe browserele care o acceptă, în caz contrar, bazează-te pe JavaScript pentru a gestiona încărcarea leneșă.

„

Pentru a face încărcare leneșă hibridă, trebuie să marcați conținutul leneș folosind atributele de data în loc de cele reale (cum ar fi încărcarea leneșă bazată pe JavaScript) și să adăugați atributul loading="lazy" .

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

Atunci aveți nevoie de ceva JavaScript. În primul rând, trebuie să detectați dacă încărcarea nativă leneșă este sau nu acceptată de browser . Apoi, faceți una dintre următoarele pentru fiecare element cu atributul loading="lazy" :

• Dacă încărcarea nativă lazy este acceptată, copiați valoarea atributului data-src în atributul src ;
• Dacă nu este acceptat, inițializați un script de încărcare leneră JavaScript sau un plugin pentru a face asta pe măsură ce elementele intră în fereastra de vizualizare.

Nu este foarte greu să scrieți codul JavaScript necesar pentru a efectua aceste operațiuni pe cont propriu. Puteți detecta dacă încărcarea leneră nativă este acceptată cu condiția:

 if ('loading' in HTMLImageElement.prototype)

Dacă este, doar copiați valoarea atributului src din data-src . Dacă nu este, inițializați un script de încărcare leneră la alegere.

Iată un fragment de cod care face asta.

 <!-- 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>

Puteți găsi și testa codul de mai sus în această demonstrație live.

Totuși, acesta este un script de bază, iar lucrurile se pot complica atunci când utilizați atribute sau etichete suplimentare pentru a obține imagini receptive (cum ar fi atributele srcset și sizes sau chiar etichetele picture și source ).

Un mic ajutor de la o terță parte

În ultimii patru ani, am întreținut un script de încărcare leneră open-source numit „ vanilla-lazyload ” și, la câteva zile după ce Addy Osmani a scris despre încărcarea leneră nativă, comunitatea a reacționat întrebându-mă dacă scriptul meu ar putea acționează ca un poliumplutură.

După cum am explicat mai devreme, nu puteți crea o completare polivalentă pentru caracteristica nativă de încărcare leneră, totuși, m-am gândit la o soluție care ar face mai ușor pentru dezvoltatori să înceapă tranziția la încărcare leneră nativă, fără a fi nevoie să scrieți niciun cod JavaScript care Am mai pomenit.

Începând cu versiunea 12 a vanilla-lazyload , puteți seta opțiunea use_native la true pentru a activa încărcarea leneră hibridă. Scriptul are doar 2,0 kB gzipped și este deja disponibil pe GitHub, npm și jsDelivr.

• Faceți cunoștință cu vanilla-lazyload pe GitHub

Demo-uri

Puteți începe să vă jucați cu încărcarea leneră nativă astăzi, descărcând Chrome Canary sau Microsoft Edge Insider ( canal de dezvoltare), apoi activând semnalizatoarele „Activați încărcarea leneră a imaginilor” și „Activați încărcarea leneșă a cadrelor”. Pentru a activa aceste steaguri, introduceți about:flags în câmpul URL al browserului dvs. și căutați „lenes” în caseta de căutare.

Demo nativ de încărcare leneră

Pentru a analiza modul în care funcționează încărcarea nativă lazy în instrumentele pentru dezvoltatori, puteți începe să jucați cu următorul demo. În aceasta, nu este folosită o singură linie de JavaScript . Da, este doar o încărcare leneșă nativă completă.

• Testați demonstrația nativă de încărcare leneră

La ce să vă așteptați : Toate imaginile sunt preluate simultan, dar cu răspunsuri HTTP diferite. Cele cu codul de răspuns 200 sunt imaginile încărcate cu nerăbdare, în timp ce cele cu codul de răspuns 206 sunt preluate doar parțial pentru a obține informațiile inițiale despre imagini. Aceste imagini vor fi apoi preluate complet cu un cod de răspuns de 200 atunci când derulați în jos.

Demo Hibrid Lazy Loading

Pentru a analiza modul în care funcționează încărcarea leneșă hibridă, puteți începe să jucați cu următorul demo. Aici, se folosește use_native [email protected] setată la true :

• Testați demonstrația hibridă de încărcare leneșă

La ce să vă așteptați : Încercați demonstrația pe diferite browsere pentru a vedea cum se comportă. Pe browserele care acceptă încărcare nativă lazy, comportamentul ar fi același ca și în demonstrația nativă lazy loading. Pe browserele care nu acceptă încărcare leneră nativă, imaginile vor fi descărcate pe măsură ce derulați în jos.

Vă rugăm să rețineți că vanilla-lazyload folosește API-ul IntersectionObserver sub capotă, așa că ar trebui să îl completați pe Internet Explorer și versiunile mai puțin recente de Safari. Nu este mare lucru dacă nu este furnizat un polyfill, deoarece în acest caz vanilla-lazyload ar descărca toate imaginile deodată.

Notă : Citiți mai multe în capitolul „To Polyfill sau nu Polyfill” din fișierul readme al lui vanilla-lazyload .

Încearcă Hybrid Lazy Loading pe site-ul tău

Deoarece încărcarea leneră nativă va veni în curând pentru unele browsere, de ce nu îi dați o șansă astăzi folosind încărcarea leneră hibridă? Iată ce trebuie să faci:

Marcaj HTML

Cel mai simplu marcaj de imagine este realizat de două atribute: src și alt .

Pentru imaginile de mai sus, ar trebui să lăsați atributul src și să adăugați atributul loading="eager" .

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

Pentru imaginile de mai jos, ar trebui să înlocuiți atributul src cu atributul de date data-src și să adăugați atributul loading="lazy" .

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

Dacă doriți să utilizați imagini receptive, procedați la fel cu atributele srcset și sizes .

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

Dacă preferați să utilizați eticheta picture , modificați srcset , sizes și src și în etichetele source .

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

Eticheta de picture poate fi folosită și pentru a încărca selectiv formatul WebP pentru imaginile dvs.

Notă : Dacă doriți să aflați mai multe utilizări ale vanilla-lazyload , vă rugăm să citiți secțiunea HTML „Noțiuni introductive” a fișierului său Readme.

Cod JavaScript

În primul rând, trebuie să includeți vanilla-lazyload pe site-ul dvs. web.

Îl puteți încărca de pe un CDN precum jsDelivr:

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

Sau îl puteți instala folosind npm:

 npm install vanilla-lazyload@12

De asemenea, este posibil să utilizați un script async cu inițializare automată; încărcați-l ca modul ES folosind type="module" sau încărcați-l ca AMD folosind RequireJS. Găsiți mai multe modalități de a include și de a utiliza vanilla-lazyload în secțiunea de script „Noțiuni introductive” a fișierului readme.

Apoi, în codul JavaScript al site-ului web/aplicației web, includeți următoarele:

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

Notă : Scriptul are o mulțime de alte setări pe care le puteți utiliza pentru a personaliza comportamentul lui vanilla-lazyload , de exemplu pentru a mări distanța zonei de defilare de la care să începeți încărcarea elementelor sau pentru a încărca elemente numai dacă acestea au rămas în fereastra de vizualizare pentru o perioadă de timp. timp oferit. Găsiți mai multe setări în secțiunea API a fișierului readme.

Toate împreună, folosind un script async

Pentru a pune totul împreună și a utiliza un script async pentru a maximiza performanța, vă rugăm să consultați următorul cod HTML și JavaScript:

 <!-- 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>

Asta e! Cu acești pași foarte simpli și simpli, veți avea activat încărcarea leneșă hibridă pe site-ul dvs. web!

Cele mai bune practici importante

• Aplicați încărcare leneșă numai imaginilor despre care știți că vor fi probabil afișate sub pliul. Încărcați cu nerăbdare cele de deasupra pliului pentru a maximiza performanța. Dacă aplicați doar încărcare leneșă tuturor imaginilor din pagina dvs., veți încetini performanța de redare.
• Utilizați CSS pentru a rezerva spațiu pentru imagini înainte ca acestea să fie încărcate. În acest fel, vor împinge restul conținutului de mai jos. Dacă nu faceți acest lucru, un număr mai mare de imagini va fi plasat deasupra pliului înainte de a trebui, declanșând descărcări imediate pentru ele. Dacă aveți nevoie de un truc CSS pentru a face asta, puteți găsi unul în secțiunea de sfaturi și trucuri din readme vanilla-lazyload .

Argumente pro şi contra

Încheierea

Sunt foarte încântat că încărcarea nativă leneșă vine în browsere și abia aștept ca toți furnizorii de browsere să o implementeze!

Între timp, puteți alege fie să vă îmbogățiți marcajul HTML pentru îmbunătățirea progresivă și să obțineți încărcare leneră nativă numai acolo unde este acceptată, fie puteți opta pentru încărcare leneșă hibridă și să obțineți încărcare leneră atât nativă, cât și bazată pe JavaScript până în ziua în care va apărea încărcarea leneră nativă. să fie acceptat de marea majoritate a browserelor.

Incearca! Nu uitați să vedeți/vizionați vanilla-lazyload pe GitHub și să-mi spuneți părerile voastre în secțiunea de comentarii.

Citiți suplimentare despre SmashingMag:

• Acum mă vezi: cum să amân, să încarci leneș și să acționezi cu IntersectionObserver
• Module JavaScript de încărcare leneră cu ConditionerJS
• Lista de verificare a performanței front-end 2019 (PDF, pagini Apple, MS Word)
• Cum îmbunătățirea performanței site-ului poate ajuta la salvarea planetei