Viteza site-ului și Core Web Vitals, explicate pentru proprietarul de firmă

Viteza unui site nu e un capriciu tehnic. Vizitatorul care intră de pe telefon, pe date mobile, într-o pauză de cinci minute, nu așteaptă. Dacă pagina rămâne albă sau butoanele sar sub deget, apasă „înapoi” și alege următorul rezultat. Google știe asta și folosește experiența pe pagină printre semnalele de clasare.

Nu trebuie să fii programator ca să știi dacă site-ul tău are o problemă. Trebuie doar să înțelegi trei indicatori și unde să te uiți.

Cei trei indicatori Core Web Vitals

LCP: cât durează până vezi conținutul principal

Largest Contentful Paint măsoară momentul în care cel mai mare element vizibil (de obicei imaginea principală sau titlul mare) apare pe ecran. Pragul recomandat de Google pentru o experiență bună este de cel mult 2,5 secunde. Cele mai frecvente cauze ale unui LCP slab: imagini mari, necomprimate; server lent; fonturi și scripturi care blochează afișarea.

INP: cât de repede reacționează pagina

Interaction to Next Paint măsoară cât de repede răspunde pagina când apeși un buton, deschizi un meniu sau scrii într-un câmp. A înlocuit în 2024 vechiul indicator FID. Pragul pentru o experiență bună este de cel mult 200 de milisecunde. Cauza tipică: prea mult JavaScript, de multe ori de la module, widgeturi de chat, scripturi de reclame și de măsurare adăugate în timp.

CLS: cât de mult „sare” pagina

Cumulative Layout Shift măsoară cât se mișcă elementele pe ecran în timpul încărcării. Ai pățit-o: vrei să apeși un link, se încarcă o imagine deasupra și apeși altceva. Pragul pentru o experiență bună este de cel mult 0,1. Cauze: imagini fără dimensiuni declarate, bannere care apar peste conținut, fonturi care schimbă mărimea textului după încărcare.

Cum verifici site-ul în cinci minute

1. PageSpeed Insights (pagespeed.web.dev): introduci adresa paginii și primești două seturi de date. Partea de sus, „Discover what your real users are experiencing”, arată datele reale ale vizitatorilor din Chrome, dacă site-ul are suficient trafic. Partea de jos este un test de laborator, util pentru diagnostic.
2. Google Search Console, raportul „Core Web Vitals”: arată grupurile de pagini cu probleme, separat pentru mobil și desktop. Dacă nu ai Search Console configurat, vezi ghidul cu primii pași.
3. Testul pe propriul telefon, pe date mobile, nu pe Wi-Fi-ul de la birou. Deschide pagina principală și o pagină de serviciu. Încearcă meniul și formularul de contact.

Nu te speria de scorul de la 0 la 100 din testul de laborator. Este un indicator de diagnostic, care variază de la un test la altul. Ce contează sunt datele reale și dacă indicatorii trec pragurile.

Cele mai frecvente cauze ale unui site lent

• Imagini prea mari. O fotografie de 5 MB direct din aparat, afișată într-un spațiu de 400 de pixeli. Soluția: redimensionare, format modern (WebP sau AVIF), încărcare întârziată pentru imaginile de mai jos în pagină.
• Prea multe module și scripturi. Pe site-urile WordPress se adună în ani: un modul pentru slider, unul pentru formulare, unul pentru pop-up, fiecare cu fișierele lui. La fel scripturile de chat, hărți și reclame.
• Găzduire slabă. Un server suprasolicitat răspunde greu la fiecare vizită, indiferent cât de optimizat e restul.
• Teme „pentru orice”. Temele care promit sute de variante de design încarcă cod pentru toate, chiar dacă folosești două.
• Videoclipuri încorporate direct în pagina principală, încărcate înainte ca vizitatorul să apese play.
• Fonturi multe, din mai multe surse, în multe grosimi.

Ce poți face singur și ce cere un programator

Singur: comprimă și redimensionează imaginile înainte să le încarci, renunță la modulele pe care nu le folosești, înlocuiește videoclipurile încorporate cu o imagine care deschide videoclipul la clic, elimină pop-up-urile care acoperă conținutul pe telefon.

Cu un programator: optimizarea modului în care se încarcă scripturile și fonturile, memorarea temporară (cache), trecerea la o găzduire mai bună, rescrierea unei teme greoaie. Uneori, refacerea site-ului pe o tehnologie mai ușoară costă mai puțin decât optimizarea repetată a unuia construit greșit.

La e-Web construim site-urile în Next.js, cu imagini optimizate automat și pagini generate în avans, tocmai ca să pornească de la o bază rapidă. Am scris pe blog și despre diferențele dintre Next.js și WordPress. Dacă vrei, îți verificăm gratuit site-ul actual: trimite-ne adresa.

Viteza nu e totul

Un site rapid cu texte slabe tot nu aduce clienți. Viteza este o condiție necesară, nu suficientă. Ordinea corectă: conținut util, structură clară, apoi viteză. Dacă pornești un site nou, cere de la început praguri de viteză în caietul de sarcini; e mult mai ieftin să construiești rapid decât să repari ulterior.