Viteza Falsă: Cum te mint plugin-urile de optimizare a imaginilor și de ce site-ul tău e încă lent pe mobil

Viteza Falsă: Cum te mint plugin-urile de optimizare a imaginilor și de ce site-ul tău e încă lent pe mobil

Trăim într-o eră a iluziilor digitale. Instalezi un plugin gratuit de optimizare a imaginilor, apeși un buton numit „Smush” sau „Optimize All”, și brusc rapoartele interne îți arată că ai economisit 50% din spațiu. Te simți în siguranță, considerând că ai rezolvat problema vitezei site-ului. Apoi, testezi site-ul pe telefon sau folosești Google PageSpeed Insights și ești întâmpinat de un scor roșu aprins și avertismente grave privind latența.


Acesta este unul dintre cele mai comune fenomene pe care echipa SiteSOS le întâlnește în timpul auditurilor tehnice. Problema nu este că plugin-urile nu funcționează, ci că promisiunea lor de rezolvare totală este o iluzie. În 2026, simpla micșorare a unui fișier JPEG nu mai este nici pe departe suficientă pentru a satisface pretențiile algoritmilor Google și ale motoarelor generative de inteligență artificială (AI).

În acest articol, vom diseca „mecanica vitezei false”, vom explica de ce telefoanele mobile sunt cele mai vulnerabile la aceste greșeli și vom arăta cum trecem de la o compresie mediocră la o randare perfectă, fără a depinde orbește de soluții automate.


Mitul „compresiei la 80%”: De ce dimensiunea nu (mai) este totul

Timp de un deceniu, optimizarea imaginilor a însemnat un singur lucru: reducerea numărului de megabytes. Un plugin preia o imagine de 3 MB și o reduce la 300 KB scăzându-i calitatea (compresie lossy). Pe hârtie, e o victorie. În realitate, ai rezolvat doar 10% din problemă.

De ce? Pentru că greutatea fișierului este doar primul obstacol pe care browser-ul utilizatorului trebuie să-l depășească. Adevarata povară începe atunci când telefonul mobil primește imaginea și trebuie să o afișeze (să o randeze) pe ecran. Așa cum am explicat în articolul nostru despre Interaction to Next Paint (INP) și blocajele de pe mobil, procesoarele telefoanelor sunt mult mai limitate decât cele ale laptopurilor. Dacă îi ceri unui smartphone să „deseneze” pe ecran o imagine comprimată greșit, procesorul se va bloca.

⚠️ Riscul Formatelor Învechite (JPEG & PNG)

În 2026, utilizarea formatelor JPEG și PNG pentru fotografii generale pe web este considerată o eroare critică de performanță. Formatele Next-Gen, precum WebP sau AVIF, oferă o calitate vizuală superioară la o fracțiune din dimensiune. Dacă plugin-ul tău doar micșorează un JPEG, fără a-l converti într-un format modern și fără a-l servi direct prin server (nu prin scripturi lente de PHP), continui să trăiești în anul 2018 din punct de vedere tehnic.


Problema invizibilă: „Properly Size Images” și munca silnică a browser-ului

Acesta este cel mai ignorat aspect al optimizării vizuale. Să presupunem că ai încărcat o imagine a echipei tale care are 3000 de pixeli lățime. Ai folosit un plugin și ai comprimat-o impecabil. Acum imaginea cântărește doar 150 KB. Superb, nu?

Nu și pentru un utilizator care intră pe site de pe un telefon mobil cu un ecran de 400 de pixeli lățime.

Ce face browser-ul telefonului său? Descarcă imaginea de 3000 de pixeli (chiar dacă are doar 150 KB), o încarcă în memoria RAM a dispozitivului și consumă cicluri de procesor (CPU) pentru a calcula, pe loc, cum să o reducă („downscale”) la 400 de pixeli pentru a încăpea pe ecran. Acest proces de calcul încetinește Main Thread-ul browser-ului.

Așa cum am detaliat în analiza noastră despre de ce un Site Checker îți arată problemele, dar nu le repară, Google PageSpeed sancționează aspru această greșeală prin avertismentul „Properly size images”. Un plugin de compresie clasic nu rezolvă această problemă. El nu știe pe ce dispozitiv se afișează site-ul.

Pentru a rezolva acest blocaj, codul sursă al site-ului (HTML) trebuie să folosească atributul srcset, oferind browser-ului posibilitatea de a descărca direct varianta corectă (de 400px pentru mobil, 1000px pentru tabletă, 3000px pentru 4K).


Cum îți „sare textul” pe telefon: Absența atributelor și fenomenul CLS

Te-ai enervat vreodată citind un articol pe telefon când, exact în momentul în care ai vrut să dai click pe un link, o imagine s-a încărcat brusc deasupra și ai apăsat pe o reclamă?

Acest fenomen poartă numele de Cumulative Layout Shift (CLS) și este unul dintre cei mai toxici factori pentru retenția utilizatorilor și pentru punctajul SEO. CLS se întâmplă atunci când browser-ul nu știe ce spațiu să rezerve pentru o imagine înainte ca aceasta să fie complet descărcată.

Când încarci imagini în WordPress fără a specifica explicit lățimea (width) și înălțimea (height) în codul HTML, browser-ul randează textul ignorând imaginile. Când poza coboară în sfârșit de pe server, ea forțează tot textul de sub ea să coboare. Acest salt vizual este penalizat sever de Google.

Nici cel mai scump plugin de „Smush” nu va adăuga aceste atribute în mod miraculos în arhitectura temei tale dacă aceasta a fost construită greșit de la bun început. Este o problemă de arhitectură și cod „Frankenstein”, nu de compresie.

🔍 LCP și paradoxul imaginilor de „eroi” (Hero Images)

Unul dintre cele mai grave conflicte de performanță se naște din intenții bune. Multe site-uri folosesc tehnica „Lazy Loading” (amânarea încărcării imaginilor până când utilizatorul face scroll) prin plugin-uri automate. Problema este că aceste plugin-uri aplică regula peste tot, inclusiv pentru imaginea principală (Hero Image) din partea de sus a ecranului. Când browser-ul primește ordin să „amâne” încărcarea celei mai importante imagini pe care vizitatorul o vede prima, scorul tău de Largest Contentful Paint (LCP) este distrus. Optimizarea corectă presupune excluderea manuală a imaginilor critice din Lazy Load și „pre-încărcarea” (preload) acestora.


Abordarea SiteSOS: De la compresie mediocră la randare perfectă

La SiteSOS, când rezolvăm probleme tehnice invizibile care degradează performanța, nu instalăm un al zecelea plugin pentru a masca erorile primelor nouă. Abordăm problema vizuală direct la rădăcină (în cod și pe server).

Iată ce înseamnă o optimizare reală a imaginilor, care transformă scorul de 40 într-unul de 90+:

Acțiune de Optimizare Efect vizibil (Pentru utilizator) Efect tehnic (Pentru AI și Google)
Conversia WebP/AVIF la nivel de server Imagini impecabile vizual. Reducere cu 60% a traficului de rețea. Eliminare avertisment „Serve images in next-gen formats”.
Generarea corectă a srcset Telefonul nu se mai blochează la afișare. Eliminarea avertismentului „Properly size images”.
Asignarea atributelor Width/Height Experiență stabilă. Textul nu mai sare pe ecran. Scăderea scorului CLS (Cumulative Layout Shift) spre zero.
Preload pentru Hero Images Pagina principală apare instantaneu. Îmbunătățire dramatică a LCP (Largest Contentful Paint).
Offload pe CDN Imagini încărcate localizat, indiferent de regiune. Reducerea masivă a sarcinii pe serverul principal.

Dacă site-ul tău are scoruri roșii în PageSpeed Insights și te bazezi pe plugin-uri gratuite care îți spun că „totul este optimizat”, ești victima vitezei false.

Alege să oferi vizitatorilor (și agenților AI) o experiență impecabilă, nu o amăgire statistică. Lasă specialiștii să intre „sub capotă” pentru a-ți asigura acea fracțiune de secundă care face diferența între un coș abandonat și o vânzare.

Întrebări Frecvente: Optimizarea Imaginilor în 2026

▶ De ce plugin-ul meu de compresie nu rezolvă avertismentul „Properly size images”?

Majoritatea plugin-urilor se concentrează doar pe reducerea greutății fișierului (KB). Avertismentul „Properly size images” apare atunci când browser-ul trebuie să descarce o imagine cu rezoluție mare (ex: 2000px lățime) pentru a o afișa într-un container mic (ex: 300px) pe mobil. Aceasta este o problemă de cod HTML (lipsa atributului srcset) și de setări ale temei, nu de compresie.

▶ Ce este Cumulative Layout Shift (CLS) și cum îl repar?

CLS măsoară instabilitatea vizuală a unei pagini (când elementele „sar” brusc pe ecran). Cea mai frecventă cauză este lipsa dimensiunilor explicite (atributele width și height) în etichetele imaginilor. Fără aceste dimensiuni, browser-ul nu știe cât spațiu să lase gol până se încarcă fotografia. Soluția este adăugarea manuală sau programatică a acestor atribute în codul sursă.

▶ Este Lazy Loading-ul întotdeauna o idee bună?

Nu. Deși „Lazy Loading” (amânarea încărcării) este excelent pentru imaginile aflate mai jos pe pagină, folosirea lui pe imaginile vizibile imediat (Hero Images) distruge timpul de încărcare perceput (LCP – Largest Contentful Paint). Imaginile din partea superioară a ecranului trebuie excluse din lazy load și preîncărcate (preload).

Citește mai departe