Танбалӣ ва UX-суръатбахшӣ

1) Ҳадафҳо ва принсипҳо

• TTI/LCP-ро аз ҳисоби роҳи интиқодӣ кам кунед.
• Тарҳбандиро (CLS-и паст) бо андозаҳои пешбинишаванда устувор кунед.
• Батарея ва трафикро ба мобилӣ сарфа кунед.
• Баланд бардоштани табдилдиҳӣ - Корбар амалро қаблан мебинад.

Принсипҳо: афзалият → пешрафт → пешгӯишаванда. Аввалан, мундариҷаи интиқодӣ, баъд мундариҷаи прогрессивӣ ва такмилдиҳии пас аз сарборӣ.

2) Роҳи интиқодӣ

HTML-и интиқодӣ: Нишони "болотар аз боло" -ро фавран диҳед.
CSS интиқодӣ: inline ≤ 10-15 KB; боқимонда 'media = "print"' + swap/reload.
JS ҳамчун блокатор: 'defer '/' async', тақсимоти қисм, мантиқи бор дар масирҳо.
Ҳуруфҳо: 'ҳуруф-дисплей: своп' ихтиёрӣ ', WOFF2 пешакӣ, афтиши система' ва.

3) Афзалияти захираҳои шабака

Пеш аз пайвастшавӣ ба CDN/шрифтҳо/тасвирҳо (TCP + TLS пешакӣ).
DNS prefetch барои домейнҳои сеюм.
Боркунии пешакии тасвирҳо/ҳуруфҳо/скриптҳо.
Маслиҳатҳои афзалиятнок ('аҳамият =' баланд '' паст ',' fetchpriority = 'баланд' 'барои тасвири қаҳрамон).
HTTP/3/QUIC: таъхири камтар; CDN-канор ба корбар наздиктар аст.
Сиёсати кэш: 'тағйирнопазир' барои дороиҳои санҷидашуда; дуруст ET bag/Last-Modified.

4) Давлатҳои прогрессивӣ ва зеркашӣ

Скелетҳо/Шиммерҳо ба ҷои spinners: пешрафти визуалӣ бидуни "ҷаҳидан".
Ҷойгоҳҳои андозаи собит (кортҳо, ангуштҳо) - сифр CLS.
Ҷараён/Chunked HTML: зуд чаҳорчӯбро ҷудо кунед, баъд мундариҷа илова кунед.
UI оптимистӣ (эҳтиёт): амали фаврӣ пас аз тасдиқ.

5) Мундариҷаи боркунии танбалӣ

Тасвирҳо:' боркунӣ =" танбалӣ"',' рамзкушоӣ =" асинк"', форматҳои AVIF/WebP (афтиши JPEG/PNG).
Ҷавоб: 'srcset '/' андоза' дар зери DPR/паҳнои гуногун; 3 × бор накунед, ки 1 × кифоя аст.
Баландии пешбинишаванда: 'паҳнӣ/баландӣ' ё CSS 'таносуби таносуб'.
Видео: 'preload = "metadata"', плакатҳои пас аз боркунӣ, таваққуфи берун аз намоиш.
Нишонаҳо: sprite/inline SVG; аз дархостҳои нолозими HTTP худдорӣ кунед.

6) Ҷузъҳо ва масирҳои танбал

Тақсимоти код: воридоти динамикӣ аз рӯи хатсайрҳо/виджетҳо.
Компонентҳои ҷазира/Рутубати қисман: Танҳо минтақаҳои интерактивии аниматсионӣ.
SSR/SSG + ISR: HTML-ро дар сервер пешниҳод кунед, тадриҷан навсозӣ кунед.
Suspense/Defer (дар чаҳорчӯбаи истифодашуда): таҷзияи маълумот ва UI.

7) Рӯйхатҳо ва ҷадвалҳои калон

шамол-Рендер танҳо минтақаи намоён + буфер.
Аз нав бор кардани лангар: ҳангоми аз нав бор кардани бастаҳо мавқеъро нигоҳ доред.
Навсозиҳои партия: ҳангоми ҳаракат ба ҳадди ақалл кам кунед.
Баландии собит ё 'андозаи-континенталӣ' барои андозаҳои пешбинишаванда.

8) Суръатдиҳандаҳои CSS ва браузер

'контент-намоён: худкор': браузер ноаён мегузарад (ҳисобкунии ҳадди аққал).
'contain '/' will-change': таъсири услубҳо/тарҳро маҳдуд мекунад.
Аниматсияҳо: танҳо табдил/шаффофият; пешгирӣ аз тарҳ/эффектҳои вазнин.
Соя ва норавшан - сарфакорона, хусусан дар рӯйхатҳо.

9) Идоракунии сарбории чорабинӣ ва JS

Шунавандагони ҳаракатдиҳии ғайрифаъол/таха ('{ғайрифаъол: ҳақиқӣ}').
Debounce/drottle барои тағир додан/ҳаракат кардан/коркард.
Оғози ба таъхир афтодани виджетҳо дар беруни viewport (CoutsectIon Observer).
Муҳоҷирати компютерҳои вазнин ба коргарони веб.

10) Контексти мобилӣ

Шабака: суст 3G/high RTT - зеркашии танбал хашмгинтар аст.
Батарея ва гармӣ: басомади таймерҳоро маҳдуд кунед, FPS-и аниматсияҳои пасзаминаро кам кунед.
Фишурдасозӣ: Brotli барои матн, 'Қабул-Рамзгузорӣ' -ро дуруст кунед.
Prefetch бар Wi-Fi танҳо барои гузаришҳои эҳтимолӣ (таърихи кликҳо).

11) Дастрасӣ ва SEO

Мундариҷаи ≠ скелет: ба хонандагони экран халал намерасонад; тартиби мантиқии фокус.
Сервер HTML матни калидӣ - ҳама чизро дар паси JS пинҳон накунед.
Матнҳо ва сарлавҳаҳои Alt то аз нав бор кардан дастрасанд.
Мазмуни танбалӣ набояд масирҳоро аз клавиатура боздорад.

12) Нишондиҳандаҳо ва ҳадафҳо

LCP (қаҳрамон-тасвир/сарлавҳа): ≤ 2. 5 с (мобилӣ).
INP (вокуниши вуруд): ≤ 200 мс.
CLS: ≤ 0,1.
TTFB: ≤ 500 мс; TTI: ≤ 3с.
Байтҳо бар сим (назари аввал): буҷаи қатъӣ (масалан, ≤ 200-300 КБ Крит. захираҳо).
Ҷойивазкунӣ: <1% чорчӯба> 16. 7 мс.

• 'lazy _ enqueuled '/' lazy _ loated' (id, намуд, андоза, таъхир),
• 'component _ hydrated' (вақт, вазни JS),
• 'virtualized _ window _ resize',
• 'lcp _ doment _ нишон дода шудааст', 'skeleton _ time _ намоён',
• хатогиҳо ('img _ хато', 'decode _ timeout').

13) Намунаҳо барои минтақаҳои маъмулӣ

Home/Directory: Кортҳои скелети SSR +, тасвирҳои танбал, филтрҳои прогрессивӣ.
Корти маҳсулот/бозӣ: пешакии тасвири қаҳрамон + афзалияти баланд; галерея - танбал; бознигариҳо - бо клик.
Мақолаҳои дароз/вики: TOC, пешрафти хониш, танбалӣ барои блокҳои медиа/код, ҷадвалҳои таъхиршудаи мундариҷа.
Лентаҳои зинда: виртуализатсияи хат, таваққуфи худкор, маҳдудияти буферӣ.

14) Антипаттернҳо

Spinner-экрани пурра> 1-2 s бе пешрафт.
Танбалӣ бе дорандагони маҳаллӣ → ҷаҳиши тарҳ (CLS).
Зеркашии "ҳама JS якбора" барои сенарияҳои нодир.
Шрифтҳо/тасвирҳои вазнинро ба қисми муҳим дохил кунед.
Андозаи корти пешгӯинашаванда → мундариҷаи роуминг.
Боркунии танқидии танбалӣ (лого, матни қаҳрамон) - LCP-ро вайрон мекунад.
Ягон мавқеъ пас аз "бозгашт" бармегардад.

15) Рӯйхати назорати амалисозӣ (зина ба зина)

Спринт 1 - Ташхис: LCP/INP/CLS/TTFB чен кунед; Харитаи захираҳо ва роҳи муҳим.
Sprint 2 - Танқид/Афзалият: CSS/HTML, 'preconnect '/' preload', коҳиш додани қисмҳои JS.
Sprint 3 - Медиа: AVIF/WebP, 'srcset/андоза', андозаҳои собит, танбалӣ барои қаҳрамон.
Спринт 4 - Рӯйхатҳо: виртуализатсия, азнавборкунии лангар, скелетҳо/тобнок.
Спринт 5 - Меъморӣ: қисман гидратсия/ҷазираҳо, SSR/SSG/ISR, ҷараён.
Sprint 6 - Танзими хуб: 'намоёнии мундариҷа', маслиҳатҳои афзалиятнок, debounce, коргарони веб.
Спринт 7 - A/B ва телеметрия: вариантҳои скелет, сатҳи танбалӣ, буҷетҳоро муқоиса кунед.
Sprint 8 - Нашри гигиена: версияҳои дороиҳо, сарпӯши нақд, стратегияҳои бозгашт.

16) Луғат (мухтасар)

Боркунии танбалӣ - ба таъхир гузоштани мундариҷаи ноаён.
LCP/INP/CLS/TTFB/TTI/TBT ченакҳои асосии UX мебошанд.
Тақсимоти код/гидратсия/ҷазираҳо - усулҳои пошхӯрӣ ва эҳёи UI.
Виртуализатсия - Рӯйхати намоёнро пешниҳод кунед.
Маслиҳатҳои афзалиятнок/Preconnect/Preload - дастурҳо ба браузер дар бораи он, ки чӣ пештар бор кардан лозим аст.
Намоиши мундариҷа - партофтани ҳисобҳо барои мундариҷаи ноаён.

17) Сатри поён

Боркунии танбалӣ "гузоштан" = "танбалӣ" нест ва анҷом дода мешавад. "Ин система аст: роҳи интиқодӣ, форматҳои дурусти ВАО, интерактивии ҷазира, виртуализатсия ва телеметрия. Лаҳзаи муҳимро, дуюмдараҷа ва арзон ва тарҳро пешгӯишаванда созед. Он гоҳ маҳсулот дар ҳама гуна дастгоҳ ва дар ҳама гуна шабака зуд эҳсос хоҳад шуд.