Optimizarea performanţei UI

1) Ceea ce contează ca „rapid”

TTFB (timp până la primul octet) - răspuns rapid la server/CDN.
LCP (Cea mai mare vopsea cuprinzătoare) - conținut „principal” a apărut rapid.
INP (Interaction to Next Paint) - reacție în timpul interacțiunii.
CLS (Cumulative Layout Shift) - absența jitter interfață.
TTI (Time to Interactive) - când totul răspunde deja.
Puncte de referință recomandate: LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (pentru a 75-a percentilă a utilizatorilor reali).

2) Proces: măsură → găsirea blocajelor → remedierea bugetelor

1. Măsură: RUM (utilizatori reali, percentile după țară/rețea/dispozitiv) + sintetice (Far/browsere).
2. Găsiți: Profiler de performanță (sarcini lungi> 50ms, tăiere aspect, randări suplimentare).
3. Fix: bugete (ponderea JS/CSS/fonturi, LCP/INP) și „linii roșii” în CI.

3) Încărcarea rețelelor și a resurselor

3. 1 HTTP și priorități

Activează HTTP/2/3, compresia Brotli.
"reconectare" la domeniile critice; " dns-prefetch 'pentru domeniile secundare.
„preîncărcați” pentru resurse critice (imagine erou, font principal).
„fetchpriority =” high/low „” și „priority” indicii în cazul în care a sprijinit.

3. 2 Caching

Static cu fișier hash: 'Cache-Control: public, max-age = 31536000, imuabil'.
HTML - scurt TTL + vechi-în timp ce-revalidat prin CDN.
ETag/Last-Modified și Service Worker pentru vizite offline/repetate.

4) Cod: mai puțin, mai târziu, „flatter”

4. 1 Adunare

Tremuratul copacilor, minify (в т. ч. mort-cod-elim).
Împărțirea codului pe rute/widget-uri, import dinamic.
Evitați pachetele grele „globale” din pachetul de bază (moment → Intl/Zi. js).

4. 2 Randare și livrare HTML

SSR/ISR/streaming: oferiți mai întâi cadrul și conținutul principal.
Hidratare parțială/insulară: hidratează numai zonele interactive.
Amânați toate non-critice: '<script type = „module” defer>'.

4. 3 Specificitatea reacţiei (dacă se utilizează React)

Reacţionează. leneș "+" Suspans "pentru widget-uri leneș.
'startTransition' și 'useAmergeredValue' pentru filtre/căutări grele.
RSC (Server Components) - Calculele serverului, mai puțin decât JS pe client.
Selectori în (zustand/redux): semnați componenta în fragmente, nu întreaga stivă.

5) Randare și stare: în cazul în care „încetinește”

5. 1 Izolarea rentatorilor

Crush componente mari, memoize („memo”, „useMemo”, „useCallback”).
Cheile de listă sunt stabile; nu creați funcții/obiecte noi în recuzită în mod inutil.
Evitați contextul „global” pentru schimbarea frecventă a datelor - utilizați selectoare sau autobuze de evenimente.

5. 2 Virtualizare şi liste mari

Foi/tabele → virtualizare (fereastră de randare).
Paginare/defilare infinită cu backpressure (nu încărcați 100k linii simultan).
Inițializarea întârziată a widget-urilor grele în afara portului de vizualizare.

5. 3 Aspect & vopsea

conținut-vizibilitate: auto; pentru partiții ascunse (browserul nu face invizibil).
să conţină şi să „conţină dimensiunea intrinsecă” pentru dimensiuni previzibile.
Evitați citirile frecvente ale machetelor (tăierea machetelor); măsurători de grup.
se va modifica doza de utilizare (altfel memorie/straturi suplimentare).

6) Imagini și grafică

Formate: AVIF/WebP (rezervă pe PNG/JPEG).
Abordare responsivă: „srcset” + „mărimi”, pe bază de densitate pentru retină.
„încărcare =” leneș „” pentru imaginile non-erou; prioritate/preîncărcare - numai pentru candidatul LCP.
Înlocuitori de dimensiuni fixe → fără salturi CLS.
Panza/diagrame: panza offscreen si Web Worker pentru calcule; butching redesenează.

7) Fonturi și text

Unul sau două fonturi variabile în loc de mai multe stiluri.
„font-display: swap ”/„ opțional”, preîncărcare pentru stilul de bază.
'size-adjust' pentru a reduce „saltul” la schimbarea fontului.
Fonturi locale de rezervă cu valori similare.

8) CSS și animații

Critic CSS inline (<14-20 kB), restul - pentru a fi amânat.
Ștergeți stilurile neutilizate (Purge/CSSTree).
Animații, dacă este posibil, pe transformare/opacitate; respect „preferă mișcarea redusă”.
Evitați cascadele adânci și selectoarele de sablare.

9) Lucrătorii web, fluxul și sarcinile grele

Toate CPU-grele - în lucrător (parsare, sortare, agregare, ML).
Streaming API-uri ('ReadableStream', 'adu' cu fluxuri) pentru răspunsuri lungi.
Împărțirea sarcinilor în bucăți prin „requestIdleCallback ”/microtasks pentru a menține capacitatea de reacție.

10) Stabilitatea Layout (CLS)

Rezervați spațiu pentru elementul LCP (imagine/widget).
Nu introduceți bannere/panglici fără dimensiuni fixe.
Tulpini/prăjeli asimetrice - nu mișcați conținutul; utilizați straturi/portaluri.

11) Exemple de fragmente

Font critic și imagine 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">

Inițializare widget leneș și sigur

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>;
}

Stabilizarea layout-ului

css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}

12) Controlul regresiei și bugete

Pachet-buget: total JS ≤ N kB, CSS ≤ M kB, bucată inițială ≤ K kB.
Web-Vitals în CI (emulat) + ROM-alerte (pe percentile).
Analiza pachetului: sursa-map-explorer/analizor în PR.
Reperele de performanță ale componentelor (randarea elementelor 10k, timpul de reacție).

13) Anti-modele

Încărcați „toate dintr-o dată”: grafice, editori, hărți în primul ecran.
Un stat uriaş → recrutori în cascadă.
Imagini 2-4 × de dimensiunea dorită, fără „srcset/mărimi”.
Bucle lungi sincrone pe firul principal.
'ouline: none' și trucuri personalizate fără optimizare - interfera cu indicatori de randare.
Animații prin „sus/stânga” (rupe aspectul și apel reflux).

14) Lista de verificare a ecranului

• LCP ≤ 2. 5 s pe trafic 3G/mobile, CLS ≤ 0. 1, INP ≤ 200ms
• Resurse critice: preîncărcare/priorități; restul este amână/leneș
• Pachete: cod-split, fără dependențe suplimentare
• Lista/Virtualizarea tabelului, Inițializare întârziată cu widget greu
• Imagini: AVIF/WebP,' srcset/mărimi', 'încărcare =” leneș”'
• Fonturi: variabilă + 'font-display', preîncărcare numai dorită
• CSS: critic inline, Purge, „conţinut-vizibilitate” şi „conţine” acolo unde este cazul
• Lucrători/inactiv pentru calcul greu
• Bugetele și semnele vitale web sunt conectate la tablouri de bord/alerte

15) Planul de implementare (3 iterații)

Iterație 1 - Victorii rapide (1-2 săptămâni)

Activează Brotli/HTTP-2/3, CDN. CSS critic și preîncărcați resursele LCP.
Mutați widget-uri grele la importuri dinamice.
Imagini → AVIF/WebP + 'srcset'. Fonturi: 'font-display: swap'.

Iterația 2 - Îmbunătățiri structurale (3-4 săptămâni)

Cod-împărțit pe rută, analiza pachet, îndepărtarea „grele” libs.
Listați virtualizarea, vizibilitatea conținutului, conțineți dimensiunea intrinsecă.
Punerea în aplicare a RSS/streaming/insule (dacă este cazul).
ROM cu semnele vitale web, bugetele în CI.

Iterația 3 - Scară și robustețe (continuă)

Lucrători/panza offscreen, calcule butching, startTransition/amânatValue.
Audit regulat perf, regresie auto digest, instruire în echipă.

16) Mini-Întrebări frecvente

Ce va accelera cel mai mult pe mobil?
Reducerea originalului JS, SSR/streaming și optimizarea imaginii LCP.

Am mereu nevoie de RSS?
Nu, nu este. Dacă pagina este dinamic interactivă și cache slab, insulele/hidratarea parțială poate fi mai bună.

De ce este INP rău cu un pachet „ușor”?
Probabil sarcini lungi (sortare, grafică) pe firul principal - aduceți-le la muncitor și împărțiți sarcinile.

Total

Interfața interfață rapidă este o colecție de discipline: priorități de rețea și memorie cache, pachete mai mici și târzii, randare previzibilă fără salt, imagini și fonturi economice și control metric constant în lumea reală. Introduceți bugete, automatizați verificările și învățați echipa să se gândească la viteză la fiecare pas - în acest fel interfața va rămâne rapidă astăzi și într-un an.