UI öndürijiligini optimizirlemek
1) "Çalt" näme hasaplamaly
TTFB (ilkinji baýta çenli wagt) - serweriň/CDN-iň çalt jogaby.
LCP (Largest Contentful Paint) - "esasy" mazmun çalt peýda boldy.
INP (Interaction to Next Paint) - özara täsirleşende duýgurlyk.
CLS (Cumulative Layout Shift) - interfeýsiň "titremezligi".
TTI (Time to Interactive) - hemme zat eýýäm jogap berende.
Maslahat berilýän görkezmeler: LCP ≤ 2. 5 s, INP ≤ 200 ms, CLS ≤ 0. 1 (hakyky ulanyjylaryň 75-nji percentili üçin).
2) Proses: ölçemek → dar ýerleri tapmak → býudjetleri düzetmek
1. Ölçemek: RUM (hakyky ulanyjylar, ýurtlara/torlara/enjamlara ýüzlendiler) + sintetika (Lighthouse/synçylar).
2. Tapmak: Performance profilleýji (uzyn meseleler> 50 ms, layout thrashing, goşmaça renderler).
3. Düzediň: CI-de býudjetler (JS/CSS/şriftleriň, LCP/INP) we "gyzyl çyzyklar".
3) Resurslaryň ulgamy we ýüklenişi
3. 1 HTTP we ileri tutulýan ugurlar
Brotli HTTP/2/3, gysmagy açyň.
'preconnect' kritiki domenlere; 'dns-prefetch' ikinji derejeli domenler üçin.
Möhüm çeşmeler üçin 'preload' (gahryman-surat, esasy şrift).
'fetchpriority =' high/low 'we' priority 'maslahatlary nirede saklanýar.
3. 2 Kesmek
"Cache-Control: public, max-age = 31536000, immutable".
HTML - CDN arkaly gysga TTL + stale-while-revalidate.
ETag/Last-Modified we Service Worker oflayn/gaýtalanýan saparlar üçin.
4) Kod: az, soň, "deň"
4. 1 Ýygnamak
Tree-shaking, minify (в т.ч. dead-code-elim).
Marşrutlar/widjetler boýunça kode-splitting, dinamiki import.
Esasy bandlda "global" agyr paketlerden gaça duruň (moment → Intl/Day. js).
4. 2 HTML render etmek we eltip bermek
SSR/ISR/akym: çarçuwany we esasy mazmuny ilki bilen beriň.
Partial/Islands hydration: diňe interaktiw ýerleri gidrirlemek.
'<script type =' module 'defer>'.
4. 3 Reaksiýa aýratynlyklary (React ulansaňyz)
`React. lazy '+' Suspense 'ýalta widjetler üçin.
'startTransition' we 'useDeferredValue' agyr süzgüçler/gözleg üçin.
RSC (Server Components) - serwerde hasaplamalar, müşderide JS-den az.
Ştatda saýlaýjylar (zustand/redux): komponenti tutuş stor däl-de, böleklere ýazyň.
5) Render we ýagdaý: nirede "haýalladýar"
5. 1 Rerenderleri izolýasiýa etmek
Uly komponentleri bölüň, memo ('memo', 'useMemo', 'useCallback').
Sanawyň açarlary - durnukly; zerurlyksyz proplarda täze funksiýalar/obýektler döretmäň.
Köplenç üýtgeýän maglumatlar üçin "global" kontekstden gaça duruň - saýlaýjylary ýa-da waka tekerlerini ulanyň.
5. 2 Wirtualizasiýa we uly sanawlar
Sahypalar/tablisalar → wirtualization (render window).
Backpressure bilen paginasiýa/infinit-skroll (birbada 100k setirleri ýüklemäň).
Agyr widjetleriň wuportdan daşarda gijikdirilmegi.
5. 3 Layout & paint
content-visibility: auto; gizlin bölümler üçin (brauzer görünmeýänleri görkezmeýär).
kontain we 'contain-intrinsic-size' öňünden aýdyp boljak ölçegler üçin.
Gatyşmak arkaly ýygy-ýygydan okamakdan we ýazgylardan gaça duruň; ölçegleri toparlanyň.
will-change dozaly (ýogsam artykmaç ýady/gatlaklary).
6) Suratlar we grafika
Formatlar: AVIF/WebP (PNG/JPEG üçin fallback).
Responsive-çemeleşme: 'srcset' + 'sizes', retina üçin density-based.
'loading =' lazy 'gahryman däl şekiller üçin; priority/preload - diňe LCP dalaşgäri üçin.
Kesgitlenen ölçegli pleýsholderler → CLS böküşleri ýok.
Kanwas/charts: offscreen-kanwas we Web Worker; täzeden çyzmak.
7) Şriftler we tekst
Köp çyzgynyň ýerine bir ýa-da iki variable font.
'font-display: swap '/' optional', preload.
'Size-adjust' şrift çalşylanda "bökmegi" azaltmak üçin.
Şuňa meňzeş ölçegli ýerli fallback şriftleri.
8) CSS we animasiýa
Möhüm CSS onlaýn (<14-20 kB), galanlary yza süýşürilýär.
Ulanylmaýan stilleri (Purge/CSSTree) aýyryň.
Mümkin boldugyça transform/opacity animasiýalary; 'prefers-reduced-motion' -a hormat goýmak.
Çuň kaskadlardan we partlaýjy selektorlardan gaça duruň.
9) Web Workers, akym we agyr meseleler
Ähli CPU-agyr - Worker (parsing, sortlamak, agregasiýa, ML).
Uzyn jogaplar üçin akym API ('ReadableStream', 'fetch').
Duýgurlygy saklamak üçin 'requestIdleCallback '/mikrotasklar arkaly çeňňek meselelerini bölmek.
10) Ýerleşiş durnuklylygy (CLS)
LCP elementi üçin ýer goýuň (surat/widget).
Bannerleri/lentalary kesgitlenen ölçegsiz goýmaň.
Asimmetrik tultipler/tostlar - mazmuny herekete getirmäň; gatlaklardan/portallardan peýdalanmak.
11) Snippetleriň mysallary
Möhüm şrift we LCP şekili
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">Widget-yň ýaltalyk we howpsuz başlangyjy
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>;
}Ýerleşişi durnuklaşdyrmak
css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}12) Regressiýalara gözegçilik we býujetler
Bundle-budget: umumy JS ≤ N kB, CSS ≤ M kB, initial-chunk ≤ K kB.
CI-de Web-Witals (emulirlenen) + RUM-alertler (percentillerde).
Bandlyň derňewi: PR-da source-map-explorer/analizator.
Komponentleriň çykyş-bençmarklary (element renderi 10k, reaksiýa wagty).
13) Anti-patternler
"Hemme zady birbada" ýükläň: grafikler, redaktorlar, kartoçkalar birinji ekranda.
Ullakan global state → kaskad rerenderleri.
Suratlar 'srcset/sizes' -siz, zerur ululykdan 2-4 ×.
Esasy akymda uzyn sinhron aýlawlar.
'outline: none' we optimizasiýa etmezden saýlama hileler - render görkezijilerine päsgel berýär.
'Top/left' animasiýalary.
14) Ekranyň çek-sanawy
- LCP ≤ 2. 5 c traffikde 3G/mobaýl, CLS ≤ 0. 1, INP ≤ 200 ms
- Möhüm çeşmeler: preload/ileri tutulýan ugurlar; galanlary - defer/lazy
- Bandla: code-split, goşmaça garaşlylyk ýok
- Sanawlary/tablisalary wirtuallaşdyrmak, agyr widgetlary gijikdirmek
- Suratlar: AVIF/WebP, 'srcset/sizes', 'loading =' lazy ''
- Şriftler: variable + 'font-display', preload diňe zerur
- CSS: kritiki inline, Purge, 'content-visibility' we 'contain'
- Agyr hasaplamalar üçin Workers/idle
- Býudjetler we Web-Witals dashboard/alertlere birikdirildi
15) Durmuşa geçirmek meýilnamasy (3 iterasiýa)
Yterasiýa 1 - Çalt ýeňişler (1-2 hepde)
Brotli/HTTP-2/3, CDN. CSS we preload LCP çeşmeleri.
Agyr widjetleri dinamiki importlara çykarmak.
Suratlar → AVIF/WebP + 'srcset'. Şriftler: 'font-display: swap'.
Iterasiýa 2 - Gurluş gowulaşmalary (3-4 hepde)
Marşrutlar boýunça kode-split, bandlyň derňewi, "agyr" lipleriň aýrylmagy.
Sanlaşdyrma sanawlary, mazmun-visibility, contain-intrinsic-size.
SSR/Streaming/Adalary girizmek (degişli).
Web-Witals bilen RUM, CI-de býudjetler.
Yterasiýa 3 - Gerimi we durnuklylygy (üznüksiz)
Workers/offscreen-kanwas, batching hasaplamalar, startTransition/deferredValue.
Yzygiderli perf-audit, regressiýalaryň awtodaýjesti, topary taýýarlamak.
16) Mini-FAQ
Mobile-da iň çalt näme?
Asyl JS, SSR/akymy azaltmak we LCP şekilini optimizirlemek.
Elmydama SSR gerekmi?
Ýok. Eger sahypa dinamiki taýdan interaktiw we erbet kesilen bolsa - islands/partial hydration has gowy bolup biler.
Näme üçin "ýeňil" bandlada INP erbet?
Belki, esasy akymda uzyn meseleler (sortlar, grafikler) - Worker-a getiriň we meseleleri bölüň.
Jemi
Çalt UI - bu dersleriň toplumy: tor ileri tutulýan ugurlar we nagt pul, kiçi we giç bandllar, bökmezden öňünden aýdyp boljak render, tygşytly şekiller we şriftler, şeýle hem hakyky dünýädäki metriklere yzygiderli gözegçilik. Býudjetleri giriziň, barlaglary awtomatlaşdyryň we buýrugy her ädimde tizlik hakda pikirlenmäge öwrediň - şonuň üçin interfeýs şu gün we bir ýyldan soň çalt bolar.