Cum să citești un raport Lighthouse fără să intri în panică

Prima regulă: scorul tău nu este site-ul tău

Deschizi pentru prima dată un raport Lighthouse și te întâmpină un zid de cifre, casete codate pe culori și avertismente despre lucruri de care nu ai mai auzit. Reacția firească este panica. Scorul este roșu. Există șaptesprezece audituri eșuate. Cu siguranță site-ul este stricat?

Probabil că nu. Lighthouse este un instrument de diagnosticare, nu un carnet de note. Scorul este un benchmark sintetic rulat în condiții de laborator — adesea pe o conexiune limitată, simulând un telefon din gama medie din 2017. Îți spune cum se comportă site-ul tău în acel scenariu specific, nu cum îl experimentează utilizatorii reali în practică.

Acest lucru contează deoarece majoritatea echipelor se fixează pe scor și pierd contextul. Un scor de 65 poate fi în regulă pentru o aplicație web complexă cu date în timp real. Un scor de 95 poate oferi în continuare o experiență slabă dacă sunt optimizate lucrurile greșite. Scorul este un punct de plecare pentru investigație, nu o metrică a succesului.

Ce să citești mai întâi: Core Web Vitals

Sari peste scorul general de performanță. Derulează până la secțiunea Metrics și uită-te la trei valori: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) și Interaction to Next Paint (INP). Acestea sunt Core Web Vitals și sunt singurele metrici de performanță pe care Google le folosește ca semnal de clasare.

• LCP măsoară cât durează până se afișează cel mai mare element vizibil. Țintă: sub 2,5 secunde. Dacă depășești 4 secunde, utilizatorii așteaptă prea mult ca să vadă conținut semnificativ.
• CLS măsoară stabilitatea vizuală — cât de mult sare pagina în timp ce se încarcă. Țintă: sub 0,1. Dacă depășești 0,25, utilizatorii ajung să dea click accidental pe lucrul greșit pentru că butoanele s-au mutat.
• INP măsoară responsivitatea — cât de rapid reacționează pagina la clickuri, atingeri și apăsări de taste. Țintă: sub 200ms. Dacă depășești 500ms, site-ul se simte lent.

Aceste trei metrici se corelează cu frustrarea reală a utilizatorilor. Remediază-le înainte să îți faci griji pentru orice altceva.

Oportunități vs. diagnosticări: cunoaște diferența

Lighthouse își împarte constatările în două categorii: Opportunities și Diagnostics. Oportunitățile sunt ordonate după economia de timp estimată. Diagnosticările oferă context suplimentar — lucruri care ar putea fi probleme sau ar putea să nu fie.

Începe cu Opportunities. Dacă Lighthouse spune că „Eliminate render-blocking resources” ar putea economisi 1,2 secunde, acesta este un câștig concret. Dacă spune că „Reduce unused JavaScript” ar putea economisi 0,1 secunde, probabil nu merită refactorizarea.

Diagnostics sunt mai dificile. „Avoid an excessive DOM size” sună rău, dar dacă CLS-ul tău este bun și INP-ul este rapid, un DOM mare s-ar putea să nu afecteze pe nimeni. Diagnosticările sunt indicii, nu obligații. Investighează-le pe cele care se aliniază cu metricile tale reale.

Auditurile pe care de obicei le poți ignora

Unele avertismente Lighthouse sunt vestigiale sau excesiv de agresive. Iată-le pe cele care provoacă cel mai mult panică inutilă:

• „Does not use passive listeners to improve scrolling performance” — Aceasta este o micro-optimizare care rareori schimbă semnificativ rezultatul. Dacă nu ai dovezi de derulare sacadată, sari peste ea.
• „Image elements do not have explicit width and height” — Acest lucru contează pentru CLS, dar doar dacă imaginile cauzează deplasări de layout. Dacă CLS-ul tău este deja bun, nu refactoriza doar de dragul auditului.
• „Serve images in next-gen formats” — Da, WebP și AVIF sunt mai mici. Dar dacă imaginile tale sunt deja optimizate și LCP-ul este rapid, acesta este un plus util, nu o criză.
• „Avoid enormous network payloads” — Lighthouse semnalează orice depășește 1,6 MB. Dar o pagină de 2 MB care se încarcă rapid este mai bună decât o pagină de 500 KB care blochează randarea. Concentrează-te pe cum sunt livrați octeții, nu doar pe total.

Ce să faci când totul este roșu

Dacă scorul tău Lighthouse este sub 50 și majoritatea auditurilor eșuează, probabil ai de-a face cu una dintre trei cauze principale:

1. Fonturi neoptimizate. Fonturile web sunt în continuare cel mai ușor câștig de performanță pe majoritatea site-urilor. Verifică dacă încarci șase grosimi de font când folosești doar două sau dacă livrezi fișiere WOFF în loc de WOFF2.
2. CSS și JavaScript care blochează randarea. Dacă First Contentful Paint (FCP) depășește 3 secunde, ceva împiedică browserul să deseneze pagina. Caută fișiere CSS mari sau scripturi sincrone în <head>.
3. Imagini supradimensionate. Dacă elementul tău LCP este o imagine și are 4 MB, acolo este problema. Comprim-o, încarcă leneș imaginile de sub primul ecran și folosește sintaxa pentru imagini responsive.

Remediază una dintre acestea și rulează din nou Lighthouse. Vei vedea adesea un salt de 20-30 de puncte. Apoi abordează următoarea problemă.

Date de laborator vs. date din teren: verificarea realității

Lighthouse rulează în laborator. Simulează o conexiune lentă și un dispozitiv lent, dar nu poate simula comportamentul real al utilizatorilor — cum derulează oamenii, pe ce dau click, dacă sunt pe un Wi-Fi instabil.

Pentru o verificare a realității, compară rezultatele Lighthouse cu datele din teren din Chrome User Experience Report (CrUX). CrUX arată cum experimentează site-ul tău utilizatorii reali Chrome în ultimele 28 de zile. Dacă Lighthouse spune că LCP-ul tău este de 4 secunde, dar CrUX arată 2 secunde, ai încredere în CrUX. Dacă ambele sunt slabe, ai o problemă reală.

Poți găsi date CrUX în PageSpeed Insights (versiunea web a Lighthouse) sau în Google Search Console, la „Core Web Vitals.” Dacă există o nepotrivire, investighează de ce. Poate utilizatorii tăi reali sunt pe rețele mai rapide. Poate Lighthouse testează un build de dezvoltare neoptimizat.

Când să rulezi din nou Lighthouse

Lighthouse este zgomotos. Rulează-l de trei ori la rând și vei obține trei scoruri diferite, chiar pe aceeași pagină. Asta se întâmplă pentru că performanța este variabilă — procesele de fundal, variațiile rețelei și euristicile browserului afectează toate rezultatul.

Pentru a obține o bază stabilă, rulează Lighthouse în mod incognito cu toate extensiile dezactivate sau folosește CLI cu flagul --preset=desktop pentru rezultate mai consecvente. Rulează-l de trei ori și fă media scorurilor. Dacă vezi oscilații mari (mai mult de 10 puncte), altceva este în neregulă — poate serverul este lent sau pagina încarcă resurse diferite de fiecare dată.

Rulează din nou Lighthouse după fiecare schimbare semnificativă. Implementezi o nouă strategie pentru fonturi? Verifică LCP. Încarci leneș imaginile? Verifică CLS. Adaugi un script terț? Verifică INP. Performanța nu este o remediere unică; este un buget pe care îl aperi.

Instrumentele care te ajută să acționezi pe baza constatărilor Lighthouse

Lighthouse îți spune ce este lent. Nu îți spune întotdeauna cum să remediezi. Pentru asta, ai nevoie de instrumente suplimentare:

• WebPageTest îți oferă o vedere tip filmstrip a modului în care se încarcă pagina, cadru cu cadru. Este esențială pentru diagnosticarea problemelor de LCP și CLS.
• Panoul Performance din Chrome DevTools îți arată exact ce JavaScript blochează firul principal. Folosește-l pentru a găsi sursa unui scor INP slab.
• Instrumentele de comprimare a imaginilor îți permit să optimizezi imaginile direct în browser, ceea ce este mai rapid și mai privat decât încărcarea lor într-un serviciu terț. Procesarea imaginilor pe partea de client este un câștig pentru confidențialitate, deoarece imaginile tale nu părăsesc niciodată mașina ta.

Lighthouse este punctul de plecare. Aceste instrumente te ajută să finalizezi treaba.

Idei principale

• Scorul tău Lighthouse este un benchmark de laborator, nu o măsură a experienței reale a utilizatorilor. Compară-l cu datele din teren din CrUX înainte să intri în panică.
• Concentrează-te mai întâi pe Core Web Vitals (LCP, CLS, INP). Acestea sunt metricile care se corelează cu frustrarea utilizatorilor și cu impactul SEO.
• Prioritizează Opportunities după economia de timp estimată. Ignoră Diagnostics care nu se aliniază cu problemele tale reale de performanță.
• Unele audituri — precum passive listeners sau formatele de imagine de generație următoare — sunt micro-optimizări. Remediază mai întâi lucrurile mari.
• Rulează Lighthouse de trei ori și fă media rezultatelor. Performanța este variabilă, iar o singură rulare poate fi înșelătoare.

Întrebări frecvente

Q: De ce se schimbă scorul meu Lighthouse de fiecare dată când îl rulez?
A: Lighthouse măsoară performanța în condiții variabile — viteza rețelei, încărcarea CPU și euristicile browserului afectează toate rezultatul. Rulează-l de trei ori în mod incognito și fă media scorurilor pentru o bază mai stabilă.

Q: Ar trebui să optimizez mai întâi pentru mobil sau pentru desktop?
A: Mobil. Lighthouse folosește implicit o simulare mobilă deoarece majoritatea traficului web este mobil, iar dispozitivele mobile sunt mai lente. Dacă scorul tău pe mobil este bun, scorul pe desktop va fi de obicei în regulă.

Q: Scorul meu Lighthouse este 95, dar site-ul încă pare lent. Ce este în neregulă?
A: Lighthouse măsoară încărcarea paginii, nu interactivitatea după încărcare. Verifică scorul INP și folosește panoul Performance din Chrome DevTools pentru a profila ce se întâmplă când utilizatorii dau click sau derulează. S-ar putea să ai o problemă de JavaScript pe care Lighthouse nu o detectează.

Q: Am nevoie de un scor perfect de 100?
A: Nu. Un scor de 90+ este excelent. Urmărirea scorului 100 înseamnă adesea optimizarea unor lucruri care nu contează pentru utilizatori. Concentrează-te pe metrici reale — LCP, CLS, INP — și ignoră scorul.

Q: Pot avea încredere în Lighthouse dacă folosesc multe scripturi terțe?
A: Lighthouse va semnala scripturile terțe ca problemă, dar nu poate distinge întotdeauna între cele necesare și cele inutile. Folosește auditurile „Avoid enormous network payloads” și „Reduce JavaScript execution time” pentru a identifica cei mai problematici vinovați, apoi decide dacă merită păstrați.

Surse

• „Lighthouse performance scoring” — Google Developers
• „Core Web Vitals” — web.dev
• „Chrome User Experience Report” — Google Developers
• „WebPageTest Documentation” — WebPageTest.org