Lazy Loading

Ce este Lazy Loading?

Mai exact, lazy loading este o tehnică, un pattern de design de programare aplicat site-urilor web, în care elementele și resursele nu sunt încărcate în întregime, ci mai degrabă executate din mers sau la cerere în funcție de utilizarea utilizatorului, producând o „încărcare amânată" a conținutului.

În acest fel, resursele sunt optimizate, iar conținutul precum text, video-uri, imagini și alte materiale se încarcă doar când este necesar, îmbunătățind viteza, utilizarea memoriei și procesarea, reactivitatea și timpii de încărcare. Aceasta stă în contrast cu încărcarea completă, unde un site sau o pagină este încărcat(ă) complet, chiar dacă utilizatorul nu folosește fiecare element.

Avantajele generale ale lazy loading

Deoarece scopul principal al lazy loading este de a optimiza încărcarea elementelor doar când sunt folosite, există multiple avantaje care pot fi rezumate astfel:

• ›Viteză în afișarea elementelor principale ale unui site.
• ›Îmbunătățire semnificativă a experienței utilizatorului pe site (UX).
• ›Performanță îmbunătățită pe dispozitivele mobile, în special când acestea au resurse limitate de conexiune la rețea; având Lazy Loading activ, va permite navigarea pe pagini care, în astfel de condiții de acoperire slabă, ar fi altfel imposibile.
• ›Optimizarea generală și totală a resurselor precum CPU, RAM și baterie pe dispozitivele mobile.
• ›Creșterea timpului de ședere pe paginile noastre, prin faptul că nu are probleme de încărcare, se traduce indirect în îmbunătățiri ale clasării.
• ›Scăderea ratei de respingere.

În mod similar, abordarea de programare lazy loading are avantaje și noutăți dintr-un punct de vedere mai tehnic, precum:

• ›Lazy loading este pe deplin compatibil cu framework-uri JS precum React și Angular, precum și cu platforme CMS precum WordPress. De fapt, s-a raportat recent că lazy loading pentru imagini va fi inclus implicit în versiunea 5.5 a WordPress.
• ›Datorită API-ului IntersectionObserver, nu ascunde imaginile de motoarele de căutare.
• ›Suport pentru mai multe tipuri de conținut precum imagini și resurse de clasă responsive.
• ›Permite indexarea imaginilor site-ului, ceea ce este vital pentru SEO.
• ›Este o resursă 100% SEO Friendly, deoarece îmbunătățește direct și indirect multe puncte cheie în SEO.

Cum să implementezi lazy loading în WordPress?

Dacă avem site-ul pe WordPress, ar trebui să știm că avem un mare avantaj deoarece există multe soluții pentru implementarea lazy loading pe paginile noastre astfel încât să se încarce mult mai rapid. Această captură de ecran de mai jos arată câteva dintre soluțiile posibile pe care le avem în repozitoriul de plugin-uri:

Vedere a celor mai proeminente plugin-uri WordPress pentru implementarea lazy loading.

Pentru a realiza această implementare, avem mai multe opțiuni:

• ›Alege un plugin specific de lazy loading precum „Lazy loader", „a3 lazy load"...
• ›Alege un plugin de optimizare web precum „WP Rocket", care are deja această opțiune inclusă implicit împreună cu alte îmbunătățiri.

Aspecte SEO legate de Lazy Loading

Cunoaștem deja misiunea principală a încărcării amânate și avantajele sale cheie, precum și cum afectează îmbunătățirea performanței paginii noastre, a UX-ului nostru și a SEO-ului.

Acum, trebuie făcută o utilizare inteligentă a încărcării amânate pentru a profita la maximum de ea, deoarece dacă este folosită necorespunzător ar putea cauza efectul opus.

De exemplu, lazy loading folosește cache-ul pentru a îmbunătăți viteza, așa că dacă prea mult conținut este stocat acolo, pot apărea încetiniri sau erori dacă nu este implementat corect, împiedicând chiar Google să indexeze pagini și elemente, ceea ce poate avea un efect serios asupra clasării site-ului. Câteva sfaturi sunt:

• ›Optimizează cache-ul și fă o utilizare inteligentă a lui.
• ›Folosește Google Search Console pentru a verifica conținutul pe care Google îl crawlează pe site.
• ›Adaugă text ALT pentru a face fiecare imagine indexabilă de către Google.
• ›Folosește întotdeauna API-ul IntersectionObserver.
• ›Adaugă atributul loading la conținutul iframe sau încorporat din alte pagini sau surse, datorită funcției Blink LazyLoad a browserului Chrome. Se aplică imaginilor, pozelor, video-urilor, textului și altui conținut.

Lazy loading și UX

Atunci când vine vorba de un site web, atât optimizarea tehnică, cât și cea generală pentru a oferi o bună experiență a utilizatorului (UX) este esențială, cu privire la timpii de încărcare, reactivitate, utilizarea resurselor și comportamentul general. Dacă un site nu este foarte reactiv, rata sa de respingere va fi mare, iar dacă oferă o experiență slabă a utilizatorului, acest lucru va afecta traficul său, vizibilitatea și chiar SEO-ul.

Cu încărcarea amânată, scopul este de a îmbunătăți dramatic UX-ul unui site într-un singur pas, prin încărcarea conținutului său progresiv și atunci când utilizatorul îl necesită pe măsură ce derulează pagina, fie că sunt imagini sau text, ceea ce optimizează utilizarea resurselor comparativ cu încărcarea întregii platforme, probabil afișând elemente care nu sunt importante pentru utilizator.

Lazy loading nativ (HTML) în Chrome

Demonstrând importanța pe care Google o acordă UX-ului, din 2020 și începând cu versiunea 75 a browserului său Chrome, este posibil să adaugi lazy loading nativ la etichetele HTML ale paginii și la conținutul lor multimedia precum poze, video-uri, printre altele.

În acest fel, prin adăugarea automată a atributului HTML de lazy loading, browserul Chrome înțelege că conținutul paginii se va încărca în funcție de navigarea utilizatorului și nu tot deodată, îmbunătățind viteza și reactivitatea. Pentru a-l folosi, atributul loading cu valoarea lazy este adăugat la fiecare etichetă a resurselor vizuale și multimedia, precum și la iframe-uri:

<img src="image.jpg" loading="lazy" alt="..." />

<iframe src="video-player.html" loading="lazy"></iframe> Această resursă poate fi folosită atât la imagini, care reprezintă o mare parte din informația pe care browserul trebuie să o descarce, cât și la iframe-uri; nu uita că le folosim pentru a încorpora resurse externe în site-ul nostru.

Este important de evidențiat utilizarea la iframe-uri, deoarece acestea pot reprezenta puncte critice de încărcare pe site-ul nostru.

Ca dezavantaj, lazy loading nativ este compatibil doar cu Chrome, deși utilizarea sa poate fi implementată în alte browsere prin biblioteci compatibile, în cazul în care nu există suport așa cum se întâmplă în Mozilla Firefox.

Utilizări ale Lazy loading

După cum am comentat deja, lazy loading se concentrează pe amânarea încărcării elementelor de pe o pagină pentru a-i optimiza răspunsul. În acest sens, utilizarea dată instrumentului se concentrează pe toate resursele vizuale, deși accentul se pune pe imagini, video-uri și iframe-uri care pot include documente și alte fișiere, toate prin modificarea etichetelor și includerea atributului loading cu valoarea lazy, optimizând viteza generală a site-ului chiar dacă are elemente grele sau conținut multimedia mare.

Ai întrebări despre lazy loading sau vrei să îl implementezi în proiectul tău? Suntem la dispoziția ta!

Documentație și referințe:

• ›Lazy loading pentru imagini
• ›Lazy loading pentru video-uri
• ›Lazy loading nativ