UI аткаруу оптималдаштыруу
1) "тез" эсептөө үчүн эмне
TTFB (биринчи байт чейин убакыт) - тез жооп Server/CDN.
LCP (Largest Contentful Paint) - "негизги" мазмун тез эле пайда болду.
INP (Interaction to Next Paint) - өз ара аракеттенүүдө жооп берүү.
CLS (Cumulative Layout Shift) - эч кандай "титиреп" Interface.
TTI (Time to Interactive) - баары жооп берет.
Сунушталган көрсөтмөлөр: LCP ≤ 2. 5 с, INP ≤ 200 мс, CLS ≤ 0. 1 (чыныгы колдонуучулардын 75-перцентили үчүн).
2) Процесс: өлчөө → тар жерлерди табуу → бюджеттерди бекитүү
1. Өлчөө: RUM (реалдуу колдонуучулар, өлкөлөр/тармактар/түзмөктөр боюнча бурчу) + синтетика (Lighthouse/байкоочулар).
2. Find: Performance профилдери (узун тапшырмалар> 50 ms, layout thrashing, кошумча рендерлер).
3. Бекитүү: бюджеттер (JS/CSS/арип салмагы, LCP/INP) жана CI "кызыл сызыктар".
3) Тармак жана ресурстарды жүктөө
3. 1 HTTP жана артыкчылыктары
HTTP/2/3 күйгүзүү, Brotli кысуу.
'preconnect' критикалык домендерге; 'dns-prefetch' экинчи даражадагы домендер үчүн.
'preload' критикалык ресурстар үчүн (баатыр сүрөт, негизги шрифт).
' fetchpriority =" high/low"' жана 'priority' кеңештерин колдойт.
3. 2 Кэш
хеш менен статика: 'Cache-Control: public, max-age = 31536000, immutable'.
HTML - CDN аркылуу кыска TTL + stale-while-revalidate.
ETag/Last-Modified жана Service Worker оффлайн/кайра баруу үчүн.
4) Код: азыраак, кийинчерээк, "тегиз"
4. 1 чогултуу
Tree-shaking, minify (в т.ч. dead-code-elim).
Code-splitting жолдору/виджеттер, динамикалык импорт.
негизги Bandle (moment → Intl/Day "глобалдык" оор пакеттерден алыс. js).
4. 2 рендерлик жана HTML жеткирүү
SSR/ISR/агымы: биринчи кадр жана негизги мазмунду берүү.
Partial/Islands hydration: гана Interactive сайттарды гидрирлөө.
Defer бардык сын эмес: '<script type = "module" defer>'.
4. 3 React өзгөчөлүгү (React колдонгон болсо)
`React. lazy '+' Suspense 'жалкоо виджеттер үчүн.
'startTransition' жана 'useDeferredValue' оор чыпкалар/издөө үчүн.
RSC (Server Components) - сервердеги эсептөө, кардар боюнча JS аз.
Стейттеги селекторлор (zustand/redux): компонентти толугу менен эмес, фрагменттерге кол коюу.
5) Рендер жана абалы: кайда "тормозит"
5. 1 Изоляция Ререндер
Чоң компоненттерди майдалап, мемиздөө ('memo', 'useMemo', 'useCallback').
Тизмелердин ачкычтары - туруктуу; зарылчылыгы жок пропустарда жаңы функцияларды/объектилерди жаратпаңыз.
Тез-тез өзгөрүп жаткан маалыматтар үчүн "глобалдык" контексттен алыс болуңуз - селекторлорду же окуя шиналарын колдонуңуз.
5. 2 Виртуалдаштыруу жана чоң тизмелер
барактар/таблицалар → виртуалдаштыруу (render window).
backpressure менен Pagination/infinit-scroll (100k саптары бир жолу жүктөп жок).
Оор виджеттерди кийинкиге калтыруу.
5. 3 Layout & paint
content-visibility: auto; жашыруун бөлүмдөр үчүн (браузер көрүнбөгөндү рендерлейт).
contain жана 'contain-intrinsic-size' алдын ала өлчөмдөрү үчүн.
көп окуу-жазууларды качуу layout аралаштырып (layout thrashing); өлчөөлөрдү топтоңуз.
will-change дозалап колдонуу (болбосо кошумча эс/катмарлар).
6) Сүрөттөр жана графика
Форматтар: AVIF/WebP (PNG/JPEG боюнча fallback).
Responsive-мамиле: 'srcset' + 'sizes', retina үчүн density-based.
'loading =' lazy '' баатырдык эмес сүрөттөр үчүн; priority/preload - гана LCP-талапкер үчүн.
белгиленген өлчөмдөрү менен Playsholders → эч кандай CLS секирик.
Canvas/чарттар: offscreen-Canvas жана Web Worker эсептөөлөр үчүн; батчинг кайра.
7) Шрифттер жана текст
Бир же эки variable font ордуна көптөгөн жазуулар.
'font-display: swap '/' optional', негизги үлгү үчүн preload.
'size-adjust' шрифти алмаштырганда "секирүүнү" азайтуу үчүн.
Окшош көрсөткүчтөр менен жергиликтүү fallback ариптер.
8) CSS жана анимация
Критикалык CSS онлайн (<14-20 кБ), калган - кийинкиге калтыруу.
Колдонулбаган стилдерди алып салуу (Purge/CSSTree).
Мүмкүн болушунча Animation transform/opacity; сыйлоо 'prefers-reduced-motion'.
Терең каскаддардан жана жарылуучу селекторлордон алыс болуңуз.
9) Web Workers, агымы жана оор милдеттери
Бардык CPU-оор - Worker (parsing, сорттоо, топтоо, ML).
узак жооптор үчүн Streaming API ('ReadableStream', 'fetch' агымдары менен).
'requestIdleCallback '/микротаскалар аркылуу чанктарга тапшырмаларды майдалоо.
10) макети туруктуулугу (CLS)
LCP-элемент (сүрөт/widget) үчүн орун камдап.
Белгиленген өлчөмдөрү жок баннерлерди/ленталарды салбаңыз.
Асимметриялуу тултиптер/тосттор - мазмунду жылдырбоо; катмарларды/порталдарды колдонуу.
11) Сниппеттердин мисалдары
Критикалык арип жана 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">Жалкоо жана коопсуз widget инициалдаштыруу
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>;
}макети турукташтыруу
css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}12) Регрессияны көзөмөлдөө жана бюджеттер
Bundle-budget: жалпы JS ≤ N кБ, CSS ≤ M кБ, initial-chunk ≤ K кБ.
CI Web-Vitals (эмульгацияланган) + RUM-алерталар (перцентилдерде).
Bandla талдоо: PR source-map-explorer/анализатор.
Компоненттердин аткаруу-этаптары (10k элементтердин рендер, жооп убактысы).
13) Анти-үлгүлөрү
Жүктөө "баары бир жолу": графика, редакторлор, карталар биринчи экранда.
Big Global State → каскаддык Rerenders.
Сүрөттөр керектүү өлчөмдөн 2-4 ×, 'srcset/sizes' жок.
Негизги агымда узун синхрондуу циклдер.
'outline: none' жана оптималдаштыруусуз кастомдук фокустар - рендердин көрсөткүчтөрүнө тоскоол болот.
'Top/left' анимациялары (макетти бузуп, кайра чакырат).
14) Чек экраны
- LCP ≤ 2. 5c трафикте 3G/мобайл, CLS ≤ 0. 1, INP ≤ 200 мс
- Критикалык ресурстар: preload/артыкчылыктары; калган - defer/lazy
- Бандл: code-split, эч кандай ашыкча көз карандылык
- Тизмелерди/таблицаларды виртуалдаштыруу, оор виджеттерди кийинкиге калтыруу
- Сүрөттөр: AVIF/WebP, 'srcset/sizes', 'loading =' lazy ''
- Ариптер: variable + 'font-display', preload гана керектүү
- CSS: критикалык инлайн, Purge, 'content-visibility' жана 'contain' ылайыктуу жерде
- оор эсептөө үчүн Workers/idle
- Бюджеттер жана Web-Vitals dashboard/alerts байланыштуу
15) Ишке ашыруу планы (3 итерация)
Итерация 1 - Fast Victory (1-2 жума)
Brotli/HTTP-2/3, CDN кирет. Критикалык CSS жана preload LCP ресурстары.
динамикалык импорттун оор widget алып.
Сүрөттөр → AVIF/WebP + 'srcset'. Шрифттер: 'font-display: swap'.
Итерация 2 - Структуралык жакшыртуу (3-4 жума)
жолдор боюнча Code-split, bandla талдоо, "оор" lib алып салуу.
Virtualization тизмелери, мазмун visibility, contain-intrinsic-size.
SSR/стриминг/аралдарды киргизүү (тиешелүү жерде).
Web-Vitals менен RUM, CI бюджеттер.
Итерация 3 - Масштабы жана туруктуулугу (үзгүлтүксүз)
Workers/offscreen-canvas, батчинг эсептөөлөр, startTransition/deferredValue.
Үзгүлтүксүз perf-аудит, регрессия autodajest, команда окутуу.
16) Mini-FAQ
Мобайл абдан тездетет?
баштапкы JS азайтуу, ССР/агымы жана LCP сүрөттөрдү оптималдаштыруу.
Сиз ар дайым ССР керек?
Жок. Эгерде бет динамикалык интерактивдүү жана начар кэш - islands/partial hydration жакшы болушу мүмкүн.
Эмне үчүн INP "жеңил" Бандл менен жаман?
Кыязы, узун тапшырмалар (сорттоо, графиктер) негизги агымында - Worker алып жана милдеттерди бөлүү.
Жыйынтык
Fast UI - бул дисциплиналардын жыйындысы: тармактык артыкчылыктар жана кэш, кичине жана кеч бандалар, секирүү жок алдын ала рендер, үнөмдүү сүрөттөр жана шрифттер, ошондой эле реалдуу дүйнөдө метриктерди дайыма көзөмөлдөө. Бюджеттерди киргизип, текшерүүлөрдү автоматташтырып, команданы ар бир кадамда ылдамдык жөнүндө ойлонууга үйрөтүңүз - ошентип интерфейс бүгүн жана бир жылдан кийин тез бойдон калат.