Optymalizacja wydajności interfejsu użytkownika
1) Co liczy się jako „szybkie”
TTFB (czas do pierwszego bajtu) - szybka odpowiedź serwera/CDN.
LCP (Największa Treściowa Farba) - „Główna” zawartość pojawiła się szybko.
INP (Interakcja z następną farbą) - reakcyjność podczas interakcji.
CLS (Cumulative Layout Shift) - brak interfejsu jitter.
TTI (Time to Interactive) - kiedy wszystko już reaguje.
Zalecane punkty odniesienia: LCP ≤ 2. 5s, INP ≤ 200 ms, CLS ≤ 0. 1 (dla 75. percentyla rzeczywistych użytkowników).
2) Proces: środek → znaleźć wąskie gardła → naprawić budżety
1. Pomiar: RUM (użytkownicy rzeczywisti, percentyle według kraju/sieci/urządzenia) + syntetyka (latarnia morska/przeglądarki).
2. Znajdź: Profiler wydajności (długie zadania> 50ms, tarcie układu, dodatkowe renderki).
3. Napraw: budżety (waga JS/CSS/czcionki, LCP/INP) i „czerwone linie” w CI.
3) Załadunek sieci i zasobów
3. 1 HTTP i priorytety
Włącz HTTP/2/3, kompresję Brotli.
"preconnect" do domen krytycznych; " dns-prefetch 'do domen drugorzędnych.
'preload' dla zasobów krytycznych (obraz bohatera, czcionka główna).
"fetchpriority =" wysoka/niska "i" przewaga "wskazówek, w których jest podtrzymywana.
3. 2 Buforowanie
Statyczny z hashem pliku: 'Cache-Control: public, max-age = 31536000, immutable'.
HTML - krótki TTL + stale-while-revalidate przez CDN.
ETag/Last-Modified i Service Worker do odwiedzin offline/powtórzyć.
4) Kod: mniej, później, „flatter”
4. 1 Montaż
Drzewo-wstrząsające, minify (ма. ч. martwy kod-elim).
Podział kodu na trasy/widżety, import dynamiczny.
Unikaj „globalnych” ciężkich pakietów w podstawowym pakiecie (moment → Intl/Day. js).
4. 2 Renderowanie i dostawa HTML
SSR/ISR/streaming: najpierw dać ramy i główne treści.
Częściowe/Wyspy nawodnienie: nawodnić tylko obszary interaktywne.
Defer all non-critical: '<script type = „module” defer>'.
4. 3 Specyfika reakcji (w przypadku zastosowania produktu React)
"Zareaguj. leniwe '+' Suspense 'dla leniwych widżetów.
'startTransition' i ' DeferredValue' dla ciężkich filtrów/wyszukiwarek.
RSC (Server Components) - obliczenia serwera, mniej niż JS na kliencie.
Selektory w (zustand/redux): podpisz komponent na fragmenty, a nie cały stos.
5) Render i stwierdzenie: gdzie „zwalnia”
5. 1 Izolacja powracających
Zmiażdżyć duże komponenty, zapamiętać („memo”, „ Memo”, „ Callback”).
Klucze listy są stabilne; niepotrzebnie nie tworzyć nowych funkcji/obiektów w rekwizytach.
Unikaj „globalnego” kontekstu dla często zmieniających się danych - użyj selektorów lub autobusów imprez.
5. 2 Wirtualizacja i duże listy
Arkusze/tabele → wirtualizacja (render window).
Paginacja/nieskończone przewijanie z ciśnieniem wstecznym (nie ładuj linii 100k na raz).
Opóźniona inicjalizacja ciężkich widżetów poza portem widokowym.
5. 3 Układ i farba
widoczność treści: auto; dla ukrytych partycji (przeglądarka nie czyni go niewidzialnym).
zawierają i „zawierają wewnętrzne rozmiary” dla przewidywalnych rozmiarów.
Unikaj częstych odczytów układów (thrashing układu); pomiary grupowe.
zmieni użycie dozowane (w przeciwnym razie dodatkowa pamięć/warstwy).
6) Obrazy i grafika
Formaty: AVIF/WebP (fallback na PNG/JPEG).
Podejście reagujące: 'srcset' + 'rozmiary', gęstość oparta na siatkówce.
"załadunek =" leniwy "dla obrazów innych niż bohaterskie; priorytet/preload - tylko dla kandydata LCP.
Stałe rozmiary znaczników → brak skoków CLS.
Płótno/wykresy: płótno offscreen i Web Worker do obliczeń; Masujące czerwone kawałki.
7) Czcionki i tekst
Jedna lub dwie zmienne czcionki zamiast wielu stylów.
'font-display: swap '/' optional', preload for basic style.
'size-adjust', aby zmniejszyć 'skok' podczas zmiany czcionki.
Lokalne czcionki z podobnymi metrykami.
8) CSS i animacje
Krytyczny CSS inline (<14-20 kB), odpoczynek - do odroczenia.
Usuń niewykorzystane style (Purge/CSSTree).
Animacje, jeśli to możliwe, na transformacji/nieprzezroczystości; szacunek „preferuje zredukowany ruch”.
Unikaj głębokich kaskad i wybuchów.
9) Pracownicy sieci Web, przepływ i ciężkie zadania
Wszystkie procesory ciężkie - w Pracowniku (parsowanie, sortowanie, agregacja, ML).
Przesyłanie strumieniowe interfejsów API („Reading Stream”, „fetch” ze strumieniami) dla długich odpowiedzi.
Podzielenie zadań na kawałki za pomocą 'IdleCallback '/mikrotaski, aby utrzymać responsywność.
10) Stabilność układu (CLS)
Miejsce na element LCP (obraz/widżet).
Nie wstawiać banerów/wstążek bez ustalonych rozmiarów.
Asymetryczne tultipy/toasty - nie poruszaj treścią; używać warstw/portali.
11) Przykłady snajperów
Krytyczny obraz czcionki i LCP
html
<link rel="preload" href="/fonts/Inter. var. woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="/hero. avif" imagesrcset="/hero. avif 1x, /hero@2x. avif 2x" fetchpriority="high">Leniwa i bezpieczna inicjalizacja widgetu
js const Widget = React. lazy(() => import('./Widget'));
function Section() {
const inView = useInViewport('#sec');
return <div id="sec">{inView? <React. Suspense fallback={null}><Widget/></React. Suspense>: null}</div>;
}Stabilizacja układu
css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}12) Kontrola regresji i budżety
Budżet wiązki: całkowity JS ≤ N kB, CSS ≤ M kB, początkowy kawałek ≤ K kB.
Web-Vitals w CI (emulowane) + RUM-alerty (na percentyle).
Analiza pakietów: source-map-explorer/analyzer in PR.
Wskaźniki wydajności elementów (renderowanie elementów 10k, czas reakcji).
13) Anty-wzory
Załaduj „wszystko na raz”: wykresy, edytory, mapy na pierwszym ekranie.
Ogromny globalny stan → kaskadowych plecaków.
Obrazy 2-4 × pożądanego rozmiaru, bez 'srcset/sizes'.
Długie pętle synchroniczne na głównej nici.
„ouline: żadne” i niestandardowe sztuczki bez optymalizacji - zakłócają wskaźniki renderowania.
Animacje przez 'top/left' (przerwać układ i wywołać refluks).
14) Lista kontrolna ekranu
- LCP ≤ 2. 5 s w ruchu 3G/mobile, CLS ≤ 0. 1, INP ≤ 200 ms
- Zasoby krytyczne: wstępne obciążenie/priorytety; reszta jest defer/leniwy
- Pakiety: kod podzielony, brak dodatkowych zależności
- Lista/Tabela wirtualizacja, Ciężki widget opóźniona inicjalizacja
- Obrazy: AVIF/WebP, 'srcset/sizes',' loading = 'leniwy'
- Czcionki: zmienna + „wyświetlacz czcionki”, wymagane jest tylko wstępne obciążenie
- CSS: krytyczna inline, purge, „content-visibility” i „contain”, w stosownych przypadkach
- Pracownicy/bezczynność do obliczeń ciężkich
- Budżety i sieci Web-Vitals są podłączone do desek rozdzielczych/wpisów
15) Plan realizacji (3 iteracje)
Iteracja 1 - Szybkie wygrane (1-2 tygodnie)
Włącz Brotli/HTTP-2/3, CDN. Krytyczne zasoby CSS i preload LCP.
Przenieść ciężkie widgety do dynamicznego importu.
Zdjęcia → AVIF/WebP + 'srcset'. Czcionki: 'font-display: swap'.
Iteration 2 - Ulepszenia strukturalne (3-4 tygodnie)
Kod podzielony na trasę, analiza wiązki, usunięcie „ciężkich” libów.
Wirtualizacja listy, widoczność treści, zawiera-wewnętrzny rozmiar.
Wdrożenie RSB/streaming/wyspy (w stosownych przypadkach).
RUM z Web-Vitals, budżety w CI.
Iteracja 3 - skala i solidność (ciągła)
Pracownicy/płótno offscreen, obliczenia butching, startTransition/deferredValue.
Regularny audyt PERF, regresja automatyczna, szkolenie zespołu.
16) Mini-FAQ
Co przyspieszy najbardziej na telefon komórkowy?
Redukcja oryginalnego JS, SSR/streaming i optymalizacja obrazu LCP.
Czy zawsze potrzebuję SSR?
Nie, nie jest. Jeśli strona jest dynamicznie interaktywna i słabo buforowana, wyspy/częściowe nawodnienie mogą być lepsze.
Dlaczego INP jest zły z „lekką” wiązką?
Prawdopodobnie długie zadania (sortowanie, grafika) na głównym wątku - przynieść je do pracownika i podzielić zadania.
Razem
Fast UI to zbiór dyscyplin: priorytety sieci i pamięci podręcznej, mniejsze i późne wiązki, przewidywalne renderowanie non-jump, ekonomiczne obrazy i czcionki oraz stałe sterowanie metryczne w świecie rzeczywistym. Wpisz budżety, zautomatyzuj kontrole i naucz zespół myśleć o prędkości na każdym kroku - w ten sposób interfejs pozostanie szybki dzisiaj i w ciągu roku.