Melyek a frontend teljesítményjavításának fő módszerei?

Question

IT Interview Practice · Accepted Answer

**A felhasználói folyamat ténylegesen lassú részét optimalizáld, majd mérd a javulást.** Kisebb bundle akkor érték, ha javítja az élményt vagy releváns költséget csökkent.

Tegyük fel, átlagos telefonon a termék főképe későn jelenik meg, és a változatválasztás is késik. Betöltés és interakció külön probléma; egy optimalizálás nem feltétlenül javítja mindkettőt.

## 1. Reprezentatív méréssel határozd meg a tünetet

Válassz fontos folyamatot, eszközt és hálózatot. Valódi felhasználói adatokkal keresd az érintetteket, kontrollált böngészőteszttel ismételd meg a hibát. Erős fejlesztői gép elfedheti a vásárlók késését.

- Az LCP a legnagyobb látható tartalomelem megjelenését méri, segítve a betöltés értékelését.
- Az INP az oldal látogatása alatti interakciós válaszkészséget írja le.
- A CLS váratlan elrendezéseltolódást mér, például egy betöltődő kép miatti ugrást.

Ezek a [Core Web Vitals](https://web.dev/articles/vitals) az élmény más részeit mérik. Kapcsold őket tényleges feladathoz, például változatválasztáshoz és kosárba helyezéshez, hogy jobb szám ne fedjen el hibás működést.

## 2. Keresd meg, mi késlelteti a fontos tartalmat

Nézd a kérések vízesésdiagramját: az erőforrások felismerését, letöltését és befejezését. A fő kép talán csak a JavaScript és termék-API után kezd töltődni.

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

A képtömörítés a letöltést javítja, de korábbi felismerés a megelőző várakozást is eltüntetheti. Megfelelő esetben szerveres vagy statikus generálással adj hasznos terméktartalmat a kezdeti HTML-ben. Ellenőrizd a frissességet, szerverköltséget és interakcióhoz még szükséges JavaScriptet.

## 3. Csökkentsd a felesleges átvitelt és futást

A kritikus út megértése után vedd ki a jelenlegi képernyőt nem segítő munkát. Mért késéshez kötött változtatást válassz minden optimalizálás válogatás nélküli alkalmazása helyett.

- Megfelelő méretű és formátumú képet adj. Képernyőn kívül lehet lusta betöltés, de a várt főképet ne késleltesd.
- Útvonal vagy funkció szerint bontsd a kódot, hogy a termékoldal ne töltse a nem használt adminfelületet.
- Távolítsd el a felesleges függőségeket, és vizsgáld a külső scriptek hálózati és főszálköltségét.
- Tömöríts megfelelő szöveges választ, cache-elj verziózott statikus erőforrást; személyes adatra külön biztonságos szabály kell.

Kisebb fájl kevesebb átvitel, de a böngésző továbbra is feldolgoz és végrehajt. A hálózati és CPU-hatást is nézd a siker kimondása előtt.

## 4. Az interakció lassulását az okánál javítsd

Lassú változatválasztásnál profilozd a főszálat, amely sok scriptet és megjelenítést végez. Hosszú számítás minden fájl letöltése után is blokkolhatja a választ.

Bontsd a hosszú munkát, vagy megfelelő számítást vigyél workerre. Gyorsan változó bemenetnél kerüld a fölös kérést, és ne hagyd a régi választ felülírni az új választást. Memoizációt mért drága ismétlésre használj, ne automatikus díszítésként.

Hosszú listánál csak a látható rész megjelenítése csökkenti a munkát, de a billentyűzetes használat és akadálymentesség maradjon meg. Képnek és késői tartalomnak foglalj helyet az ugrások ellen. Külön tüneteket oldanak meg: mindet az eredeti problémával ellenőrizd.

## 5. Ellenőrizd a teljes folyamatot változtatás után

Ismételd ugyanazt a kontrollált tesztet, majd figyeld az éles felhasználókat. A sebesség mellett vizsgáld a helyességet, billentyűzetet, kosárfolyamatot és esetleges többlet-backendterhelést.

Állíts gyakorlati erőforráskereteket és figyelj visszaesést. Jó laborszám nem elég, ha a valódi vásárló vár vagy nem végez. **A végeredmény gyorsabb, stabil és használható folyamat legyen, előtte–utána mérésekkel alátámasztva.**

1. Reprezentatív méréssel határozd meg a tünetet

2. Keresd meg, mi késlelteti a fontos tartalmat

3. Csökkentsd a felesleges átvitelt és futást

4. Az interakció lassulását az okánál javítsd

5. Ellenőrizd a teljes folyamatot változtatás után

Kapcsolódó kérdések