Cum să codificați eficient imaginile pe WordPress și să remediați avertismentul de viteză a paginii

Dacă efectuați un audit al site-ului dvs. WordPress prin PageSpeed ​​Insights, Lighthouse vă poate recomanda să vă codificați eficient imaginile. PageSpeed ​​Insights (PSI) este un instrument care generează un raport de performanță pentru întreaga pagină WordPress. Dacă detectează că imaginile dvs. ar putea fi optimizate mai bine, declanșează avertismentul „codificare eficientă a imaginilor”.

În acest ghid, explicăm ce înseamnă codificarea eficientă a imaginilor și cum să verificați starea imaginilor dvs. Aceasta este, de asemenea, o modalitate eficientă de a vă îmbunătăți scorul de performanță Lighthouse. De asemenea, împărtășim 6 tehnici de optimizare a imaginii și o modalitate rapidă de a remedia avertismentul „Codează eficient imaginile”.

Să ne scufundăm!

Ce înseamnă codificarea eficientă a imaginilor?

Codificarea eficientă a imaginilor înseamnă optimizarea imaginilor pentru a le reduce dimensiunea fișierului fără a afecta semnificativ calitatea acestora.

Cum semnalează Lighthouse imaginile ca fiind optimizabile? Ce declanșează această problemă?

Lighthouse scanează toate imaginile dvs. de pe pagina pe care o auditați, apoi setează nivelul de compresie la 85%. Dacă economisirea potențială este de 4 KiB sau mai mare, ei vor raporta imaginea și o vor semnala ca eroare în raportul de performanță.

Imaginile necomprimate la o calitate foarte înaltă duc adesea la dimensiuni mari ale fișierului. Și cu cât imaginile sunt mai mari, cu atât va dura mai mult timp pentru a le descărca și a le reda vizitatorilor tăi. Când se întâmplă acest lucru pentru toate imaginile dvs., este posibil ca timpul total de încărcare să crească și puteți ajunge la un site web lent.

Pentru a evita această situație, împărtășim 6 tehnici de optimizare care vă permit să vă difuzați corect imaginile pe web.

6 moduri de a codifica eficient imaginile pe WordPress:

Există șase pași pe care îi puteți face pentru a codifica eficient imaginile și a aborda această recomandare PageSpeed ​​Insight, inclusiv:

1. Comprimarea imaginilor dvs
2. Implementarea Lazy Load
3. Conversia imaginilor în WebP (format de generație următoare)
4. Servirea imaginilor cu dimensiunile corecte
5. Utilizarea unui CDN de imagine
6. Înlocuirea GIF-urilor animate cu videoclipuri

Să trecem peste fiecare pas.

1. Comprimarea imaginilor

Scopul compresiei imaginii este de a reduce fișierul imagine fără a compromite prea multă calitate. Acest lucru face ca PageSpeed ​​Insights să fie foarte fericit, deoarece imaginile pot fi stocate și redate în cea mai eficientă formă, făcându-le codificate corect. Compresia imaginii poate avea pierderi, dar fără pierderi dacă preferați să nu atingeți calitatea imaginii.

Cu toate acestea, dacă utilizați instrumentul potrivit, compresia fără pierderi nu este vizibilă cu ochiul liber.

În exemplul nostru de mai jos, unul este fișierul original, iar celălalt a fost comprimat. Poți observa diferența? nu pot.

Amintiți-vă, imaginile suboptime vă afectează semnificativ viteza paginii și vă încetinesc site-ul WordPress. Cel mai simplu mod de a evita orice probleme de performanță este să utilizați un plugin WordPress. Nu-ți face griji. Am făcut munca grea pentru tine și am întocmit o listă cu cel mai bun plugin de compresie a imaginii pentru WordPress.

Dacă preferați modul manual de comprimare a imaginilor, vă oferim și noi acoperire. Și dacă te simți copleșit de PhotoShop și Lightroom, există o mulțime de instrumente alternative de optimizare pe care le poți folosi.

2. Implementarea Lazy Load

Încărcarea leneră ajută la codificarea eficientă a imaginilor, deoarece este o tehnică de optimizare care urmărește afișarea imaginilor doar atunci când este necesar. Dacă utilizatorul le vede, imaginile vor fi redate de browser. În caz contrar, încărcarea va fi amânată pentru a prioritiza conținutul cel mai critic. Google recomandă „Amânarea imaginilor în afara ecranului” pe PageSpeed, ceea ce înseamnă aplicarea următorului script de încărcare leneră:

 “loading=lazy”

Amintiți-vă, ar trebui să evitați să setați acest script pentru orice imagini din prima fereastră de vizualizare vizibilă. În schimb, aplicați întârzierea conținutului de mai jos:

Dacă nu aveți chef să implementați manual lazy loading, puteți utiliza un plugin gratuit WordPress, cum ar fi Lazy Load by WP Rocket, sau puteți arunca o privire la cele mai bune pluginuri lazy load pentru WordPress.

3. Conversia imaginilor în WebP (format de generație următoare)

Dezvoltat de Google, WebP este un format de imagine de nouă generație care oferă o compresie mai bună fără pierderi și cu pierderi pentru imagini. Acest lucru are ca rezultat codificarea mai bună a imaginilor pe site-ul dvs. WordPress și trecerea auditului PageSpeed.

De fapt, potrivit Google, „dimensiunea medie a fișierului WebP este cu 25%-34% mai mică în comparație cu dimensiunea fișierului JPEG”. Acest tabel arată că WebP realizează o compresie mai bună decât formatul JPEG:

esti convins? Pluginul Imagify vă poate converti imaginile în WebP direct din tabloul de bord WordPress.

Dacă doriți să aflați mai multe despre acest format de nouă generație, vă recomandăm să citiți cum să utilizați formatul WebP pe WordPress.

4. Servirea imaginilor cu dimensiunile corecte

Lighthouse facilitează găsirea imaginilor cu dimensiuni incorecte pe site-ul dvs. WordPress. Pur și simplu auditați-vă pagina și, dacă găsiți avertismentul „Imagini cu dimensiunea corectă”, ar trebui să le redimensionați.

Panoul DevTools Elements poate fi folosit și pentru a verifica la ce dimensiune este afișată o imagine:

Această secțiune sună ușor, dar având în vedere varietatea de dimensiuni de ecran disponibile în 2022, lucrurile pot deveni rapid complexe.

O singură regulă: în mod ideal, pagina dvs. nu ar trebui să difuzeze niciodată imagini mai mari decât ecranul utilizatorului.

• Dimensiunea medie a ecranului desktop este 1920 x 1080 pixeli
• Majoritatea telefoanelor mobile au o lățime a dispozitivului de 400 px

Pentru site-ul dvs. WordPress, puteți fie să încărcați imagini prin biblioteca media, fie direct pe pagina dvs. Google recomandă să se asigure că sunt utilizate dimensiunile optime ale imaginii (inclusiv cele pentru punctele de întrerupere receptive). Cheia este să evitați utilizarea imaginilor la dimensiune completă și să le redimensionați corect:

• Încercați să păstrați dimensiunea fișierului imagine sub 200 KB
• Pentru majoritatea imaginilor, o lățime maximă de 800 de pixeli este suficientă

Păstrarea imaginilor între aceste numere va asigura că acestea se încarcă rapid pe dispozitivele utilizatorului.

Puteți merge mai departe și puteți optimiza imaginile în funcție de fiecare dispozitiv, așa cum se arată mai jos pe Sketch:

Aveți multe opțiuni pentru a dimensiona corect imaginile și pentru a evita încetinirea încetinirii site-ului:

• Faceți-o manual cu instrumente precum Photoshop, Lightroom, Gimp etc.
• Utilizați un plugin de optimizare a imaginii precum Imagify. Similar cu compresia, puteți utiliza, de asemenea, în vrac pentru a redimensiona toate imaginile existente pe site-ul dvs.:

5. Utilizarea unui CDN de imagine

Pentru a codifica eficient imaginile pe WordPress, ar trebui să optați pentru un furnizor CDN. Vă va livra imaginile mai rapid și vă va ajuta să scăpați de problemele legate de imaginile Google PageSpeed. Un CDN este specializat în optimizarea și livrarea de imagini oriunde se află utilizatorii dvs. din lume:

Potrivit WebDev, „trecerea la o imagine CDN poate aduce economii de 40–80% în dimensiunea fișierului de imagine”, după cum se arată mai jos:

6. Înlocuirea GIF-urilor animate cu Video

Înlocuirea unui GIF animat cu un videoclip va îmbunătăți performanța, deoarece un videoclip .mp4 este mult mai ușor decât un GIF, așa cum puteți vedea în exemplul meu de mai jos:

– Dimensiunea fișierului GIF: 12 MB
– Dimensiunea fișierului MP4: 286 KB ( economii totale: 98% )

De asemenea, PageSpeed ​​recomandă să difuzați conținutul animat prin formatul video și nu folosind GIF. Când convertiți conținutul în MP4, asigurați-vă că aveți setările potrivite pentru ca acesta să arate ca un GIF:
– Ar trebui să circule continuu
– Ar trebui să se joace automat
— Ar trebui să tacă

Există mai multe moduri de a converti GIF-urile în video, am folosit Ezgif pentru comparația de mai sus.

Acum că am văzut cele 6 tehnici de optimizare pentru a codifica eficient imaginile pe WordPress, permiteți-mi să vă împărtășesc cutia mea de instrumente de performanță. Poate fi util dacă trebuie să creșteți viteza site-ului dvs. WordPress și să vă asigurați că imaginile sunt bine optimizate pentru web.

În secțiunea următoare, ne vom concentra pe Imagify, pluginul nostru puternic de comprimare a imaginii care codifică eficient imaginile în mod automat.

Cum să remediați codificarea eficientă a imaginilor cu Imagify

Datorită Imagify, puteți să vă comprimați imaginile fără a compromite calitatea și să remediați avertismentul „Codificare eficientă a imaginii”.

Este timpul să vedeți Imagify în acțiune și să comparați statisticile PageSpeed ​​cu și fără Imagify.

Înainte de Imagify – Performanța mea are rezultate pe PageSpeed ​​Insights

Lighthouse nu dă rezultate grozave și am câteva probleme legate de imagine, și anume:

• Codați eficient imaginile (care este subiectul nostru de astăzi)
• Serviți imagini în formate de nouă generație
• Dimensiunea corectă a imaginilor

Acum este timpul să descărcați Imagify pentru a comprima și a servi imaginile noastre în formate de nouă generație, a le dimensiona corespunzător și, desigur, pentru a le codifica eficient.

Cu Imagify – Rezultate de performanță pe PageSpeed ​​Insights

Imagify a remediat avertismentul „Codează eficient imaginea”! De asemenea, mi-a optimizat toate imaginile și a pus problemele mele anterioare în zona de audit trecută:

Imagify a redus dimensiunea fișierului meu imagine cu 90% - a trecut de la aproape 2 MB la 200 KB, așa cum se arată în exemplul nostru de mai jos:

Doriți să scăpați de avertismentul „imagine în mod eficient”, la fel ca și mine?

Instalați Imagify și aplicați următoarele setări:

• Configurați Imagify (este simplu)
• Selectați nivelul de optimizare pe care doriți să-l utilizați pentru comprimarea imaginilor. Am ales Ultra, cel mai înalt nivel de optimizare:

• Convertiți-vă imaginile în WebP, formatul de nouă generație recomandat de PageSpeed ​​Insights:

• Optimizați-vă imaginile mari în vrac cu Imagify. ( Asta înseamnă optimizarea întregii biblioteci cu un singur clic!)
• Și chiar așa, avertismentul PSI a dispărut.

De menționat că acest proces de optimizare a imaginii a fost complet gratuit!

Versiunea gratuită a Imagify vă permite să redimensionați și să comprimați 20 MB de imagini pe lună. Dacă intenționați să adăugați mai multe imagini, puteți opta pentru următorul preț premium:

• 4,99 USD pe lună pentru 500 GB (aproximativ 5000 de imagini)
• și 9,99 USD pe lună pentru utilizare nelimitată.

Dacă mai aveți îndoieli, PageSpeed ​​Insights vă recomandă și să utilizați un plugin de optimizare a imaginii precum Imagify:

Încheierea

Fără Imagify, PageSpeed ​​a semnalat mai multe probleme pentru imaginile mele:

Când utilizați Imagify, toate problemele mele legate de imagine au fost remediate. Au fost optimizate într-unul dintre formatele de nouă generație (WebP) și avertismentul meu „codează eficient imaginile” s-a transformat în sfârșit în verde.

Dacă sunteți ca mine și doriți să vă codificați eficient imaginile în WordPress în câteva clicuri, atunci de ce să nu folosiți Imagify? Puteți încerca gratuit Imagify, puteți optimiza imaginile și puteți efectua propriul audit pe PageSpeed ​​Insights, la fel ca și mine. Anunță-mă în comentarii dacă și tu ai trecut testul datorită Imagify, sunt curioasă!