Kokie pagrindiniai frontend našumo optimizavimo būdai?

Question

IT Interview Practice · Accepted Answer

**Optimizuokite iš tikrųjų lėtą naudotojo kelio dalį ir išmatuokite, ar pakeitimas padėjo.** Mažesnis paketas naudingas, kai gerina patirtį arba mažina svarbias sąnaudas.

Tarkime, įprastu telefonu atidarius produktą pagrindinis vaizdas pasirodo vėlai, o varianto pasirinkimas vėluoja. Krovimas ir sąveika yra atskiros problemos, todėl viena optimizacija nebūtinai pataisys abi.

## 1. Patvirtinkite simptomą reprezentatyviais matavimais

Pasirinkite produktui svarbų kelią, įrenginį ir tinklą. Realių naudotojų matavimais raskite paveiktą grupę, o kontroliuojamais naršyklės bandymais atkurkite problemą. Galingas kūrėjo kompiuteris gali slėpti klientų patiriamą delsą.

- LCP matuoja didžiausio matomo turinio elemento atvaizdavimo laiką ir padeda vertinti krovimą.
- INP apibūdina reakciją į naudotojo sąveikas per apsilankymą.
- CLS matuoja netikėtus išdėstymo poslinkius, pavyzdžiui, tekstui pasislinkus atsiradus vaizdui.

Šie [Core Web Vitals](https://web.dev/articles/vitals) nusako skirtingas patirties dalis. Susiekite juos su tikra užduotimi, tokia kaip varianto pasirinkimas ir įdėjimas į krepšelį, kad geresnis skaičius neslėptų neveikiančios funkcijos.

## 2. Raskite, kas vėlina svarbų turinį

Peržiūrėkite užklausų laiko diagramą, rodančią išteklių aptikimą, siuntimą ir užbaigimą. Produkto vaizdas gali pradėti krautis tik po JavaScript ir API užklausos.

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

Vaizdo suspaudimas spartina siuntimą, bet ankstesnis aptikimas pašalina ankstesnį laukimą. Kur tinka, naudingą produkto turinį įtraukite į pradinį HTML serverio atvaizdavimu ar statiniu generavimu. Tikrinkite naujumą, serverio kainą ir interaktyvumui vis dar reikalingą JavaScript.

## 3. Mažinkite nereikalingą siuntimą ir vykdymą

Supratę kritinį kelią pašalinkite dabartiniam ekranui nenaudingą darbą. Pirmenybę teikite su išmatuota delsa susietoms pataisoms, ne visų optimizacijų taikymui iš eilės.

- Siųskite tinkamo dydžio ir formato vaizdus. Už ekrano esančius kraukite vėliau, bet neatidėkite pagrindinio laukiamo vaizdo.
- Skaidykite kodą pagal maršrutą ar funkciją, kad produkto puslapis nekrautų nenaudojamos administravimo sąsajos.
- Šalinkite nereikalingas priklausomybes ir peržiūrėkite trečiųjų šalių skriptus, naudojančius ir tinklą, ir pagrindinę giją.
- Suspauskite tinkamus tekstinius atsakymus ir talpinkite versijuotus statinius išteklius podėlyje. Asmeniniams duomenims nustatykite atskiras saugias taisykles.

Mažesnius failus vis tiek reikia analizuoti ir vykdyti. Prieš skelbdami sėkmę tikrinkite ir tinklo, ir CPU poveikį.

## 4. Taisykite lėtos sąveikos priežastį

Jei varianto pasirinkimas vėluoja, profiliuokite pagrindinę giją, atliekančią daug skriptų ir atvaizdavimo. Ilgas skaičiavimas gali blokuoti reakciją net visiems failams jau užsikrovus.

Skaidykite ilgą darbą arba tinkamus skaičiavimus perkelkite į darbuotoją. Dažnai kintančiai įvesčiai venkite nereikalingų užklausų ir neleiskite senam atsakymui perrašyti naujo pasirinkimo. Memoizaciją naudokite, kai matavimai rodo brangų kartojimą, o ne kaip įprastą priedą.

Labai ilgiems sąrašams rodykite tik matomą dalį, bet išsaugokite klaviatūros navigaciją ir prieinamumą. Rezervuokite vietą vaizdams ir vėluojančiam turiniui, kad išdėstymas nešokinėtų. Tai skirtingų simptomų sprendimai, todėl kiekvieną tikrinkite pagal pradinę problemą.

## 5. Po pakeitimo patikrinkite visą kelią

Pakartokite tą patį kontroliuojamą testą, o po leidimo stebėkite realius naudotojus. Be našumo tikrinkite produkto teisingumą, klaviatūrą, krepšelio užbaigimą ir padidėjusią serverio apkrovą.

Svarbiems ištekliams nustatykite praktiškus biudžetus ir stebėkite pablogėjimą. Geras laboratorinis balas nepakanka, jei klientai vis dar laukia ar nebaigia užduoties. **Galutinis rezultatas turi būti greitesnis, stabilus ir naudojamas kelias, pagrįstas matavimais prieš ir po pakeitimo.**

1. Patvirtinkite simptomą reprezentatyviais matavimais

2. Raskite, kas vėlina svarbų turinį

3. Mažinkite nereikalingą siuntimą ir vykdymą

4. Taisykite lėtos sąveikos priežastį

5. Po pakeitimo patikrinkite visą kelią

Susiję klausimai