Zašto je Lighthouse rezultat loš iako je web brz?

Otvorite svoju web stranicu.

Učita se gotovo odmah.

Navigacija radi.

Slike se brzo pojavljuju.

Sve djeluje potpuno normalno.

Zatim otvorite Lighthouse ili PageSpeed Insights i dobijete:

Performance: 62

Prva reakcija često je:

Kako je moguće da je rezultat toliko loš kada meni web radi brzo?

Odgovor je jednostavan.

Vaš subjektivni osjećaj brzine i Lighthouse test ne mjere potpuno istu stvar.

Na vlastitom računalu možda imate:

• brz procesor
• brzu internetsku vezu
• već cacheirane resurse
• prethodno učitane fontove
• moderan browser

Lighthouse pokušava web analizirati u kontroliranijim i često zahtjevnijim uvjetima.

Zato nizak rezultat ne mora značiti da je web potpuno spor.

Ali isto tako ne treba automatski zaključiti da Lighthouse “nije bitan”.

Loš rezultat vrlo često otkrije tehničke probleme koje na vlastitom uređaju jednostavno ne primjećujete.

Što je Lighthouse?

Lighthouse je alat za automatsku analizu web stranice.

Može analizirati nekoliko područja, među kojima su:

• performance
• accessibility
• best practices
• SEO

Kod performansi pokušava procijeniti koliko kvalitetno stranica radi u određenim testnim uvjetima.

Ne gleda samo:

koliko sekundi je trajao download cijele stranice.

Analizira različite dijelove iskustva.

Primjerice:

• kada korisnik vidi glavni sadržaj
• koliko se stranica blokira
• pomiče li se layout
• koliko JavaScripta browser mora obraditi

Zato Performance rezultat nije običan timer.

Lab test

Lighthouse koristi laboratorijsko testiranje.

To znači da se web testira u kontroliranim uvjetima.

To je korisno jer test možemo ponavljati i uspoređivati rezultate.

Primjer:

Prije optimizacije:

Performance 58

Nakon optimizacije hero slike:

Performance 76

Možemo vidjeti da je promjena imala pozitivan utjecaj.

Ali lab test nije isto što i iskustvo svakog stvarnog korisnika.

Vaš uređaj nije prosjek

Ako razvijate web na modernom računalu i brzoj vezi, vrlo lako možete dobiti pogrešan dojam.

Vaše računalo možda ima:

• snažan CPU
• 32 GB RAM-a
• gigabitni internet
• dobar Wi-Fi

Korisnik može imati:

• nekoliko godina star Android
• slabiji procesor
• mobilnu mrežu
• nizak signal

JavaScript koji vaše računalo obradi gotovo trenutno na slabijem uređaju može predstavljati puno veći problem.

Zato:

Kod mene se učitava brzo.

nije dovoljan performance test.

Cache vara

Postoji još jedan razlog zašto vam vlastiti web često djeluje posebno brz.

Već ste ga otvorili.

Browser možda već ima cacheirane:

• CSS datoteke
• JavaScript
• fontove
• logo
• slike

Kod sljedećeg posjeta ne mora ih sve ponovno preuzimati.

Novi korisnik nema tu prednost.

Njegov prvi posjet često je puno važniji za performance analizu.

Prvi posjet

Zamislimo potencijalnog klijenta koji na Googleu pronađe vašu stranicu.

To je njegov prvi posjet.

Browser nema:

• vaš font
• CSS
• JavaScript
• slike

Sve mora dobiti prvi put.

Upravo taj trenutak treba biti kvalitetan.

Ne samo ponovno otvaranje weba na računalu osobe koja ga je razvila.

Jedan broj skriva puno toga

Performance rezultat izgleda jednostavno:

72

Ali iza njega se nalazi nekoliko metrika i dijagnostičkih podataka.

Zato ne treba optimizirati broj.

Treba pronaći:

što uzrokuje loš broj?

Moguće je da web ima:

• odličan server
• male slike
• brz LCP

ali puno JavaScripta koji blokira main thread.

Drugi web može imati potpuno suprotan problem.

Oba mogu završiti s približno sličnim ukupnim rezultatom.

Rješenje nije isto.

LCP

Jedna od važnih stvari koju ćete susresti je Largest Contentful Paint.

LCP promatra koliko brzo korisnik dobiva glavni veliki sadržaj u početnom prikazu.

To često može biti:

• hero fotografija
• veliki naslov
• glavni vizual

Ako je ostatak stranice brz, ali se hero fotografija od nekoliko megabajta dugo učitava, Lighthouse će to primijetiti.

Vama web možda djeluje dovoljno brz jer su:

• navigacija
• pozadina
• tekst

već vidljivi.

Ali glavni element još kasni.

Detaljnije smo ovu metriku objasnili u vodiču što su Core Web Vitals.

CLS

Drugi problem može biti stabilnost layouta.

Stranica se možda učita brzo, ali elementi tijekom učitavanja skaču.

Primjer:

H1 se pojavi.

Nakon toga se učita font.

Naslov postane širi.

Prelomi se u dodatni red.

Sve ispod njega pomakne se prema dolje.

Stranica nije nužno spora.

Ali iskustvo nije potpuno stabilno.

Lighthouse može takve stvari lakše otkriti nego korisnik koji samo površno pogleda vrijeme učitavanja.

JavaScript

Jedan od najvećih razloga za razliku između:

web izgleda brzo

i:

Lighthouse score je loš

može biti JavaScript.

Stranica se vizualno pojavi.

Ali browser u pozadini još obrađuje veliku količinu koda.

To može utjecati na:

• interakciju
• gumbe
• menu
• forme
• animacije

Na snažnom računalu možda nećete primijetiti ništa.

Na slabijem mobitelu razlika može biti značajna.

Main thread

Browser velik dio posla obavlja na glavnom threadu.

Ako je on zauzet dugim zadatkom, druge stvari moraju čekati.

Primjer:

Browser obrađuje veliku JavaScript skriptu.

Korisnik klikne hamburger menu.

Klik se dogodio, ali browser još nije spreman obraditi reakciju.

Korisnik osjeća kašnjenje.

To je jedan od razloga zašto web može biti vizualno učitan, ali još ne djelovati potpuno responzivno.

Veliki bundle

Kod Reacta i drugih JavaScript frameworka lako se može proizvesti velik bundle.

U njemu možda završavaju:

• komponente
• biblioteke
• utilityji
• animacije
• kod koji korisniku još nije potreban

Browser taj kod mora:

1. preuzeti
2. parsirati
3. obraditi
4. izvršiti

Zato veličina JavaScripta nije samo pitanje kilobajta.

Postoji i CPU trošak.

Unused JavaScript

Lighthouse često prijavljuje unused JavaScript.

To znači da je korisnik preuzeo određeni kod koji nije bio potreban za trenutni prikaz stranice.

Primjer:

Na početnoj stranici učitava se kod za:

• kompleksnu galeriju
• booking calendar
• chart biblioteku

iako nijedan od tih elemenata nije trenutno prikazan.

To je nepotreban teret.

Rješenje može biti:

• code splitting
• dynamic import
• uvjetno učitavanje

ovisno o tehnologiji.

WordPress ima isti problem

Problem nije rezerviran samo za React.

WordPress plugin može učitati svoj CSS i JavaScript na svakoj stranici.

Primjer:

Plugin za contact formu koristi se samo na /kontakt/.

Ali njegov CSS i JS učitavaju se i na:

• naslovnoj
• blogu
• uslugama
• projektima

Ako nekoliko pluginova radi isto, brzo se nakupi dosta nepotrebnih resursa.

Third-party skripte

Vrlo čest Lighthouse problem nisu ni tema ni framework.

To su vanjski servisi.

Primjer:

• Google Analytics
• Google Tag Manager
• Meta Pixel
• Microsoft Clarity
• chat widget
• cookie consent
• Hotjar
• remarketing
• embedded video

Svaki od tih alata može biti poslovno opravdan.

Ali zajedno imaju cijenu.

Treba procijeniti:

Trebamo li stvarno sve što se učitava?

Tag Manager

Google Tag Manager je vrlo praktičan.

Ali može postati mjesto gdje se godinama dodaju novi tagovi bez čišćenja starih.

Web developer možda optimizira stranicu do detalja.

A nakon toga GTM učita:

• nekoliko analytics alata
• advertising skripte
• heatmap
• tracking koji se više ne koristi

Zato performance audit treba uključiti i marketinški tracking setup.

Cookie alat

Cookie consent također može imati performance trošak.

Posebno ako koristi kompleksan vanjski sustav.

To ne znači da ga treba ukloniti ako je potreban.

Ali vrijedi provjeriti:

• koliko skripti dodaje
• kada ih učitava
• blokira li sadržaj
• postoje li nepotrebne integracije

Compliance funkcionalnost također treba kvalitetno implementirati.

Chat widget

Chat je još jedan dobar primjer.

Može biti vrijedan poslovni alat.

Ali neki chat widgeti učitavaju značajnu količinu:

• JavaScripta
• CSS-a
• fontova
• dodatnih requestova

Ako gotovo nitko ne koristi chat, treba razmotriti je li njegova poslovna vrijednost dovoljna za cijenu koju svaki posjetitelj plaća.

Slike

Lighthouse score vrlo često ruše slike.

To može biti zbog:

• prevelikih dimenzija
• lošeg formata
• nedovoljne kompresije
• pogrešne responsive verzije
• načina učitavanja

Web na vašoj brzoj vezi može otvoriti sliku od 2 MB vrlo brzo.

Simulirani mobilni korisnik neće nužno imati isto iskustvo.

Zato smo pripremili zaseban vodič o optimizaciji slika za web.

Hero slika

Hero slika posebno često utječe na Lighthouse.

Razlog je jednostavan.

Ona je:

• velika
• odmah vidljiva
• često LCP element

Ako koristite:

3840 × 2160 fotografiju

za prikaz od približno 1200 px, šaljete nepotrebno veliku datoteku.

Ako uz to koristite lazy loading na hero slici, rezultat može biti još lošiji.

Fontovi

Fontovi također mogu biti dio problema.

Primjer:

Web učitava:

• dva font familyja
• šest weightova svakog
• italic verzije

To može značiti velik broj dodatnih fileova.

Fontovi također mogu uzrokovati pomicanje sadržaja nakon učitavanja.

Zato treba optimizirati:

• broj familyja
• weightove
• format
• preload
• fallback

Detaljnije smo to obradili u članku kako fontovi utječu na brzinu weba.

Hosting

Nizak Lighthouse rezultat ne znači automatski da trebate promijeniti hosting.

Ali spor serverski odgovor može biti početak problema.

Ako server dugo čeka prije nego što počne vraćati stranicu, svi frontend resursi kreću kasnije.

Možete savršeno optimizirati slike.

Ako HTML dolazi presporo, ukupno iskustvo i dalje pati.

Više o tome pročitajte u vodiču zašto je dobar hosting važan.

Render-blocking resursi

Browser ne može uvijek odmah prikazati sadržaj.

Određeni CSS i JavaScript resursi mogu blokirati renderiranje dok se ne preuzmu i obrade.

Zato Lighthouse može prijaviti render-blocking resources.

To ne znači:

uklonite sav CSS.

Znači da treba provjeriti:

• treba li taj resurs odmah
• koliko je velik
• može li se drugačije učitati

CSS

Veliki CSS file može sadržavati ogroman broj stilova koji trenutnoj stranici nisu potrebni.

To se često događa kod:

• frameworka
• page buildera
• velikih tema
• pluginova

Ako web koristi samo mali dio svih dostupnih komponenti, korisnik možda svejedno dobiva stilove za cijeli sustav.

To nije uvijek jednostavno riješiti.

Ali vrijedi razumjeti gdje trošak nastaje.

DOM

Lighthouse može upozoriti i na vrlo velik DOM.

Jednostavna vizualna sekcija možda u HTML-u nije tako jednostavna.

Page builder može proizvesti:

Section
└── Wrapper
    └── Container
        └── Inner
            └── Column
                └── Wrapper
                    └── Content

Ako to ponovite stotinama puta, DOM postaje velik.

Browser mora održavati cijelu tu strukturu.

Builder nije automatski problem

Važno je ne zaključiti:

Page builder = spor web.

To nije nužno točno.

Dobar builder web može biti vrlo brz.

Ali builder olakšava dodavanje:

• sekcija
• efekata
• wrappera
• pluginova

pa je lakše izgraditi nepotrebno kompleksnu stranicu.

Problem je način korištenja alata, ne samo alat.

Animacije

Animacije također mogu utjecati na rezultat.

Posebno kompleksne scroll animacije i efekti koji traže puno JavaScripta.

Ako imate:

• parallax
• custom cursor
• scroll reveal
• horizontal scroll
• nekoliko Lottie animacija

web može izgledati impresivno na snažnom računalu.

Ali performance cijena može biti značajna.

Svaki efekt treba opravdati svoju svrhu.

Lighthouse rezultat varira

Još jedna stvar koja zbunjuje korisnike:

Pokrenete test.

Dobijete:

74

Pokrenete ga ponovno.

Dobijete:

81

Pa opet:

68

To ne znači nužno da se web između tri testa promijenio.

Na rezultat mogu utjecati različite okolnosti testa.

Zato nije dobro donositi zaključke na temelju jednog jedinog pokretanja.

Testirajte više puta

Ako radite performance optimizaciju, napravite nekoliko testova.

Tražite obrazac.

Ako dobijete:

• 69
• 71
• 73
• 70

realno ste oko 70.

Ako nakon promjene dobivate:

• 89
• 92
• 90

vrlo vjerojatno ste nešto stvarno poboljšali.

Jedan rezultat od 95 među deset testova od 70 nije dovoljan dokaz.

Produkcija i lokalno

Nemojte performance zaključke donositi samo na development verziji.

Development build može imati:

• debugging
• source mapove
• dodatne provjere
• drugačiji način serviranja resursa

Produkcijski build može se ponašati značajno drugačije.

Konačnu analizu treba raditi na stvarnom produkcijskom setupu ili reprezentativnom stagingu.

Ekstenzije

Kod lokalnog Lighthouse testa browser ekstenzije također mogu utjecati na okruženje.

Za kontroliranije rezultate često ima smisla koristiti:

• Incognito
• zaseban profil
• PageSpeed Insights

ovisno o tome što analizirate.

Cilj je smanjiti vanjske faktore.

PageSpeed i Lighthouse

Ova dva pojma često se koriste kao sinonimi, ali nisu potpuno ista stvar.

Lighthouse je audit engine.

PageSpeed Insights koristi Lighthouse za laboratorijski dio analize, ali može prikazati i podatke stvarnih korisnika kada su dostupni.

Zato PageSpeed stranica može pokazati:

• stvarno korisničko iskustvo
• laboratorijski test

i ta dva rezultata se mogu razlikovati.

To nije kontradikcija.

Mjere različite stvari.

Field podaci

Ako web ima dovoljno stvarnog prometa, field podaci mogu biti posebno vrijedni.

Oni pokazuju kako stranicu doživljavaju pravi korisnici s različitim:

• uređajima
• vezama
• lokacijama

To je drugačije od jednog simuliranog Lighthouse testa.

Zato ne treba gledati samo veliki Performance broj.

Core Web Vitals su važniji kontekst

Ako Lighthouse rezultat nije savršen, ali stvarni Core Web Vitals podaci pokazuju dobro iskustvo, situacija je puno manje zabrinjavajuća nego kada i stvarni korisnici imaju probleme.

Zato prije panike pogledajte širi kontekst.

Naš vodič što su Core Web Vitals detaljnije objašnjava razliku između laboratorijskih i stvarnih podataka.

Score nije SEO pozicija

Lighthouse Performance rezultat od 100 ne znači:

Google će vas rangirati na prvo mjesto.

Isto tako rezultat 70 ne znači:

Google će vas kazniti.

SEO uključuje puno više:

• relevantnost
• kvalitetu sadržaja
• search intent
• interne linkove
• backlinkove
• tehničku ispravnost

Performance je dio ukupne kvalitete.

Ne cijeli SEO.

Ne uklanjajte korisne stvari zbog scorea

Recimo da imate kvalitetnu interaktivnu kalkulaciju koju korisnici stvarno koriste.

Dodaje određeni JavaScript.

Lighthouse rezultat padne s:

98 na 94

Nema smisla automatski ukloniti korisnu funkcionalnost samo zbog četiri boda.

Performanse treba optimizirati u kontekstu poslovne vrijednosti.

Cilj nije imati najbolji testni rezultat.

Cilj je imati kvalitetan web.

Ali ne koristite to kao izgovor

S druge strane, vrlo je lako reći:

Lighthouse nije bitan.

i ignorirati:

• sliku od 6 MB
• 1,5 MB nepotrebnog JavaScripta
• ogromni DOM
• loš server response

To nije dobar pristup.

Lighthouse je odličan dijagnostički alat.

Samo ga treba pravilno interpretirati.

Crveno prvo

Ako imate Performance 45, nemojte prvo loviti sitnu optimizaciju koja će donijeti jedan bod.

Pogledajte najveće probleme.

Često to mogu biti:

1. ogromne slike
2. spor LCP
3. previše JavaScripta
4. third-party skripte
5. spor server
6. render-blocking resursi

Rješavanje jednog velikog problema može dati puno veći rezultat od deset mikrooptimizacija.

Opportunities

Lighthouse daje listu mogućnosti za poboljšanje.

Primjerice:

• optimizirajte slike
• smanjite unused JavaScript
• poboljšajte cache
• eliminirajte render-blocking resurse

To je korisna lista.

Ali nije automatski task list koju treba slijepo izvršiti od vrha prema dnu.

Prvo treba razumjeti zašto se problem pojavljuje.

Diagnostics

Diagnostics daju dodatni kontekst.

Mogu pokazati stvari poput:

• velikog main-thread rada
• velikog JavaScript execution timea
• kompleksnog DOM-a
• velikih payloadova

Takve informacije developeru mogu pomoći pronaći pravi uzrok problema.

Performance audit je početak istrage.

Ne konačno rješenje.

Network panel

Ako vidite:

Avoid enormous network payloads

otvorite Network panel.

Sortirajte resurse prema veličini.

Odmah možete vidjeti:

• slike
• video
• JavaScript
• fontove

koji zauzimaju najviše.

To je puno korisnije od pokušaja nasumične optimizacije.

Performance panel

Za probleme povezane s JavaScriptom i interakcijama Performance panel može dati puno detaljniju sliku.

Možete vidjeti:

• što main thread radi
• koliko dugo traju taskovi
• gdje nastaje blokiranje
• što se događa tijekom učitavanja

Lighthouse može reći:

postoji problem.

Performance profiling može pomoći odgovoriti:

zašto postoji problem?

Testirajte templateove

Nemojte testirati samo naslovnu.

Web može imati:

Naslovna: 96

ali:

Blog: 75

Proizvod: 54

Checkout: 63

Razlog je što različiti templateovi imaju različite:

• slike
• skripte
• komponente
• funkcionalnosti

Kod poslovnog weba provjerite barem:

• početnu
• glavnu uslugu
• blog članak
• kontakt

Kod webshopa dodatno:

• kategoriju
• proizvod
• košaricu
• checkout

Najvažnija stranica nije uvijek početna

Ako 80% organskog prometa dolazi direktno na blog članke, njihova kvaliteta može biti važnija od savršenog scorea početne.

Ako većina Google Ads kampanje vodi na landing stranicu, optimizirajte nju.

Performance prioritete treba povezati s ponašanjem stvarnih korisnika.

Prije i poslije

Kod svake veće optimizacije dobro je napraviti mjerenje prije.

Primjer:

Prije

Performance: 61
Hero: 2,4 MB
11 font datoteka
velik unused JS

Promjene

• hero WebP 230 KB
• uklonjena 4 font weighta
• odgođen chat
• uklonjen nepotreban plugin

Nakon

Performance: 88

Tada znate što ste napravili i kakav je efekt.

Jedna promjena

Kod debugginga je korisno ne promijeniti sve odjednom.

Ako istovremeno:

• promijenite hosting
• komprimirate slike
• uklonite pluginove
• promijenite temu
• prebacite fontove

i score poraste, ne znate što je stvarno riješilo problem.

Kod ozbiljnije optimizacije promjene treba raditi kontrolirano.

Nemojte instalirati pet optimization pluginova

Kod WordPressa postoji iskušenje:

Lighthouse je loš.

Instaliraj:

• cache plugin
• image plugin
• JS optimization plugin
• database optimization plugin
• još jedan cache plugin

Više optimization pluginova ne znači nužno bolji rezultat.

Mogu nastati:

• konflikti
• dupli cache
• pokvareni scriptovi
• teško održavanje

Bolje je razumjeti problem i koristiti minimalan broj potrebnih alata.

Cache može sakriti problem

Cache može napraviti veliku razliku.

Ali ako samo cacheirate vrlo težak web, underlying problem i dalje postoji.

To se može pokazati:

• u administraciji
• kod prijavljenih korisnika
• u checkoutu
• nakon čišćenja cachea

Zato treba optimizirati i samu aplikaciju.

Lighthouse nije cilj projekta

Performance treba definirati kao jedan od kriterija kvalitete.

Uz:

• UX
• SEO
• accessibility
• sadržaj
• funkcionalnost

Ako samo lovimo Lighthouse 100, lako je izgubiti širu sliku.

Primjerice, možemo ukloniti sve slike i dobiti bržu stranicu.

Ali ako prodajemo interijere, portfolio bez fotografija nema poslovnog smisla.

Dobar rezultat

Ne postoji jedan Lighthouse broj koji bi svaki web morao postići pod svaku cijenu.

Važnije je:

• postoje li ozbiljni problemi
• kakvi su Core Web Vitals
• kako web radi na stvarnim uređajima
• postoji li nepotreban tehnički teret

Web s vrlo dobrim iskustvom i rezultatom u visokim 80-ima ili 90-ima ne treba nužno radikalan zahvat samo zbog nekoliko preostalih bodova.

Web s rezultatom 40 i velikim tehničkim problemima zaslužuje ozbiljniju analizu.

Prioritet korisniku

Najvažnije pitanje ostaje:

Kako web radi stvarnom korisniku?

Treba li čekati?

Pomiče li se sadržaj?

Reagira li menu odmah?

Može li brzo doći do cijene?

Radi li kontakt forma?

Lighthouse nam može pomoći pronaći tehničke prepreke.

Ali korisnički cilj određuje jesu li te prepreke stvarno važne.

Ako želite krenuti od šire performance slike, pročitajte kako brzina weba utječe na korisnike i SEO.

Za optimizaciju glavnih vizuala pogledajte kako optimizirati slike za web, a za metrike koje mjere stvarno iskustvo pročitajte što su Core Web Vitals.

Ako planirate novu poslovnu stranicu, pogledajte naše pakete i cijene izrade web stranica.