Zašto brzina važi
Pola ljudi zatvori web stranicu koja se učitava duže od 3 sekunde. Tvoji posjetitelji neće svi imati nov mobitel na brzom Wi-Fi-ju – neki će imati stariji mobitel u vlaku. Šef projekta misli i na njih.
Dobra vijest: najveći poticaj brzine možeš dobiti od jedne stvari – slika. Fotografija izravno s mobitela lako može biti 5 MB; web stranici treba desetina toga.
Pokazat ću ti: mjerenje s Lighthouseom
Lighthouse je mjerni alat ugrađen u Chrome:
- Otvori web stranicu (uživo verziju, ne localhost).
- F12 → kartica Lighthouse → Analyze page load.
- Dobit ćeš ocjenu 0–100 za performanse, pristupačnost, SEO – i najvažnije, popis konkretnih savjeta što poboljšati.
Najčešći savjeti i što učiniti:
| Lighthouse savjet | Što učiniti |
|---|---|
| Properly size images | smanji slike (vidi dolje) |
| Serve images in next-gen formats | spremi ih kao WebP |
| Image elements do not have width/height | dodaj atribute width i height |
| Links do not have descriptive text | umjesto “klikni ovdje” reci kamo poveznica vodi |
Smanji slike
- Dimenzije: web stranici treba oko 1200px širine (hero fotografija) ili oko 600px (obična fotografija). Možeš smanjiti u bilo kojem uređivaču, čak i online (npr. squoosh.app).
- Format: WebP je oko trećinu manji od JPG-a uz istu kvalitetu.
- Lazy loading: slike ispod pregiba učitavaju se tek kad posjetitelj skrola do njih:
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />Sad si ti na redu 💪
- Izmjeri web stranicu s Lighthouseom i zapiši ocjenu performansi – to je tvoja početna linija.
- Pronađi 3 najveće slike na web stranici (F12 → Network → sortiraj po Size).
- Smanji ih (dimenzije + WebP) i dodaj
loading="lazy"na sve osim prve slike na vrhu. - Izmjeri ponovo i usporedi ocjene. Zapiši u
LAUNCH.md: prije → poslije. - Bonus: testiraj web stranicu na mobitelu s isključenim Wi-Fi-jem. Kako je?
Ne očekuj 100 bodova. Čak i velike web stranice imaju 70–90. Važan je napredak: s 60 na 85 je pobjeda koju posjetitelji stvarno primijete.
Provjera: Znaš Lighthouse ocjenu prije i poslije. Slike su smanjene, u WebP-u i koriste lazy loading. Web stranica se osjetno brže učitava na mobitelu.
Što ćeš ponijeti iz ove lekcije
- Brzina = posjetitelji ostaju. 3 sekunde je granica.
- Lighthouse točno kaže što poboljšati.
- Najveća poluga: manje slike (dimenzije, WebP, lazy loading).
© 2026 Ing. Martin Polak / AlgoRhino · Uvjeti korištenja sadržaja