Ako čítať report Lighthouse bez paniky

Prvé pravidlo: vaše skóre nie je váš web

Keď prvýkrát otvoríte report Lighthouse, uvidíte stenu čísel, farebne označených polí a upozornení na veci, o ktorých ste nikdy nepočuli. Prirodzenou reakciou je panika. Skóre je červené. Sedemnásť auditov zlyhalo. Web je určite pokazený?

Pravdepodobne nie je. Lighthouse je diagnostický nástroj, nie vysvedčenie. Skóre je syntetický benchmark spustený v laboratórnych podmienkach — často na priškrtenom pripojení, ktoré simuluje telefón strednej triedy z roku 2017. Hovorí vám, ako sa váš web správa v tomto konkrétnom scenári, nie ako ho zažívajú skutoční používatelia v praxi.

Je to dôležité, pretože väčšina tímov sa zafixuje na skóre a stratí kontext. Skóre 65 môže byť v poriadku pre komplexnú webovú aplikáciu s dátami v reálnom čase. Skóre 95 môže stále znamenať slabý zážitok, ak sa optimalizovali nesprávne veci. Skóre je východiskový bod na skúmanie, nie metrika úspechu.

Čo čítať ako prvé: Core Web Vitals

Preskočte celkové skóre výkonu. Posuňte sa nadol do sekcie Metrics a pozrite sa na tri čísla: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) a Interaction to Next Paint (INP). Toto sú Core Web Vitals a sú to jediné výkonnostné metriky, ktoré Google používa ako signál pre hodnotenie vo vyhľadávaní.

• LCP meria, ako dlho trvá vykreslenie najväčšieho viditeľného prvku. Cieľ: pod 2,5 sekundy. Ak ste nad 4 sekundami, používatelia čakajú príliš dlho, kým uvidia zmysluplný obsah.
• CLS meria vizuálnu stabilitu — teda ako veľmi stránka pri načítaní poskakuje. Cieľ: pod 0,1. Ak ste nad 0,25, používatelia omylom klikajú na nesprávne veci, pretože sa tlačidlá pohli.
• INP meria odozvu — ako rýchlo stránka reaguje na kliknutia, ťuknutia a stlačenia klávesov. Cieľ: pod 200 ms. Ak ste nad 500 ms, web pôsobí ťažkopádne.

Tieto tri metriky súvisia so skutočnou frustráciou používateľov. Opravte ich skôr, než sa začnete trápiť čímkoľvek ďalším.

Príležitosti vs. diagnostika: poznajte rozdiel

Lighthouse rozdeľuje svoje zistenia do dvoch kategórií: Opportunities a Diagnostics. Opportunities sú zoradené podľa odhadovanej časovej úspory. Diagnostics poskytujú dodatočný kontext — veci, ktoré môžu byť problémom, ale nemusia.

Začnite s Opportunities. Ak Lighthouse hovorí, že „Eliminate render-blocking resources“ môže ušetriť 1,2 sekundy, je to konkrétne víťazstvo. Ak hovorí, že „Reduce unused JavaScript“ môže ušetriť 0,1 sekundy, refaktoring sa pravdepodobne neoplatí.

Diagnostics sú zložitejšie. „Avoid an excessive DOM size“ znie zle, ale ak je vaše CLS v poriadku a INP je rýchle, veľký DOM nemusí nikomu škodiť. Diagnostika sú indície, nie príkazy. Skúmajte tie, ktoré súvisia s vašimi skutočnými metrikami.

Audity, ktoré zvyčajne môžete ignorovať

Niektoré upozornenia Lighthouse sú pozostatkové alebo príliš agresívne. Tu sú tie, ktoré spôsobujú najviac zbytočnej paniky:

• „Does not use passive listeners to improve scrolling performance“ — Ide o mikrooptimalizáciu, ktorá len zriedka výrazne pohne výsledkom. Ak nemáte dôkaz o trhanom posúvaní, preskočte ju.
• „Image elements do not have explicit width and height“ — Toto je dôležité pre CLS, ale len vtedy, ak obrázky spôsobujú posuny rozloženia. Ak už máte CLS dobré, nereštrukturalizujte kód len kvôli auditu.
• „Serve images in next-gen formats“ — Áno, WebP a AVIF sú menšie. Ak sú však vaše obrázky už optimalizované a LCP je rýchle, je to príjemné zlepšenie, nie kríza.
• „Avoid enormous network payloads“ — Lighthouse označí čokoľvek nad 1,6 MB. Ale 2 MB stránka, ktorá sa načíta rýchlo, je lepšia než 500 KB stránka, ktorá blokuje vykresľovanie. Sústreďte sa na to, ako sa bajty doručujú, nielen na ich celkový objem.

Čo robiť, keď je všetko červené

Ak je vaše skóre Lighthouse pod 50 a väčšina auditov zlyháva, pravdepodobne riešite jednu z troch koreňových príčin:

1. Neoptimalizované písma. Webové písma sú na väčšine webov stále najjednoduchším výkonnostným ziskom. Skontrolujte, či nenačítavate šesť rezov písma, keď používate len dva, alebo či neposielate súbory WOFF namiesto WOFF2.
2. CSS a JavaScript blokujúce vykresľovanie. Ak je váš First Contentful Paint (FCP) nad 3 sekundami, niečo bráni prehliadaču vykresľovať. Hľadajte veľké CSS súbory alebo synchrónne skripty v <head>.
3. Príliš veľké obrázky. Ak je váš LCP prvok obrázok a má 4 MB, toto je váš problém. Komprimujte ho, obrázky pod prvým zobrazením načítavajte lazy-loadom a použite syntax pre responzívne obrázky.

Opravte jednu z týchto vecí a spustite Lighthouse znova. Často uvidíte skok o 20 – 30 bodov. Potom sa pustite do ďalšej.

Laboratórne dáta vs. dáta z terénu: kontrola reality

Lighthouse beží v laboratóriu. Simuluje pomalé pripojenie a pomalé zariadenie, ale nedokáže simulovať skutočné správanie používateľov — ako ľudia posúvajú stránku, na čo klikajú, či sú na nestabilnej Wi-Fi.

Ako kontrolu reality porovnajte výsledky Lighthouse s dátami z terénu z Chrome User Experience Report (CrUX). CrUX ukazuje, ako skutoční používatelia Chrome zažívali váš web počas posledných 28 dní. Ak Lighthouse hovorí, že vaše LCP je 4 sekundy, ale CrUX ukazuje 2 sekundy, dôverujte CrUX. Ak sú zlé obe, máte skutočný problém.

Dáta CrUX nájdete v PageSpeed Insights (webovej verzii Lighthouse) alebo v Google Search Console v časti „Core Web Vitals“. Ak sa výsledky nezhodujú, zistite prečo. Možno sú vaši skutoční používatelia na rýchlejších sieťach. Možno Lighthouse testuje neoptimalizovaný vývojový build.

Kedy znova spustiť Lighthouse

Lighthouse je šumový. Spustite ho trikrát po sebe a dostanete tri rôzne skóre, dokonca aj na tej istej stránke. Je to preto, že výkon je premenlivý — procesy na pozadí, kolísanie siete a heuristiky prehliadača ovplyvňujú výsledok.

Ak chcete získať stabilný základ, spustite Lighthouse v anonymnom režime so zakázanými všetkými rozšíreniami alebo použite CLI s príznakom --preset=desktop pre konzistentnejšie výsledky. Spustite ho trikrát a skóre spriemerujte. Ak vidíte veľké výkyvy (viac než 10 bodov), niečo iné nie je v poriadku — možno je pomalý server alebo stránka zakaždým načítava iné zdroje.

Spustite Lighthouse znova po každej významnej zmene. Nasadili ste novú stratégiu písiem? Skontrolujte LCP. Zapli ste lazy-load obrázkov? Skontrolujte CLS. Pridali ste skript tretej strany? Skontrolujte INP. Výkon nie je jednorazová oprava; je to rozpočet, ktorý si strážite.

Nástroje, ktoré vám pomôžu konať podľa zistení Lighthouse

Lighthouse vám povie, čo je pomalé. Nie vždy vám povie, ako to opraviť. Na to potrebujete ďalšie nástroje:

• WebPageTest vám poskytne filmstrip pohľad na to, ako sa stránka načítava, snímku po snímke. Je nevyhnutný pri diagnostike problémov s LCP a CLS.
• Chrome DevTools Performance panel vám presne ukáže, ktorý JavaScript blokuje hlavné vlákno. Použite ho na nájdenie príčiny zlého skóre INP.
• Nástroje na kompresiu obrázkov vám umožnia optimalizovať obrázky priamo v prehliadači, čo je rýchlejšie a súkromnejšie než nahrávanie do služby tretej strany. Spracovanie obrázkov na strane klienta je výhra pre súkromie, pretože vaše obrázky nikdy neopustia vaše zariadenie.

Lighthouse je východiskový bod. Tieto nástroje vám pomôžu prácu dokončiť.

Kľúčové poznatky

• Vaše skóre Lighthouse je laboratórny benchmark, nie meradlo používateľského zážitku v reálnom svete. Skôr než spanikárite, porovnajte ho s dátami z terénu z CrUX.
• Najprv sa zamerajte na Core Web Vitals (LCP, CLS, INP). Sú to metriky, ktoré súvisia s frustráciou používateľov a vplyvom na SEO.
• Uprednostňujte Opportunities podľa odhadovanej časovej úspory. Ignorujte Diagnostics, ktoré nesúvisia s vašimi skutočnými problémami s výkonom.
• Niektoré audity — napríklad pasívne listenery alebo formáty obrázkov novej generácie — sú mikrooptimalizácie. Najprv opravte veľké veci.
• Spustite Lighthouse trikrát a výsledky spriemerujte. Výkon je premenlivý a jedno spustenie môže zavádzať.

FAQ

Q: Prečo sa moje skóre Lighthouse mení pri každom spustení?
A: Lighthouse meria výkon za premenlivých podmienok — rýchlosť siete, zaťaženie CPU a heuristiky prehliadača ovplyvňujú výsledok. Spustite ho trikrát v anonymnom režime a skóre spriemerujte, aby ste získali stabilnejší základ.

Q: Mám optimalizovať najprv pre mobil alebo desktop?
A: Mobil. Lighthouse predvolene používa mobilnú simuláciu, pretože väčšina webovej návštevnosti je mobilná a mobilné zariadenia sú pomalšie. Ak je vaše mobilné skóre dobré, desktopové skóre bude zvyčajne v poriadku.

Q: Moje skóre Lighthouse je 95, ale web stále pôsobí pomaly. Čo je zle?
A: Lighthouse meria načítanie stránky, nie interaktivitu po načítaní. Skontrolujte skóre INP a pomocou Chrome DevTools Performance panel profilujte, čo sa deje, keď používatelia klikajú alebo posúvajú stránku. Možno máte problém s JavaScriptom, ktorý Lighthouse nezachytí.

Q: Potrebujem dokonalé skóre 100?
A: Nie. Skóre 90+ je vynikajúce. Naháňanie stovky často znamená optimalizovať veci, na ktorých používateľom nezáleží. Sústreďte sa na skutočné metriky — LCP, CLS, INP — a skóre ignorujte.

Q: Môžem dôverovať Lighthouse, ak používam veľa skriptov tretích strán?
A: Lighthouse označí skripty tretích strán ako problém, ale nie vždy dokáže rozlíšiť medzi potrebnými a nepotrebnými. Použite audity „Avoid enormous network payloads“ a „Reduce JavaScript execution time“ na identifikáciu najhorších vinníkov a potom sa rozhodnite, či sa ich oplatí ponechať.

Zdroje

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