Оптимизатсияи иҷрои UI
1) Он чизе ки "зуд" ҳисоб мешавад
TTFB (вақт ба байти аввал) - сервери тез/ҷавоби CDN.
LCP (Бузургтарин мундариҷаи мундариҷа) - мундариҷаи "асосӣ" зуд пайдо шуд.
INP (Ҳамкорӣ ба рангҳои навбатӣ) - вокуниш ҳангоми ҳамкорӣ.
CLS (Cumulative Layout Shift) - набудани jitter интерфейс.
TTI (Вақт ба интерактивӣ) - вақте ки ҳама чиз аллакай ҷавоб медиҳад.
Нуқтаҳои тавсияшаванда: LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (барои 75 фоизи корбарони воқеӣ).
2) Раванд: андозагирӣ → дарёфт кардани монеаҳо → ислоҳи буҷа
1. Андоза: RUM (корбарони воқеӣ, фоизҳо аз рӯи кишвар/шабака/дастгоҳ) + синтетика (Маяк/браузерҳо).
2. Дарёфт: Профили иҷро (вазифаҳои дароз> 50мс, партофтани тарҳ, пешниҳоди иловагӣ).
3. Ислоҳ: буҷетҳо (вазни JS/CSS/ҳуруфҳо, LCP/INP) ва "хатҳои сурх" дар CI.
3) Боркунии шабака ва захираҳо
3. 1 HTTP ва афзалиятҳо
Фаъол кардани HTTP/2/3, фишурдани Brotli.
'ба доменҳои интиқодӣ пайваст кунед' доменҳои дуюмдараҷа dns-prefetch 'to.
'захираҳои интиқодии preload' for (тасвири қаҳрамон, ҳуруфи асосӣ).
' fetchpriority =" баланд/паст"' ва 'priority' маслиҳатҳое, ки дастгирӣ мешаванд.
3. 2 Кэшинг
Статикӣ бо ҳаши файл: 'Кэш-Назорат: оммавӣ, макс-синну сол = 31536000, тағйирнопазир'.
HTML - кӯтоҳ TTL + кӯҳна-дар ҳоле ки-таҷдиди назар тавассути CDN.
Корманди ET/Last-Modified ва хидматрасонӣ барои боздидҳои офлайнӣ/такрорӣ.
4) Кодекс: камтар, баъдтар, "ҳамвор"
4. 1 маҷлис
Дарахти ларзон, минифӣ (в т. ч. мурда-рамз-элим).
Тақсимоти код аз рӯи хатсайрҳо/виджетҳо, воридоти динамикӣ.
Аз бастаҳои вазнини "глобалӣ" дар бастаи асосӣ канорагирӣ кунед (лаҳза → Intl/Day). js).
4. 2 Таҳвил ва таҳвили HTML
SSR/ISR/ҷараён: аввал чаҳорчӯба ва мундариҷаи асосиро диҳед.
Рутубати қисман/ҷазираҳо: танҳо минтақаҳои интерактивӣ.
Ҳамаи ғайри интиқодиро муайян кунед: '<скрипти навъи = "модул" defer>'.
4. 3 Хусусияти реаксия (агар реаксия истифода шавад)
'Муносибат кунед. танбалӣ '+' Suspense 'барои виджетҳои танбал.
'Start' Transition 'and' Deferrupdated 'барои филтрҳо/ҷустуҷӯҳои вазнин.
RSC (Компонентҳои сервер) - Ҳисобҳои сервер, камтар аз JS дар муштарӣ.
Интихобкунандагон дар (zustand/redux): ҷузъро ба қисмҳо имзо кунед, на ба тамоми анбор.
5) Намоиш ва ҳолат: дар куҷо "суст мешавад"
5. 1 Ҷудокунии rerenders
Компонентҳои калонро нест кунед, меморандум кунед ('memo', 'use
Калидҳои рӯйхат устувор мебошанд; функсияҳои/объектҳои навро дар танбаҳо нолозим эҷод накунед.
Барои тағир додани маълумот аз контексти "глобалӣ" канорагирӣ кунед - интихобкунандагон ё автобусҳои ҳодисаро истифода баред.
5. 2 Виртуализатсия ва рӯйхатҳои калон
Ҷадвалҳо/ҷадвалҳо → виртуализатсия (равзанаи намоиш).
Пагинатсия/ҳаракатҳои беохир бо backpressure (якбора 100 к хатро бор накунед).
Ба таъхир андохтани виджетҳои вазнин берун аз нуқтаи назар.
5. 3 Тарҳ ва ранг
мундариҷа-намоён: худкор; барои қисмҳои пинҳон (браузер нонамоёнро нишон намедиҳад).
барои андозаҳои пешбинишаванда дорои ва 'дорои-дохили-андоза' мебошанд.
Нагузоред, ки сабтҳо зуд-зуд хонда шаванд (тарҳ кардани тарҳ); андозагирии гурӯҳӣ.
истифодаи онро тағир медиҳад (ба таври дигар хотира/қабатҳои иловагӣ).
6) Тасвирҳо ва графика
Форматҳо: AVIF/Web-P (нокомӣ дар PNG/JPEG).
Равиши вокуниш: 'srcset' + 'андозаҳо', зичӣ барои ретинадорӣ.
' боркунӣ =" танбалӣ"' барои тасвирҳои қаҳрамон; афзалият/пешакӣ - танҳо барои номзади LCP.
Ҷойгоҳҳои андозаи собит → ҷаҳиши CLS нест.
Canvas/диаграммаҳо: рангҳои экрани экран ва коргари веб барои ҳисобҳо; butching redraws.
7) Шрифтҳо ва матн
Як ё ду шрифти тағйирёбанда ба ҷои бисёр услубҳо.
'font-display: своп '/' ихтиёрӣ', сарборӣ барои услуби асосӣ.
'андоза-танзим' барои кам кардани "ҷаҳидан" ҳангоми тағир додани ҳуруф.
Ҳуруфҳои пастравии маҳаллӣ бо ченакҳои шабеҳ.
8) CSS ва аниматсияҳо
Хатти CSS-и интиқодӣ (<14-20 КБ), истироҳат - ба таъхир гузошта мешавад.
Нест кардани услубҳои истифоданашуда (Purge/CSST .ree).
Агар имконпазир бошад, аниматсияҳо оид ба табдил/шаффофият; эҳтиром 'ҳаракатро коҳиш медиҳад'.
Аз каскадҳои амиқ ва интихобкунандагони таркиш канорагирӣ кунед.
9) Кормандони веб, Вазифаҳои ҷараён ва вазнин
Ҳама CPU-вазнин - дар коргар (таҳлил, навъбандӣ, ҷамъбаст, ML).
Ҷараёни API-ҳо ('Readable', 'бо ҷараёнҳо') барои посухҳои дароз.
Тақсим кардани вазифаҳо ба қисмҳо тавассути 'Request
10) Устувории тарҳ (CLS)
Фазои захиравӣ барои элементи LCP (тасвир/виҷет).
Баннерҳо/лентаҳоро бе андозаи собит ҷойгир накунед.
Tultips асимметрӣ/тостҳо - мундариҷаро ҳаракат надиҳед; қабатҳои/порталҳоро истифода баред.
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) Назорати регрессия ва буҷетҳо
Бастаи буҷет: маблағи умумии JS N k
Веб-виталҳо дар CI (тақлидшуда) + RUM-огоҳиҳо (оид ба фоизҳо).
Таҳлили бастаҳо: манбаъ-харита-муҳаққиқ/таҳлилгар дар PR.
Нишондиҳандаҳои иҷрои ҷузъҳо (нишон додани 10к элемент, вақти реаксия).
13) Анти-намунаҳо
Бор кардани "ҳама якбора": графикҳо, муҳаррирон, харитаҳо дар экрани аввал.
Давлати бузурги ҷаҳонӣ § rerenders cascading.
Тасвирҳои 2-4 × андозаи дилхоҳ, бе 'srcset/андоза'.
Ҳалқаҳои синхронии дароз дар риштаи асосӣ.
'ouline: ҳеҷ гуна ҳиллаҳои фармоишӣ бидуни оптимизатсия - ба нишондиҳандаҳои намоиш халал мерасонанд.
Аниматсияҳо аз ҷониби 'боло/чап' (тарҳро вайрон кунед ва рефлюкс занг занед).
14) Рӯйхати экрани экран
- LCP ≤ 2. 5 с дар трафики 3G/mobile, CLS ≤ 0. 1, INP ≤ 200ms
- Захираҳои муҳим: сарборӣ/афзалиятҳо; боқимонда дефер/танбал аст
- Бастаҳо: тақсимоти код, вобастагии иловагӣ нест
- Рӯйхат/Виртуализатсияи ҷадвал, Оғози виҷети вазнин
- Тасвирҳо: AVIF/Web' P,' srcset/андоза ',' боркунӣ =" танбалӣ"
- Шрифтҳо: тағирёбанда + 'ҳуруф-дисплей', пешакӣ танҳо дилхоҳ
- CSS: хатти интиқодӣ, поксозӣ, 'намоёнии мундариҷа' ва 'дар ҳолати зарурӣ'
- Коргарон/корношоям барои ҳисоббарории вазнин
- Буҷетҳо ва веб-виталҳо ба панели/огоҳиҳо пайваст карда шудаанд
15) Нақшаи амалисозӣ (3 такрорӣ)
Итератсия 1 - Ғолибони зуд (1-2 ҳафта)
Даргиронидани Brotli/HTTP-2/3, CDN. CSS интиқодӣ ва захираҳои LCP пешакӣ бор кунед.
Гузаронидани виджетҳои вазнин ба воридоти динамикӣ.
Тасвирҳо → AVIF/Web-P + 'srcset'. Ҳуруфҳо: 'ҳуруф-дисплей: мубодила'.
Итератсия 2 - Такмили сохторӣ (3-4 ҳафта)
Рамзи тақсимкунӣ аз рӯи масир, таҳлили бастаҳо, бартараф кардани либҳои "вазнин".
Рӯйхати виртуализатсия, намоёни мундариҷа, дорои андозаи дохилӣ.
Татбиқи SSR/ҷараён/ҷазираҳо (дар ҷойҳои мувофиқ).
RUM бо Web-Vitals, буҷаҳо дар CI.
Итератсия 3 - миқёс ва устуворӣ (давомдор)
Коргарон/рони экрани экран, ҳисобҳои қассобӣ, start
Аудити мунтазами перф, регрессияи худкори ҳазм, омӯзиши гурӯҳӣ.
16) Мини-FAQ
Чӣ бештар дар мобилӣ суръат мегирад?
Кам кардани JS-и аслӣ, SSR/ҷараён ва оптимизатсияи тасвири LCP.
Оё ба ман ҳамеша SSR лозим аст?
Не, ин тавр нест. Агар саҳифа динамикӣ интерактивӣ бошад ва суст нигоҳ дошта шавад, ҷазираҳо/рутубати қисман метавонанд беҳтар бошанд.
Чаро INP бо бастаи "сабук" бад аст?
Шояд вазифаҳои тӯлонӣ (мураттабкунӣ, графика) дар риштаи асосӣ - онҳоро ба коргар биёред ва вазифаҳоро тақсим кунед.
Ҷамъ
Fast UI маҷмӯаи фанҳо мебошад: афзалиятҳои шабака ва кэш, бастаҳои хурд ва дер, намоиши пешгӯишавандаи ҷаҳиш, тасвирҳои иқтисодӣ ва ҳуруфҳо ва назорати доимии метрикии воқеӣ. Буҷетҳоро ворид кунед, чекҳоро автоматӣ кунед ва ба даста таълим диҳед, ки дар ҳар қадам дар бораи суръат фикр кунанд - ҳамин тавр интерфейс имрӯз ва дар як сол босуръат боқӣ хоҳад монд.