Cum să Amânați Imaginile în Afara Ecranului
Căutați o modalitate simplă și ușoară să amânați imaginile în afara ecranului de pe site-ul dvs.? Continuați să citiți! Veți învăța tot ce ar trebui să știți pentru a aborda recomandarea PageSpeed Insights.
„Amânarea imaginilor în afara ecranului” este una dintre recomandările PageSpeed Insights incluse în secțiunea Oportunități a auditului de performanță.
Google recomandă să „Luați în considerare lazy loading în afara ecranului și a imaginilor ascunse după ce toate resursele esențiale s-au terminat de încărcat pentru a reduce time to interactive”.
Dacă nu sunteți sigur ce înseamnă, și mai important, dacă vă întrebați cum să remediați problema pe site-ul dvs. WordPress, continuați să citiți acest articol până la sfârșit!
Veți afla ce înseamnă recomandarea PSI și cum să amânați imaginile în afara ecranului și să îmbunătățiți performanța site-ului dvs.
Ce Înseamnă Defer Offscreen Images
Să începem cu a explica ce este pliul. Pliul este partea de ecran pe care o vedeți imediat ce ajungeți pe o pagină. Nu trebuie să derulați în jos sau să faceți altceva – este pur și simplu primul conținut pe care îl vedeți. Deoarece această parte este chiar în partea de sus a paginii, este numită deasupra pliului. Este cea mai importantă parte a paginii și prima pe care browserul trebuie să o redea pentru a începe să interacționeze cu conținutul.
Pe de altă parte, tot conținutul vizibil numai după derulare în jos este denumit sub fold. După cum vă puteți imagina, este mai puțin relevant atunci când vine vorba de încărcarea unei pagini.
De aceea, cea mai bună practică de performanță web este să încărcați conținutul de sub fold numai când redarea paginii s-a încheiat. Înainte de acel moment, browserul va încărca numai conținutul deasupra pliului. Ca urmare, timpul de încărcare va fi mai rapid, iar interactivitatea paginii va fi mai bună.
Acum este mai ușor să înțelegeți despre ce este vorba în auditul PageSpeed Insights. Amânarea imaginilor în afara ecranului înseamnă încărcarea imaginilor de sub fold (offscreen) numai după ce resursele critice de deasupra foldului au fost încărcate complet.
De Ce ar Trebui Să Amânați Imaginile în Afara Ecranului
Când browserul trebuie să descarce și să randeze resurse ne-critice, cum ar fi imaginile de sub pliu, încărcarea paginii durează mai mult, iar utilizatorii nu pot interacționa cu pagina la fel de repede cum se așteptau.
Amânarea imaginilor în afara ecranului poate îmbunătăți performanța site-ului dvs. WordPress și valorile esențiale de performanță, cum ar fi First Input Delay și timpul general de încărcare.
First Input Delay (FID) este una dintre valorile principale ale Core Web Vitals și măsoară capacitatea de răspuns și interactivitatea paginii. Începând de la jumătatea lunii iunie 2021, Core Web Vitals va face parte dintr-un nou factor de clasare, Google Page Experience Update 2021.
Pe lângă îmbunătățirea First Input Delay pentru a oferi o experiență mai bună pentru utilizator, ar trebui să țineți cont și de potențialul impact SEO al FID.
Deoarece FID poate fi măsurat doar ca date de câmp – cu interacțiunea reală a utilizatorului – există o altă măsură pe care ar trebui să o luați în considerare: Total Blocking Time. TBT este strâns legat de FID și măsoară intrarea utilizatorului pe baza datelor de laborator. Este una dintre cele mai relevante valori ale Lighthouse, deoarece ponderea sa este de 25% din scorul general de performanță Lighthouse. Atunci este esențial să amânați imaginile în afara ecranului pentru a îmbunătăți și nota generală a PageSpeed.
Nu în ultimul rând, nu uitați de timpul de încărcare! Chiar dacă nu este strâns legat de performanța SEO sau de un anumit scor, timpul de încărcare poate face o diferență semnificativă atunci când vine vorba de a oferi o experiență excelentă pentru utilizator și de a le permite utilizatorilor să convertească.
Cum să Găsiți Imaginile Care ar Trebui Amânate în Afara Ecranului
Găsirea imaginilor în afara ecranului de amânat este destul de simplă. După ce rulați un test cu PageSpeed Insights, accesați secțiunea Diagnosticare și căutați auditul Defer Offscreen Images.
PSI va semnaliza imaginile care nu sunt amânate – ceea ce este bun pentru depanare atunci când nu toate imaginile sunt încărcate leneș (veți citi mai multe despre încărcarea leneșă în secțiunea următoare).
Când testați performanța adresei URL, puteți întâlni două scenarii.
Dacă există o problemă, probabil veți obține ceva similar cu exemplul de mai jos. Veți vedea un avertisment cu roșu și o listă de imagini pe care ar trebui să le amânați.
Pe de altă parte, dacă Lighthouse nu detectează probleme legate de imaginile în afara ecranului, veți vedea auditul în secțiunea „Audituri trecute”:
Cum să Amânați Imaginile în Afara Ecranului pe WordPress
Odată ce ați identificat imaginile de amânat, sunteți gata să mergeți mai departe și să finalizați treaba.
Primul lucru de reținut este că cel mai bine este să amânați toate imaginile care se află sub pliu.
Opțiunea de Lazy Loading ( încărcare leneșă )
Principala modalitate de a amâna imaginile este lazy loading. Datorită lazy loading, toate imaginile de deasupra pliului nu vor fi încărcate până când utilizatorul derulează în jos pe pagină.
Deoarece browserul nu va lua în considerare niciuna dintre aceste imagini în timpul redării, pagina se va încărca destul de repede, iar valorile precum First Input Delay vor obține un scor bun. În plus, veți aborda recomandarea PageSpeed Insights.
Ar Trebui să Încarci Leneș Toate Imaginile?
În timp ce ar trebui să încărcați leneș toate imaginile de sub fold, ar trebui să excludeți întotdeauna imaginile de deasupra foldului de la lazy loading.
Riscul este de a crește Largest Contentful Paint, care măsoară cât timp este nevoie pentru ca cel mai mare element să devină vizibil în fereastra de vizualizare. Dacă elementul LCP este o imagine – așa cum este adesea cazul – va dura mai mult pentru încărcare din cauza încărcării leneșe. Ca urmare, scorul LCP se va înrăutăți.
Alte Opțiuni Pentru Amânarea Imaginilor în Afara Ecranului
Pentru dispozitive mobile, puteți amâna și imaginile în afara ecranului prin AMP. Mark-upul AMP <amp-img> va încărca automat imaginile lazy.
Dacă unele imagini sunt adăugate dinamic cu JavaScript, întârzierea sau amânarea JavaScript ar întârzia și imaginile. În mod similar, dacă unele imagini de sub pliu sunt adăugate cu foaia de stil CSS, puteți optimiza livrarea CSS și le puteți amâna.
Cu toate acestea, lazy loading este cea mai ușoară cale.
Cum Să Amânați Manual (Lazy Load) Imaginile în Afara Ecranului Fără Pluginuri
Puteți amâna manual imaginile în afara ecranului prin lazy loading utilizând atributul <img loading=”lazy”>.
Iată un exemplu:
<img src=”exemplu.png” loading=”lazy” alt=”exemplu”>
Când este adăugat atributul de încărcare, acesta va declanșa o încărcare leneșă la nivel de browser. Atributul de încărcare este acceptat în browserele bazate pe Chrome și Firefox.
Rețineți că pragul de declanșare a încărcării imaginilor este de 1250 px (conexiuni rapide, cum ar fi 4g) și 2500 px (pentru conexiuni mai lente, cum ar fi 3g).
Cum să Amânați (Lazy Load) Imagini în Afara Ecranului cu Pluginuri
În calitate de utilizator WordPress, ar trebui să știți că WordPress utilizează implicit LazyLoad nativ.
WordPress va adăuga atributul loading=”lazy” la toate imaginile cu atributele lățime și înălțime. Cu toate acestea, această caracteristică nu se aplică imaginilor de fundal și cadrelor iframe din toate browserele.
Browserele nu pot încărca leneș imaginile de fundal din cauza modului în care le procesează în timp ce analizează și redă pagina.
Deci, dacă trebuie să încărcați leneș astfel de imagini, ar trebui să utilizați unul dintre cele mai bune pluginuri de lazy loading pentru WordPress.
Cea mai ușoară opțiune este să profitați de WP Rocket, care vă va ajuta să vă accelerați site-ul chiar și dincolo de lazy loading!
În fila Media, veți găsi opțiunea de a vă încărca leneș imaginile și de a exclude oricare dintre ele, dacă este necesar (amintiți-vă ce am scris mai sus despre nota LCP). Este la fel de simplu pe cât pare!
Amânați Imaginile în Afara Ecranului cu WP Rocket: Rezultate Înainte și După
Care este impactul asupra auditului Amânării imaginilor în Afara Ecranului cu și fără WP Rocket?
Am efectuat un test de utilizare prin instalarea temei Astra și importând un site de comerț electronic cu Beaver Builder.
Rulând un test pe o pagină fără WP Rocket, am obținut un steag portocaliu cu privire la acest audit specific:
Am activat apoi WP Rocket și funcția de lazy loading. De data aceasta, secțiunea de oportunități nu a afișat niciun semnal legat de amânarea imaginilor în afara ecranului:
Derulând în jos, am găsit auditul sub steag verde. Ne-a luat timp, doar un singur clic pentru a rezolva o problemă de performanță. Destul de bine, nu?
Începeți să Amânați Imaginile în Afara Ecranului Chiar Acum
Amânarea imaginilor în afara ecranului vă va ajuta să gestionați imaginile de mai jos și să vă adresați recomandării specifice PageSpeed Insights.
Puteți folosi WP Rocket pentru a vă accelera site-ul și pentru a remedia orice probleme de performanță fără niciun efort.
Nu sunteți încă client WP Rocket? Economisiți timp și lăsați WP Rocket să facă treaba pentru dvs. WP Rocket este cel mai simplu mod de a vă îmbunătăți scorul PageSpeed Insights.
Puteți conta întotdeauna pe garanția lor de rambursare 100% a banilor. 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 vi-l asumați cu pluginul lor este accelerarea site-ului dvs. WP Rocket aplică automat 80% din cele mai bune practici de performanță web, sporind instantaneu scorurile tale Core Web Vitals.
Recomandarea autorului:
- Cum să Combinați Imagini Folosind CSS Sprites în WordPress – Ghid Pas cu Pas
- Dimensiunea Fișierului Contează ? Sfaturi și Instrumente Pentru a vă Redimensiona Imaginile
- Ce este WebP și Cum să Utilizați Acest Format de Imagine în WordPress
- Cum Să Vă Comprimați Imaginile Online – Cele mai Bune 5 Instrumente
