Jaké jsou hlavní způsoby optimalizace výkonu frontendu?

Question

IT Interview Practice · Accepted Answer

**Optimalizujte skutečně pomalou část uživatelské cesty a potom změřte přínos.** Menší balík kódu pomáhá, pokud zlepší zážitek nebo sníží relevantní náklady.

Zákazníci na běžných telefonech například otevřou produkt, pozdě uvidí hlavní obrázek a čekají při výběru varianty. Načítání a interakce jsou odlišné problémy; jedna optimalizace nemusí vyřešit oba.

## 1. Potvrďte příznak reprezentativním měřením

Vyberte důležitou cestu, zařízení a připojení. Měření skutečných uživatelů určí dotčenou skupinu a řízené testy v prohlížeči problém zopakují. Výkonný vývojový notebook může zákaznické prodlevy skrýt.

- LCP měří vykreslení největšího viditelného prvku obsahu a pomáhá hodnotit načítání.
- INP popisuje odezvu na interakce během návštěvy stránky.
- CLS měří nečekané posuny rozvržení, například přeskočení obsahu při zobrazení obrázku.

Tyto [Core Web Vitals](https://web.dev/articles/vitals) popisují různé části zážitku. Propojte je se skutečným úkolem, například výběrem varianty a vložením do košíku, aby lepší číslo nezakrývalo nefunkční chování.

## 2. Najděte příčinu zpoždění důležitého obsahu

Prohlédněte waterfall požadavků: časovou osu objevení, stahování a dokončení zdrojů. Hlavní obrázek produktu se může začít načítat až po JavaScriptu a dokončení API požadavku.

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

Komprese obrázku zrychlí přenos, ale jeho dřívější objevení může odstranit předchozí čekání. Zvažte užitečný produktový obsah už v počátečním HTML pomocí serverového renderování nebo statického generování. Ověřte čerstvost, cenu serveru a JavaScript stále potřebný pro interaktivitu.

## 3. Omezte zbytečný přenos a provádění

Po pochopení kritické cesty odstraňte práci nepomáhající současné obrazovce. Upřednostněte změny spojené se změřenou prodlevou před plošným používáním všech technik.

- Posílejte vhodné rozměry a formáty obrázků. Obrázky mimo obrazovku načítejte odloženě, ne však hlavní obrázek, na který uživatel čeká.
- Dělte kód podle cest či funkcí, aby produktová stránka nestahovala nevyužitou správu.
- Odstraňte zbytečné závislosti a prověřte cizí skripty, které stojí síťový čas i práci hlavního vlákna.
- Komprimujte vhodné textové odpovědi a cachujte verzované statické soubory. Osobní data potřebují oddělená bezpečná pravidla.

Menší soubory snižují přenos, ale prohlížeč stále parsuje a provádí kód. Před vyhlášením úspěchu zkontrolujte síť i CPU.

## 4. Řešte příčinu pomalé interakce

Při pomalém výběru varianty profilujte hlavní vlákno, které vykonává mnoho skriptování a renderování. Dlouhý výpočet může blokovat reakci i po stažení všech souborů.

Rozdělte dlouhou práci nebo vhodný výpočet přesuňte do workeru. U často měněných vstupů omezte zbytečné požadavky a zabraňte staré odpovědi přepsat novější výběr. Memoizaci používejte při změřené ceně opakovaných výpočtů, ne automaticky.

U dlouhých seznamů může renderování viditelné části šetřit práci, ale zachovejte klávesnicové ovládání a přístupnost. Rezervujte místo pro obrázky a pozdější obsah, aby rozvržení neskákalo. Každá změna řeší jiný příznak, proto ji ověřte proti původnímu problému.

## 5. Po změně ověřte celou cestu

Zopakujte stejný řízený test a po vydání sledujte skutečné uživatele. Vedle výkonu kontrolujte správnost produktu, klávesnici, dokončení košíku a případné zvýšení zátěže backendu.

Nastavte praktické rozpočty důležitých zdrojů a sledujte regresi. Dobré laboratorní skóre nestačí, pokud zákazníci dál čekají nebo nedokončí úkol. **Výsledkem má být rychlejší, stabilní a použitelná cesta doložená měřením před změnou a po ní.**

1. Potvrďte příznak reprezentativním měřením

2. Najděte příčinu zpoždění důležitého obsahu

3. Omezte zbytečný přenos a provádění

4. Řešte příčinu pomalé interakce

5. Po změně ověřte celou cestu

Související otázky