Pentru ca site-ul tău WordPress să genereze trafic, să păstreze vizitatorii și să crească conversiile, conținutul său trebuie să fie captivant. Visual media te poate ajuta. Din păcate, imaginile de înaltă calitate înseamnă adesea dimensiuni mari de fișiere care îți pot încetini timpul de încărcare.
Desigur, eliminarea conținutului vizual de pe site-ul dvs. nu este pur și simplu o opțiune. Cu toate acestea, există tehnici pe care le poți utiliza pentru formatarea și optimizarea imaginilor pentru a crește viteza site-ului.
În această postare, îți voi explica modul în care imaginile afectează viteza și performanța site-ului tău WordPress. Apoi, îți voi oferi trei moduri prin care le poți optimiza pentru a reduce timpul de încărcare a paginilor. Să începem!
Cum afectează imaginile viteza și performanța site-ului tău
Potrivit arhivei HTTP, imaginile reprezintă aproape un sfert din dimensiunea totală a unei pagini web. Serverul tău lucrează din greu pentru a încărca fișiere media, în special cele de dimensiuni mari.
Când vine vorba de timpii de încărcare a paginilor, fiecare secundă contează. Site-urile care necesită prea mult timp pentru a se încărca aduc o experiență slabă a utilizatorului (UX) și, la rândul său, o rată de respingere mai mare.
Pe lângă vizitatorii tai, nici Google nu apreciază și site-urile lente. Imaginile optimizate sunt mai ușor de prelucrat și indexat. Cu cât este mai rapid site-ul dvs., cu atât este mai probabil să obțineți un nivel mai mare în rezultatele motorului de căutare.
Reducând calitatea și dimensiunea imaginilor acestea vor utiliza mai puțin lățimea de bandă și spațiul pe disc. Paginile vor fi mai ușor de deschis, serverul va comunica mai rapid cu browserele utilizatorilor și, în final, conținutul se va încărca mai rapid.
Compresia imaginii poate fi comparată cu pregătirea bagajelor pentru o călătorie. În primul rând, s-ar putea să-ți arunci la întâmplare îmbrăcămintea în valiză fără a împacheta nimic. Vei observa că bagajul se umple rapid până în punctul în care abia îl poți închide.
Apoi, poți încerca să așezi bine fiecare articol, poate chiar să folosești pungi vidate. Acum ai chiar mai mult spațiu decât înainte. Conținutul este același, singura diferență este modul în care sunt ambalate.
Cu toate acestea, nu ai vrea să scazi calitatea fișierelor media până la punctul în care par neprofesionale sau sunt în întregime de neînțeles. Optimizarea corectă a imaginii înseamnă găsirea unui echilibru corect între calitate și dimensiune. Cu siguranță, trebuie să obținut un nivel superior în cadrul rezultatelor motorului de căutare.
3 modalități pentru optimizarea imaginilor
Nu este necesar să alegi între suporturi de calitate și timpi de încărcare scurtă. Este posibil să obții ambele variante dacă utilizezi instrumentele corespunzătoare și cele mai bune practici. Iată trei modalități prin care îți poți optimiza imaginile pentru a crește viteza site-ului.
1. Redu dimensiunea imaginilor înainte de a le încărca pe site
O modalitate pentru optimizarea imaginilor este reducerea dimensiunii lor înainte de a le încărca în biblioteca WordPress. Pe scurt, aceasta presupune redimensionarea și ajustarea calității prin compresie.
Există două tipuri de compresie a imaginii:
- Compresia cu mici pierderi (lossy) este atunci când o imagine pierde o parte din datele sale pentru a reduce dimensiunea fișierului. Deși nu este suficient pentru a provoca modificări vizibile pentru vizitatori, acesta poate reduce sarcina pe serverul dvs.
- Cu o compresie fără pierderi, toate datele imaginii sunt intacte și pot fi recuperate. Calitatea nu este afectată, iar imaginile sunt transformate numai atunci când sunt necomprimate.
Tipul pe care ar trebui să-l utilizezi depinde de formatul fișierului, despre care vom discuta mai târziu.
Un instrument online pe care îl puteți utiliza pentru a comprima imaginile este TinyPNG (sau TinyJPG).
Aplică automat metoda ideală de compresie pentru a reduce dimensiunea imaginii cu cea mai mare cantitate posibilă, fără pierderea calității.
Dimensiuni prea mari ale imaginilor îți pot incetini site-ul. Prin urmare, poți reduce, de asemenea, dimensiunea fișierului prin ajustarea înălțimii și lățimii imaginilor. Poți defini aceste măsurători în HTML sau utilizând o platformă de editare foto înainte de a le încărca.
Să presupunem că ai o imagine cu dimensiunile originale de 5472 x 3648 px. Mărimea fișierului este de 3 MB. Cu toate acestea, site-ul dvs. are nevoie doar de un banner de 1920 x 1280 px.
Redimensionarea imaginii la aceste dimensiuni și reducerea ușoară a calității acesteia cu zece la sută scade dimensiunea totală a fișierului de la 3 MB (3.000 KB) la 613 KB.
2. Alegeți un format adecvat
După cum am menționat, tipul de compresie și formatul fișierului sunt ambii factori importanți atunci când vine vorba de optimizare. Alegerea tipului de imagine adecvat poate reduce mărimea acestora și, la rândul său, poate crește viteza site-ului.
Există patru formate principale utilizate pentru imagini pe web:
- Portable Network Graphic (PNG). Acest format necesită o compresie fără pierderi. De obicei, imaginile PNG sunt de înaltă calitate, dar au dimensiuni mari.
- Joint Photographic Experts Group (JPEG). Imaginile JPEG tind să fie de calitate mai mică decât fișierele PNG, dar sunt, de asemenea, în mod natural mai mici. Compresia cu pierderi mici este cea mai obișnuită metodă de reducere a dimensiunii lor.
- Graphics Interchange Format (GIF). Acest format folosește doar compresie fără pierderi. Este rezervat imaginilor animate de dimensiuni mici și este utilizat în mod obișnuit pentru social media și postări pe blog.
- Un format relativ nou care poate utiliza compresia cu pierderi mici sau fără pierderi. Imaginile WebP sunt cu 26% mai mici decât PNG-urile și cu 34% mai mici decât JPEG-urile. Cu toate acestea, formatul nu este acceptat de toate browserele de internet (în special Safari).
Imaginile WebP sunt superioare în sensul că oferă cele mai mici dimensiuni de fișiere posibile la cea mai înaltă calitate. Cu toate acestea, având în vedere că Safari este al doilea browser cel mai popular după Google Chrome (în special pentru dispozitivele mobile), este posibil să nu fie cea mai bună alegere pentru livrarea sigură a conținutului vizual.
GIF-urile ar trebui să fie utilizate moderat. Deși sunt deseori o sursă excelentă de umor sau informații instructive, animația tinde să încetinească site-ul.
Când vine vorba de alegerea dintre PNG și JPEG, în general prima este cea mai bună pentru capturi de ecran și grafică, în timp ce cea din urmă produce fotografii mai bune.
3. Utilizați un plugin de încărcare leneș (lazy load plugin LLP), cum ar fi WP Smush
După cum am menționat deja, există instrumente online pe care le poți utiliza pentru a optimizarea imaginilor. Cu toate acestea, pe lângă ajustarea formatului și a dimensiunii, puteți optimiza și mai mult imaginile, folosind încărcarea leneșă.
Cu imagini încărcare leneș, fotografiile sau graficele din partea de jos a unei pagini nu vor fi redate în timp ce vizitatorul este încă în partea de sus. Odată ce utilizatorul începe să deruleze, fișierele dvs. media vor deveni vizibile pe măsură ce vor apărea.
Scopul acestei tehnici este de a reduce la minimum numărul de imagini pe care browserele vizitatorilor trebuie să le încarce în același timp. Ajută atât la lățimea de bandă, cât și la viteza site-ului.
Pentru a activa această caracteristică, se utilizează un plugin de optimizare a imaginii, cum ar fi WP Smush.
Cu peste un milion de instalări active și un rating WordPress de cinci stele, acest plugin gratuit este o soluție puternică pentru optimizarea imaginilor, inclusiv încărcarea leneșă.
Pe lângă încărcarea leneșă, WP Smush folosește compresia fără pierderi și redimensionarea imaginii pentru a optimiza automat fișierele media când le încărcați pe WordPress. Îl puteți folosi pentru toate formatele de fișiere, inclusiv PNG, JPEG și GIF. Acest lucru elimină necesitatea de a efectua acest proces din timp.
După ce instalați și activați pluginul, acesta va începe imediat scanarea site-ului dvs. pentru imagini care au nevoie de optimizare. Puteți configura setările din tabloul de bord WordPress accesând Smush> Dashboard> Settings.
Concluzie
Imaginile de înaltă calitate sunt o parte crucială a site-ului. Din păcate, acestea pot influența și performanțele acestuia și, ulterior, le pot afecta user experience (UX) și SEO.
În această postare, am tratat trei moduri prin care optimizarea imaginilor pot ajuta la creșterea vitezei site-ului:
- Redu dimensiunea imaginilor înainte de a le încărca pe site.
- Alege formatul de fișier corespunzător.
- Utilizează un plugin de încărcare leneș, precum WP Smush.
Pentru un audit web al calității site-ului sau optimizări aferente, nu ezita să contactezi echipa B3 Digital.
