Cum să Încărcați Imagini Lazy Loading pe WordPress

Cuprins: arată

Nimănui nu-i place un site WordPress lent. Cu toate acestea, imaginile sunt cel mai popular format media de pe web. Acestea sunt una dintre cele mai grele resurse încărcate de majoritatea site-urilor web și ocupă mai multă lățime de bandă decât orice alt activ. Ca urmare, timpii de încărcare lentă a paginii reprezintă o problemă pentru multe site-uri WordPress.

Acesta este motivul pentru care optimizarea imaginilor pe WordPress este crucială. Cu toate acestea, există o limită pentru cât de mult le puteți optimiza. Dacă aveți prea multe imagini pe pagina dvs. web, atunci există mari șanse ca vizitatorii dvs. să iasă chiar înainte de încărcarea paginii.

Iată de ce lazy loading a imaginilor este un pas esențial pentru ca site-ul dvs. WordPress să se încarce mai repede. Cu lazy loading, puteți încărca imagini numai atunci când un utilizator derulează în jos la imaginea specifică. Forțând să se încarce imaginile de sub pliu numai atunci când utilizatorul derulează în jos, lazy loading este o soluție ușoară pentru a reduce Calea de redare critică fără a afecta experiența utilizatorului.

În această postare, veți afla cum să activați și să dezactivați imagini lazy loading pentru imagini și videoclipuri pe site-ul dvs. WordPress. De asemenea, veți înțelege ce este încărcarea nativă WordPress lazy și cum funcționează. Lazy loading nu va mai avea secrete pentru tine!

Ce este Lazy Loading și Cum Funcționează

Lazy loading a imaginilor înseamnă încărcarea imaginilor pe site-ul dvs. WordPress în mod asincron. Cu alte cuvinte, încărcarea imaginilor și a altor conținuturi pe pagina dvs. web în momente diferite.

Pe scurt, iată cum funcționează lazy loading: atunci când cineva vă vizitează site-ul, imaginile se vor încărca deasupra pliantei, dar imaginile rămase de pe pagină se vor descărca numai când vor fi vizualizate pe ecranul utilizatorului. Cu alte cuvinte, lazy loading înseamnă amânarea imaginilor de pe ecran.

O mulțime de site-uri web cu imagini mari folosesc această tehnică. Pe măsură ce derulați pagina, veți vedea imagini substituente care se umplu rapid cu imagini reale.

Un exemplu excelent este Medium, popularul site de blogging.

După cum puteți vedea din imaginea de mai sus, Medium afișează o imagine de înlocuire neclară până când imaginea reală de înaltă rezoluție se încarcă complet. Prin urmare, vizitatorii știu că apare o imagine.

Lazy Loading pe Mobil

Lazy loading funcționează și pe mobil, așa cum funcționează și pe desktop – și același lucru este valabil pentru modul în care Lazy loading ar trebui implementat.

Mai mult, lazy loading pe mobil oferă utilizatorilor un avantaj mai mare, deoarece nu trebuie să consume date mobile pentru încărcarea imaginilor pe care nu derulează.

Rețineți că AMP pentru imagini nu funcționează la fel. Amp-img folosește JavaScript pentru a gestiona lazy loading ca o alternativă la imaginea principală dacă JS este dezactivat.

Ce este Native Image Lazy Loading?

Lazy loading nativă este tehnologia inovatoare care permite browserelor Chrome compatibile (începând de la Chrome 76) să gestioneze singure lazy loading fără a utiliza ajutorul JavaScript. Cu alte cuvinte, browserul va încărca automat lazy o imagine care are un marcaj specific „loading = lazy”. Mai multe detalii despre atributul „loading” puțin mai târziu în articol.

Acesta este, fără îndoială, un avantaj pentru performanța web, deoarece toate site-urile vizitate din versiuni Chrome compatibile vor beneficia automat de lazy loading.

Cum Funcționează Lazy Loading a Imaginii Native: Atributul de „loading” în HTML5

După introducerea atributului HTML de încărcare pentru etichetele <img> și <iframe>, Lazy Loading a devenit acum un standard web. Vă oferă control asupra momentului în care un browser ar trebui să înceapă încărcarea imaginilor și a elementelor iframe.

Iată un exemplu al atributului de lazy load de inclus în cod:

<img src=”comunitatea-wordpress-este-super.jpg” loading=”lazy” alt=”Comunitatea WordPress” />

<iframe src=”WP-Cache-Basics.html” loading=”lazy”></iframe>

Puteți vizualiza demo-ul complet prezentat mai sus și puteți vedea singur cum gestionează atributul de încărcare o pagină cu 100 de imagini.

Atributul HTML de încărcare acceptă următoarele trei valori:

lazy: diferă încărcarea imaginii sau a elementelor iframe până când îndeplinește anumite condiții. Aceste condiții pot varia în funcție de mai mulți factori, cum ar fi formatul imaginii, browserul și puterea conexiunii la rețea.
eager: încarcă resursele imediat, indiferent de locul în care se află pe pagina web.
auto: dacă nu specificați nicio valoare, atunci valoarea implicită a atributului de încărcare este automată, ceea ce lasă browserul să decidă comportamentul implicit de lazy loading.

Notă:
Atributul de încărcare acceptă doar etichetele <img> și <iframe> începând de acum. De exemplu, nu îl puteți folosi pentru lazy-load imagini de fundal CSS.

4 Avantaje pentru Lazy Loading a Imaginii Native

Există mai multe avantaje ale utilizării lazy loading native pe imagini:

Plasarea în asistență nativă pentru lazy loading a imaginilor va face foarte ușor să îmbunătățiți performanța site-ului.
Nu trebuie să instalați biblioteci JS externe, cum ar fi jQuery, pentru a activa funcționalitatea de lazy loading pe site-ul dvs. Cu cât site-ul dvs. încarcă mai puține resurse terțe, cu atât va funcționa mai bine.
Făcând funcționalitatea de lazy loading ca parte a standardului HTML, vă veți asigura că funcționează impecabil în toate browserele majore.
Economii de date îmbunătățite și costuri de lățime de bandă pentru utilizatori și proprietari de site-uri web.

Suport și Compatibilitate Browser Pentru Native Lazy Loading

Potrivit Can I use, atributul de încărcare este acceptat de browsere utilizate de peste 72% din audiența globală pe internet. În special, lazy loading nativă este acceptată de Google Chrome și Opera. Cu Chrome 77, Google a implementat posibilitatea de a utiliza noul atribut de încărcare pentru a încărca resurse lazy.

În prezent, cele două blocări majore sunt browserele Safari și iOS Safari, ambele fiind utilizate de peste 15% din utilizatorii online.

Browserele care nu acceptă atributul de încărcare nu vor vedea niciun avantaj al lazy loading, dar includerea atributului de loading= lazy în codul dvs. nu va avea niciun impact negativ asupra performanței site-ului dvs.

Notă:
Puteți activa atributul de încărcare manual în browserele Safari și iOS Safari din meniul Avansat> Caracteristici experimentale.

Native Image Lazy Loading în WordPress 5.5

Introducerea API-ului nativ de lazy loading în WordPress Core a fost o dezbatere continuă în rândul colaboratorilor WordPress de mulți ani. Cu toate acestea, fără un standard adecvat în vigoare atunci, nu a fost un proces simplu.

Introducerea atributului de încărcare HTML nativ și eventualul suport al acestuia de către browsere importante au schimbat acest lucru. Câteva luni mai târziu, echipa de dezvoltare a WordPress a anunțat imagini native de lazy loading în WordPress 5.5.

Cum este Implementată Lazy Loading pe WordPress

WordPress 5.5 va adăuga perechea atribut-valoare loading=”lazy” la fiecare imagine cu atribute de lățime și înălțime specificate deja. Această condiție este inclusă pentru a evita Cumulative Layout Shift (CLS). Este momentul în care aspectul paginii web se schimbă brusc, creând o experiență de utilizator deranjantă.

Google evaluează site-urile web pe baza scorului lor CLS. Cei care se clasează slab sunt penalizați de Google în clasamentul rezultatelor căutării. Deoarece includerea atributelor de lățime și înălțime pe imagini poate ajuta la eliminarea schimbărilor de aspect, este o condiție bună să le aveți.

Din punct de vedere tehnic, caracteristica nativă de încărcare a imaginii lazy WordPress funcționează similar cu modul în care gestionează deja imaginile receptive prin adăugarea atributelor srcset și dimensiuni.

În plus față de cele de mai sus, WordPress va umple din nou toate etichetele img cu atribute de lățime și înălțime dacă nu sunt deja prezente. S-a făcut pentru a vă asigura că toate imaginile de pe site-ul dvs. beneficiază de lazy loading. De asemenea, echipa de bază face presiuni pentru o nouă funcție care să forțeze toate imaginile să aibă atribute de lățime și înălțime.

În mod implicit, WordPress adaugă atributul de loading = „lazy” la toate etichetele de imagine din ieșirea următoarelor funcții sau hooks:

the_content (): imagini din conținutul postării.
the_excerpt (): Imagini din extrase postate.
widget_text_content: imagini în widgeturi text.
get_avatar (): imagini avatar.
wp_get_attachment_image (): Imagini adăugate ca atașament pe WordPress. Sunt numite și imagini șablon.

Fiecare dintre rezultatele acestor funcții duce la un „context” specific în cadrul WordPress. Veți afla importanța acestor cinci contexte în secțiunea următoare.

WordPress a adăugat un set de noi funcții de bază pentru a facilita această tranziție în resursele serverului dvs. Mai jos este o listă a tuturor cu o scurtă descriere a ceea ce fac:

wp_filter_content_tags (): modifică etichetele HTML din conținutul postării pentru a include atribute noi. De exemplu, modifică etichetele img apelând următoarele trei funcții, dacă este necesar. Funcții similare pot fi adăugate ulterior și pentru optimizarea altor elemente HTML.
wp_img_tag_add_width_and_height_attr (): adaugă atribute de lățime și înălțime etichetelor img care nu le au.
wp_img_tag_add_srcset_and_sizes_attr (): Adaugă atributele srcset și size la etichetele img
wp_img_tag_add_loading_attr (): Adaugă atributul de încărcare la etichetele img.

Personalizarea Native Image Lazy Loading pe WordPress

Puteți personaliza comportamentul implicit al lazy loading a imaginilor native pe WordPress prin diferite filtre:

Cel mai important dintre ele este filtrul wp_lazy_loading_enabled care acceptă trei parametri pentru personalizări: $default, $tag_name și $context. Puteți să vă conectați la acest filtru și să dezactivați lazy loading pentru toate imaginile șablon. Dacă doriți să aflați mai multe despre dezactivarea lazy loading, accesați secțiunea dedicată!
Un alt filtru nou numit wp_img_tag_add_loading_attr poate fi conectat pentru a modifica imaginile în contexte legate de conținut, cum ar the_content, the_excerpt și
Pentru contextele care produc imagini pur (de exemplu, wp_get_attachment_image () ), puteți schimba $attr său direct folosind PHP.

Notă:
Echipa de bază WordPress a publicat câteva exemple de personalizare cu lazy loading pentru a vă ajuta să vă familiarizați cu toate caracteristicile sale. Dacă sunteți un dezvoltator de teme sau plugin-uri WordPress, vă recomandăm cu tărie să le studiați.

De acum, WordPress acceptă funcționalitatea nativă de lazy-loading numai pentru imagini. Dar, în viitor, îl pot extinde la alte elemente HTML (de exemplu, iframe).

De ce WordPress 5.5 Lazy Load nu Funcționează?

Dacă WordPress Lazy Load nu funcționează, probabil că imaginile pe care doriți să le încărcați lazy sunt imagini de fundal. Imaginile de fundal nu au etichetele <img> sau <iframe> – singurele etichete pe care WordPress le încarcă lazy.

De asemenea, ar trebui să rețineți că încărcătura nativă Lazy load are un prag. Imaginile peste acest prag vor fi încărcate. Imaginile de deasupra pragului nu vor fi lazy-loaded, chiar dacă lazy loading din punct de vedere tehnic funcționează.

Dacă utilizați WP Rocket și imaginile dvs. nu sunt lazy, este pentru că:

Imaginile sunt adăugate într-o foaie de stil.
Imaginile sunt adăugate dinamic cu un script.
Imaginile conțin unul dintre atributele excluse, cum ar fi data-src și data-no-lazy (lista este destul de lungă).

Puteți citi mai multe despre motivul pentru care unele imagini nu sunt lazy-loaded cu WP Rocket în resursa dedicată.

Cum se Activează Lazy Load pe Imagini și Videoclipuri în WordPress

Există multe opțiuni pentru a adăuga lazy loading pe site-ul dvs. Puteți consulta lista cu cele mai bune pluginuri de lazy loading pentru WordPress.

Dar, de departe, cel mai simplu mod de a adăuga lazy loading pe site-ul dvs. este cu WP Rocket. Activarea durează mai puțin de un minut.

Compatibilitate cu WP Rocket LazyLoad

WP Rocket vine cu implementarea sa de lazy loading a imaginii numită LazyLoad.

WP Rocket dezactivează automat lazy loading a imaginii native WordPress când LazyLoad este activ pentru a evita orice potențial conflict.

Puteți activa LazyLoad ușor accesând Setări> WP Rocket> Panoul media din tabloul de bord al administratorului WordPress. În secțiunea LazyLoad din partea de sus a paginii, faceți clic pe „Activați pentru imagini”, apoi pe „Salvați modificările”. Asta este tot ce trebuie să faceți. Acum, site-ul dvs. va încărca lazy imagini pentru vizitatori.

Ca și în cazul oricărei actualizări sau modificări ale site-ului dvs., este important să fiți conștienți de orice conflict. Deci, dacă observați că activarea lazy loading a distrus orice pe site-ul dvs., consultați această listă de probleme obișnuite cu lazy loading.

Funcția de lazy loading va fi exclusă din imaginile adăugate de pluginuri precum Revolution Slider și Envira Gallery, care pot cauza conflicte. Iată lista completă a pluginurilor compatibile.

Spre deosebire de implementarea nativă WordPress, LazyLoad permite lazy loading pentru alte elemente HTML, cum ar fi iframe și videoclipuri. De asemenea, va încărca lazy imaginile de fundal dacă sunt aplicate în linie pentru anumite elemente HTML.

Puteți dezactiva opțiunea LazyLoad în WP Rocket dacă doriți să utilizați imaginea nativă a WordPress lazy-loading. Cu toate acestea, unele browsere nu acceptă încă noul atribut de loading. În plus, WordPress își concentrează implementarea doar pe imagini. Dacă site-ul dvs. web include multe imagini, videoclipuri și încorporări, LazyLoad de la WP Rocket este în continuare cea mai bună opțiune generală.

Cum se Activează Native Lazy Loading cu WP Rocket

Chiar dacă WP Rocket nu include compatibilitatea automată cu browserele Chrome care utilizează încărcarea nativă lazy, puteți alege suportul pentru încărcarea nativă lazy a Chrome: o puteți activa printr-un plugin de asistență.

Cu acest plugin de asistență, vă puteți asigura că:

Toate imaginile dvs. vor avea marcajul HTML necesar pentru a profita de încărcarea nativă lazy;
Browserele Chrome compatibile vor utiliza automat încărcarea nativă lazy;
Toate celelalte vor folosi automat LazyLoad de la WP Rocket.

Puteți să vă bucurați în continuare de sistemul puternic LazyLoad sau să decideți să mergeți cu lazy loading nativă a Chrome.

Depinde de tine! Testați ambele soluții pe site-ul dvs. și decideți ce este cel mai bun pentru dvs.

Cum să Lazy Load Imagini de Fundal pe WordPress

După cum s-a explicat mai sus, imaginile de fundal pot fi motivul pentru care lazy load nu funcționează.

Cel mai simplu mod de a încărca lazy imaginile de fundal este să folosiți un plugin precum WP Rocket.

WP Rocket acceptă lazy load a imaginilor de fundal atâta timp cât stilul de fundal este inclus în linie în HTML pentru următoarele elemente:

Div
Span
Section
Li
Figure
a

Iată un exemplu de markup compatibil:

<div style=”background-image: url(image.jpg)”>

Puteți citi mai multe despre lazy loading a imaginilor de fundal cu WP Rocket în documentația tehnică.

Dacă utilizați în mod specific Elementor, puteți încerca pluginul Lazy Load Elementor Background Images.

Lazy Load Pentru WooCommerce

Lazy Load pentru WooCommerce funcționează la fel ca orice alt Lazy Load. Atâta timp cât aplicați Lazy Load, așa cum s-a explicat mai sus, imaginile sau videoclipurile produsului dvs. WooCommerce vor fi lazy loading. Puteți activa și dezactiva cu ușurință lazy loading urmând informațiile incluse în acest articol.

Din acest motiv, ar trebui să rețineți că orice lucru peste prag nu va fi lazy.

Cum să Redați Videoclipuri Lazy Load pe WordPress

Dacă doriți lazy load pentru videoclipurile de pe site-ul dvs. WordPress, puteți utiliza un plugin precum Velocity sau Lazy Load for Videos. Rețineți că aceste pluginuri pot încărca lazy videoclipuri găzduite pe YouTube și Vimeo.

Dacă doriți să încărcați lazy videoclipuri MP4, puteți încărca lazy utilizând atributele „preload” și „poster”. Puteți afla mai multe despre articolul dedicat Google.

Cum se Dezactivează Lazy Loading în WordPress

Funcția de lazy loading a WP Rocket are mai multe decât doar activarea și dezactivarea acesteia. Pluginul include opțiuni pentru eliminarea lazy loading pentru anumite postări și imagini și aplicarea manuală a lazy loading asupra anumitor imagini.

De exemplu, această opțiune poate fi utilă pentru a dezactiva lazy loading pe o anumită imagine de deasupra pliantei și pentru a îmbunătăți gradul Largest Contentful Paint.

Mai mult, cu un anumit cod, puteți personaliza suplimentar pluginul pentru a adăuga un efect de fade-in la imaginile dvs. de lazy loading.

Hai să aruncăm o privire.

Dezactivarea LazyLoad pe Anumite Postări și Pagini

Ai o postare sau o pagină pe care nu vrei să folosești lazy loading? Indiferent de motiv, este ușor să o opriți.

Pentru a dezactiva lazy loading pe o anumită postare sau pagină, deschideți postarea sau pagina și în caseta meta „Opțiuni cache”, debifați opțiunea „LazyLoad for images”. Nu uitați să publicați sau să actualizați postarea sau pagina pentru a salva modificările.

Dacă opțiunile „LazyLoad for images” sunt în gri, trebuie să o activați la nivel global în setările WP Rocket (Setări> WP Rocket> Basic)

Dezactivarea Lazy Load prin Cod

Dacă doriți mai mult control asupra modului în care funcționează lazy loading pe site-ul dvs., vă puteți conecta la WP Rocket cu cod. În timp ce lipirea fragmentelor de cod în fișierul functions.php al unei teme este o modalitate ușoară de a personaliza o temă, este și o practică proastă. Dezvoltatorii WP Rocket recomandă crearea unui plugin MU personalizat. Este ușor – puteți citi mai multe despre asta aici.

După ce ați configurat pluginul MU, puteți insera oricare dintre următoarele fragmente de cod.

Dezactivarea Lazy Load pe Toate Paginile

Acest fragment este util dacă doriți lazy load pentru imagini în postările dvs., dar nu și pagini.

add_filter( ‘wp’, ‘__deactivate_rocket_lazyload_if_page’ );

function __deactivate_rocket_lazyload_if_page() {

    if ( is_page() ) {

        add_filter( ‘do_rocket_lazyload’, ‘__return_false’ );

    }

}

Dezactivarea Lazy Load pe Pagina Principală

Acest fragment va dezactiva lazy loading pentru prima pagină a site-ului dvs. (pagina pe care ați setat-o în Setări> Citire> Prima pagină).

add_filter( ‘wp’, ‘__deactivate_rocket_lazyload_if_page’ );

function __deactivate_rocket_lazyload_if_page() {

if ( is_front_page() ) {

add_filter( ‘do_rocket_lazyload’, ‘__return_false’ );

}

}

Dezactivarea Lazy Load pe Pagina Blog

Acest fragment va dezactiva lazy loading pentru pagina pe care ați setat-o ca pagină de pornire a blogului (pagina pe care ați setat-o și în Setări> Citire> Prima pagină).

add_filter( ‘wp’, ‘__deactivate_rocket_lazyload_if_page’ );

function __deactivate_rocket_lazyload_if_page() {

if ( is_home() ) {

add_filter( ‘do_rocket_lazyload’, ‘__return_false’ );

}

}

Dezactivarea Lazy Load pentru Postările Individuale

Dacă doriți să dezactivați lazy loading pentru toate postările individuale, dar păstrați-o activată pentru pagini și pagina de start a blogului, utilizați acest fragment:

add_filter( ‘wp’, ‘__deactivate_rocket_lazyload_if_page’ );

function __deactivate_rocket_lazyload_if_page() {

if ( is_single() ) {

add_filter( ‘do_rocket_lazyload’, ‘__return_false’ );

}

}

Dezactivarea LazyLoad pe Anumite Imagini

Puteți dezactiva lazy loading pe anumite imagini cu atributul date-no-lazy:

<img src=”my-image.jpg”

data-no-lazy=”1″

alt=”” width=”100″ height=”100″ />

Fade In Effect pentru Lazy Loading a Imaginilor

Când folosiți imagini LazyLoad, poate fi un pic deranjant pentru vizitatori atunci când imaginile dvs. apar brusc de nicăieri pe pagină. Din fericire, cu unele efecte subtile, puteți oferi o experiență de utilizare mai plăcută.

Decolorarea în imagini este un efect popular de asociat cu lazy loading. Următorul fragment CSS va adăuga un efect de fade-in pe site-ul dvs. Lipiți simplu codul în style.css (nu uitați să creați mai întâi o temă pentru copii!):

/* Image with ‘data’ attribute is hidden */

img[data-lazy-src] {

/* we set the opacity to 0 */

opacity: 0;

}

/*Image without ‘data’ attribute is (or becomes) visible */

img.lazyloaded {

/* prepare the future animation */

-webkit-transition: opacity .5s linear 0.2s;

  -moz-transition: opacity .5s linear 0.2s;

        transition: opacity .5s linear 0.2s;

/* we set the opacity to 1 to do the magic */

opacity: 1;

}

Acest fragment va funcționa numai dacă browserul vizitatorului acceptă proprietăți de tranziție CSS3. În caz contrar, codul nu va face nimic.

Începeți să Folosiți Lazy Loading pe Imagini Chiar Acum!

Acum cunoașteți cele mai relevante informații despre lazy loading a imaginilor pentru WordPress (inclusiv lazy loading nativă). De asemenea, înțelegeți cum și de ce este esențial să aplicați această tehnică puternică de optimizare a performanței web pentru a spori viteza site-ului dvs.

WP Rocket este cel mai simplu mod de a vă încărca lazy load imaginile și videoclipurile fără niciun efort. Economisiți timp și lăsați-l pe WP Rocket să facă treaba pentru dvs.!

Puteți oricând să vă bazați pe garanția lor de rambursare de 100%. Deși nu credem că veți dori vreodată una, vă vor oferi cu plăcere o rambursare dacă o solicitați în termen de 14 zile de la cumpărare.

Singurul risc pe care îl veți lua cu pluginul lor este accelerarea site-ului dvs. web. WP Rocket aplică automat 80% din cele mai bune practici de performanță web, sporind instantaneu scorul dvs. PageSpeed Insights!

Cum să Încărcați Imagini Lazy Loading pe WordPress (+ Ce este Native Lazy Loading)