Koji su glavni načini optimizacije performansi frontenda?

Question

IT Interview Practice · Accepted Answer

**Optimizirajte dio korisničkog puta koji je stvarno spor, zatim izmjerite korist promjene.** Manji paket koda vrijedi ako poboljšava iskustvo ili smanjuje relevantne troškove.

Pretpostavimo da kupci na običnim telefonima otvore proizvod, kasno vide glavnu sliku i osjećaju zastoj pri odabiru varijante. Učitavanje i interakcija različiti su problemi; jedna optimizacija možda neće riješiti oba.

## 1. Utvrdite simptom reprezentativnim mjerenjima

Odaberite važan put, uređaj i mrežne uvjete. Mjerenjima stvarnih korisnika pronađite pogođenu skupinu, a kontroliranim testovima preglednika ponovite problem. Snažno razvojno računalo može sakriti kašnjenja kupaca.

- LCP mjeri kada je prikazan najveći vidljivi element sadržaja i pomaže procijeniti učitavanje.
- INP opisuje odziv na korisničke interakcije tijekom posjeta.
- CLS mjeri neočekivane pomake rasporeda, primjerice kada slika pomakne sadržaj.

Ti [Core Web Vitals](https://web.dev/articles/vitals) opisuju različite dijelove iskustva. Povežite ih sa stvarnim zadatkom, poput izbora varijante i dodavanja u košaricu, kako bolji broj ne bi sakrio pogrešno ponašanje.

## 2. Pronađite što zadržava važan sadržaj

Pregledajte mrežnu vremensku crtu zahtjeva koja pokazuje otkrivanje, preuzimanje i završetak resursa. Glavna slika proizvoda možda počinje tek nakon JavaScripta i završetka API poziva.

```text
HTML -> JavaScript -> Product API -> Main image
```

Kompresija slike ubrzava prijenos, ali ranije otkrivanje može ukloniti prethodno čekanje. Razmotrite koristan sadržaj proizvoda u početnom HTML-u kroz serversko ili statičko generiranje gdje odgovara. Provjerite svježinu, trošak poslužitelja i JavaScript još potreban za interaktivnost.

## 3. Smanjite nepotreban prijenos i izvršavanje

Kad razumijete kritični put, uklonite rad koji ne koristi trenutnom prikazu. Birajte promjene povezane s izmjerenim zastojem umjesto nasumičnog primjenjivanja svih optimizacija.

- Poslužujte slike odgovarajuće veličine i formata. Odgodite slike izvan zaslona, ali ne glavnu koju korisnik čeka.
- Podijelite kod po ruti ili značajci da proizvod ne učitava neupotrijebljenu administraciju.
- Uklonite suvišne ovisnosti i pregledajte vanjske skripte koje troše mrežu i glavnu dretvu.
- Komprimirajte prikladne tekstualne odgovore i predmemorirajte verzionirane statičke resurse. Za osobne podatke odredite zasebna sigurna pravila.

Manje datoteke smanjuju prijenos, ali preglednik i dalje analizira i izvršava kod. Provjerite mrežu i CPU prije proglašenja uspjeha.

## 4. Popravite uzrok sporih interakcija

Ako izbor varijante kasni, profilirajte glavnu dretvu koja obavlja velik dio skripti i prikaza. Dug izračun može zaustaviti reakciju i nakon učitavanja svih datoteka.

Podijelite dug rad ili prikladan izračun prenesite workeru. Za često promjenjive ulaze izbjegnite suvišne zahtjeve i spriječite da stariji odgovor prepiše noviji izbor. Memoizaciju koristite kada mjerenje pokaže skup ponovljeni izračun, ne kao automatski dodatak.

Kod vrlo dugih popisa prikaz samo vidljivog dijela smanjuje rad, ali očuvajte tipkovnicu i pristupačnost. Rezervirajte prostor za slike i odgođeni sadržaj da raspored ne skače. To su rješenja različitih simptoma pa svako provjerite prema izvornom problemu.

## 5. Provjerite cijeli put nakon promjene

Ponovite isti kontrolirani test, pa pratite stvarne korisnike nakon objave. Provjerite funkcionalnu ispravnost, tipkovnicu, dovršetak košarice i dodatno opterećenje backenda uz pokazatelje brzine.

Postavite praktične budžete važnih resursa i pratite regresije. Dobar laboratorijski rezultat nije dovoljan ako kupci i dalje čekaju ili ne završavaju zadatak. **Konačni rezultat treba biti brži, stabilan i upotrebljiv put, potkrijepljen mjerenjima prije i poslije.**

1. Utvrdite simptom reprezentativnim mjerenjima

2. Pronađite što zadržava važan sadržaj

3. Smanjite nepotreban prijenos i izvršavanje

4. Popravite uzrok sporih interakcija

5. Provjerite cijeli put nakon promjene

Povezana pitanja