UI өнімділігін оңтайландыру
1) «Жылдам» деп не санау керек
TTFB (бірінші байтқа дейінгі уақыт) - сервердің/CDN жылдам жауап беруі.
LCP (Largest Contentful Paint) - «басты» контент жылдам пайда болды.
INP (Interaction to Next Paint) - өзара әрекеттесу кезіндегі сезімталдық.
CLS (Cumulative Layout Shift) - интерфейстің «дірілдеуінің» болмауы.
TTI (Time to Interactive) - бәрі жауап бергенде.
Ұсынылатын бағдарлар: LCP ≤ 2. 5 с. INP ≤ 200 мс. CLS ≤ 0. 1 (нақты пайдаланушылардың 75-перцентилі үшін).
2) Процесс: өлшеу → тар жерді табу → бюджетті бекіту
1. Өлшеу: RUM (нақты пайдаланушылар, елдер/желілер/девайстар бойынша перценттелген) + синтетика (Lighthouse/шолғыштар).
2. Табу: Performance кескіндегіші (ұзақ тапсырмалар> 50 мс, 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, динамикалық импорт.
Негізгі бандлдағы «жаһандық» ауыр пакеттерден аулақ болу (moment → Intl/Day. js).
4. 2 HTML рендерлеу және жеткізу
SSR/ISR/стриминг: каркас және негізгі контент бірінші болып беріледі.
Partial/Islands hydration: тек интерактивті учаскелерді ғана гидрлеу.
Defer барлығы сыни емес: '<script type =' module 'defer>'.
4. 3 Реакт-ерекшелік (егер React пайдалансаңыз)
`React. lazy '+' Suspense 'жалқау виджеттер үшін.
Ауыр сүзгілер/іздеулер үшін 'startTransition' және 'useDeferredValue'.
RSC (Server Components) - серверде есептеу, клиентке JS аз.
Стейттегі селекторлар (zustand/redux): бүкіл сторға емес, бөлшекке қол қою.
5) Рендер және жай-күйі: қайда «тежейді»
5. 1 Ререндерлерді оқшаулау
Үлкен компоненттерді бөлшектеңіз, мемоқамдастырыңыз ('memo', 'useMemo', 'useCallback').
Тізім кілттері - тұрақты; қажетсіз пропрларда жаңа мүмкіндіктер/нысандар жасамаңыз.
Жиі өзгеретін деректер үшін «жаһандық» контекстен аулақ болыңыз - селекторларды немесе оқиға шиналарын пайдаланыңыз.
5. 2 Виртуалдандыру және үлкен тізімдер
Парақтар/кестелер → виртуалдандыру (render window).
Backpressure бар пагинация/инфинит-скролл (100k жолдарын бірден жүктемеңіз).
Вьюпорттан тыс ауыр виджеттерді кейінге қалдыру.
5. 3 Layout & paint
content-visibility: auto; жасырын секциялар үшін (шолғыш көрінбейтін бөліктерді рендетпейді).
contain және 'contain-intrinsic-size' болжамды өлшемдер үшін.
Жиі оқудан аулақ болыңыз. өлшемдерді топтастырыңыз.
will-change дозаланған (әйтпесе артық жады/қабаттар).
6) Суреттер мен графика
Пішімдер: AVIF/WebP (PNG/JPEG бойынша fallback).
Responsive-тәсіл: 'srcset' + 'sizes', retina үшін density-based.
'loading =' lazy 'батырлық емес суреттер үшін; priority/preload - тек LCP-кандидат үшін.
Бекітілген өлшемді плейсхолдерлер → CLS секірулері жоқ.
Канвас/чарталар: offscreen-канвас және есеп айырысу үшін Web Worker; қайта суреттердің батчингі.
7) Қаріптер мен мәтін
Бірнеше сызбаның орнына бір-екі variable font.
'font-display: swap '/' optional', preload негізгі сызу үшін.
Қаріпті ауыстырған кезде «секіруді» азайту үшін 'size-adjust'.
Ұқсас өлшемдері бар жергілікті fallback қаріптері.
8) CSS және анимациялар
Сыни CSS инлайн (<14-20 кБ), қалғаны - кейінге қалдыру.
Пайдаланылмайтын мәнерлерді жою (Purge/CSSTree).
Мүмкіндігінше transform/opacity анимациялары; 'prefers-reduced-motion'.
Терең каскадтардан және жарылғыш селекторлардан аулақ болу керек.
9) Web Workers, ағыны және ауыр міндеттер
Барлық CPU-ауыр - Worker (парсинг, сұрыптау, агрегаттау, ML).
Ұзақ жауаптар үшін стримингтік API ('ReadableStream', 'fetch' ағындарымен).
Сезімталдықты сақтау үшін 'requestIdleCallback '/микротаскалар арқылы тапсырмалар бөлшектеу.
10) Орналасу тұрақтылығы (CLS)
LCP элементі үшін орынды сақтаңыз (сурет/виджет).
Баннерлерді/ленталарды белгіленген өлшемдерсіз қоюға болмайды.
Асимметриялық тултиптер/тосттар - контентті жылжытпау; қабаттарды/порталдарды пайдалану.
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">Жалқау және қауіпсіз инициализация виджет
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 кБ.
Web-Vitals в CI (эмульгирленген) + RUM-алерталар (перцентилдермен).
Бандлды талдау: PR-да source-map-explorer/анализатор.
Компоненттердің перформанс-бенчмарктері (элемент рендері 10k, реакция уақыты).
13) Қарсы үлгілер
«Бәрін бірден»: графиктерді, редакторларды, карталарды бірінші экранда жүктеу.
Үлкен жаһандық стейт → каскадтық ререндэрлер.
Суреттер қажетті өлшемнен 2-4 ×, 'srcset/sizes' жоқ.
Басты ағындағы ұзақ синхронды циклдар.
Оңтайландырусыз 'outline: none' және кастомдық фокустар рендер индикаторларына кедергі келтіреді.
'top/left' анимациясы (орналасуды бұзады және reflow шақырады).
14) Экранның чек-парағы
- LCP ≤ 2. 3G/мобайл трафигінде 5 с 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 дашбордтарға/алерталарға қосылған
15) Енгізу жоспары (3 итерация)
Итерация 1 - Жылдам жеңістер (1-2 апта)
Brotli/HTTP-2/3, CDN қосу. Сыни CSS және preload LCP ресурстары.
Динамикалық импортқа ауыр виджеттерді шығару.
Суреттер → AVIF/WebP + 'srcset'. Қаріптер: 'font-display: swap'.
Итерация 2 - Құрылымдық жақсартулар (3-4 апта)
Бағыттар бойынша Code-split, бандлды талдау, «ауыр» либаларды жою.
Тізімдерді виртуалдандыру, visibility, contain-intrinsic-size.
SSR/стриминг/аралдарды енгізу (мұнда релевантты).
Web-Vitals-пен RUM, CI-дегі бюджеттер.
Итерация 3 - Масштабы және тұрақтылығы (үздіксіз)
Workers/offscreen-канвас, есеп айырысу батчингі, startTransition/deferredValue.
Тұрақты перф-аудит, регрессия автодайджесті, команданы оқыту.
16) Шағын FAQ
Мобайлдағы ең көп жылдамдататын нәрсе не?
Бастапқы JS, SSR/стримингті азайту және LCP бейнесін оңтайландыру.
Әрқашан SSR қажет пе?
Жоқ. Егер бет динамикалық интерактивті және нашар кэш болса - islands/partial hydration жақсы болуы мүмкін.
Неліктен INP «жеңіл» бандлда жаман?
Мүмкін, басты ағындағы ұзақ тапсырмалар (сұрыптау, графиктер) - Worker бағдарламасына шығарыңыз және тапсырмаларды бөлшектеңіз.
Жиынтығы
Жылдам UI - бұл пәндердің жиынтығы: желілік басымдықтар мен кэш, кіші және кеш бандла, секіріссіз болжамды рендер, үнемді суреттер мен қаріптер, сондай-ақ нақты әлемдегі метриканы тұрақты бақылау. Бюджеттерді енгізіңіз, тексерулерді автоматтандырыңыз және команданы жылдамдықты әр қадамда ойлауға үйретіңіз - осылайша интерфейс бүгін және бір жылдан кейін жылдам болады.