Oʻzaro taʼsir tezligi va latency UI

1) Interfeys tezligi nima

1. Input latency - imo-ishoradan hodisa protsessorigacha.

2. Network latency - orqa/kesh javobigacha.

3. Render latency - asosiy oqimda ishlash (JS/CSS/layout/paint).

4. Animation latency - kadrlarning silliqligi va barqarorligi.

Maqsad: foydalanuvchi harakat boshlanganini va jarayon qayerga ketayotganini bir zumda ko’radi; haqiqiy natija oldindan aytib bo’lmaydi.

2) Insonni idrok etish chegaralari

≤ 50 ms - «chaqmoq tezligida» (bosma aks-sado, tugmani bosish).
≤ 100 ms - «bir zumda» (klik → vizual javob).
≤ 200 ms - ko’pchilik UI reaksiyalar uchun yo’l qo’yiladi.
≤ 1000 ms - aniq progress/skeletonda chidash mumkin.

3) RAIL-model va maqsadli budjetlar

R (Response): kirish uchun javob

Klik/tap → vizual javob ≤ 100 ms.
Fokus/hover → ≤ 80-120 ms.

A (Animation): silliq

60 FPS ⇒ 16 kadr. 7 ms; og’ir operatsiyalarni kadrdan chiqarish.
Faqat’transform ’/’ opacity’ni jonlantiring.

I (Idle): orqa fon vazifalari

50 ms ≤ slotlarga bo’lamiz, idle-derazalardan foydalanamiz.

L (Load): yuklash

TTFB ≤ 200 ms, LCP ≤ 2. 5 s, INP ≤ 200 ms, CLS ≤ 0. 1.

4) KPI va tezlik alertlari

INP (Interaction to Next Paint): p75 <200 ms (yaxshi), 200-500 (yaxshilash kerak).
Long Tasks (> 50 ms): LT bilan kadrlar ulushi <5%.
TTFB p75 <200 ms (kesh/Edge), LCP p75 <2. 5 q.
First User Feedback (FUF): birinchi vizual tasdiqlash uchun vaqt ≤ 100 ms.
Shakl uchun Time-to-Usable: ≤ 1 s birinchi maydonni kiritishdan oldin.

5) bir zumda javob beradigan UX-patternlar

1. Optimistik yangilanishlar: biz UIni darhol o’zgartiramiz (balans/stavka/layk), xato bo’lganda konkida uchamiz.
2. Agar tuzilishi ma’lum bo’lsa, spinner o’rniga skeletonlar.
3. Progress/bosqichlar: determinirlangan progress bar, agar jarayonning uzunligi ma’lum bo’lsa.
4. Lokal maslahatlar: tezkor tostlar/« Jo’natamiz »steyti... ≤ 100 ms.
5. Oldindan yuklash: hover/koʻrinish →’prefetch ’/’ preload’.

6) Kechikishlarni kamaytirishning texnik usullari

6. 1 Input → Render

Mobil telefonda ms delay 300 olib tashlang:’<meta name = «viewport» content = «width = device-width, initial-scale = 1»>.
’addEventListener (’ touchstart’, handler, {passive: true})’.
Tasdiqlashni tezda chizish uchun «requestAnimationFrame» yoki «mikro topshiriqqa» bosish.
Layout-thrash: oʻqish/yozishdan qoching layout - batchit.

6. 2 JS va asosiy oqim

Bandlalarni ajrating (code-splitting), yo’nalishlar bo’yicha yuklang.
Og’ir hisoblash → Web Worker.
’scheduler’ dan foydalaning. postTask ’/’ requestIdleCallback’orqa fon vazifalari uchun.
Tanqidiy CSS - inline; JS с `defer`/`async`.
Roʻyxatlarni virtual qilish,’content-visibility: auto’,’contain: content’.

6. 3 Render va animatsiyalar

’transform/opacity’ ni jonlantiring; ’height/left/box-shadow’ ni yuzlab elementlarda jonlantirmang.
’will-change’ ni vaqtincha animatsiya oldiga qoʻyish; keyin tozalash.
Ulkan PNG oʻrniga spraytlar/vektor; heavy blur dan qoching.

6. 4 Tarmoq va kesh

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
Kritik domenlarga Preconnect; Early Hints (103), HTTP/2/3.
Niyat boʻyicha prefetch (hover/viewport).
Streaming/SSR + progressiv gidratsiya/orollar.

7) Debauns/trottling va navbatlar

Debauns - kirish vaqtida qidirish uchun (150-300 ms).
Trottling - skroll/resize uchun (100-200 ms).
Tez-tez sodir bo’ladigan yangilanishlar uchun navbatlar/batching (live-ma’lumotlar).

js const debounce = (fn, ms=200)=>{let t; return (...a)=>{clearTimeout(t); t=setTimeout(()=>fn(...a),ms)}}
const throttle = (fn, ms=120)=>{let t=0; return (...a)=>{const n=Date. now(); if(n-t>ms){t=n; fn(...a)}}}

8) Yuklash va qayta aloqa patternlari

Skeleton → Content (siljishlarsiz, belgilangan balandliklar).
Shimmer 1200-1600 ms, amplituda ≤ 20%.
Optimistik kartochka: kulrang prevyu + matn - ma’lumotlar kelganda almashtiramiz.
Xato: qisqa retry banner, idempotency-takrorlash kalitlari.

9) Tezkor javob berish uchun tarmoq strategiyalari

• UI tasdig’i darhol (optimistik), backend - idempotent;
• taymaut (3-5 s) da «oldik, ishlayapmiz» maqomini ko’rsatish + fon retralari;
• Statuslar uchun WebSocket/SSE, backoff 1-2-4-8 s.

Pre-ma’lumotlar: jadval bo’yicha warm-up kesh, mashhur yo’nalishlar prefetch.

Edge funksiyalari: validatsiyalar/agregatsiyalar foydalanuvchiga yaqinroq.

10) Kod-snippet tezkor UI

js btn. addEventListener('click', () => {
btn. classList. add ('is-busy') ;//requestAnimationFrame instant visual response (async () => {
try {
const res = await fetch('/api/action', { method: 'POST', body: payload });
if (!res.ok) throw new Error('fail');
btn. classList. add('is-done');
} catch {
btn. classList. remove('is-busy'); btn. classList. add('is-error');
}
});
});

js const prefetch = url => fetch(url, { credentials:'include', priority:'low' }). catch(()=>{});
document. querySelectorAll('a[data-prefetch]'). forEach(a=>{
a. addEventListener('mouseenter', () => prefetch(a. href), { once:true });
const io=new IntersectionObserver(e=>{ if(e[0].isIntersecting){prefetch(a. href); io. disconnect();} });
io. observe(a);
});

css
.btn. is-busy { pointer-events:none; }
.skeleton { position:relative; background: var(--bg-elevated); overflow:hidden; }
.skeleton::after {
content:""; position:absolute; inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
animation: shimmer 1. 4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }

11) Diagnostika va monitoring

Maydon: RUM (dala metrikasi) p75 mamlakatlar/tarmoqlar/qurilmalar boʻyicha.
’input → handler → network → paint’.
«Qizil zonalar» belgisi: Long Task markerlari, blocking-time, Slow-route list.
INP/LCP/TTFB degradatsiyasiga alertlar.
Ssenariy testlari: «klik → DOM o’zgartirish» etalon vaqtini yozish.

12) iGaming xususiyatlari

• UI: tugma holatini tezda qayd etish (pressed → busy), dubl - tost «Qabul qilindi».
• Bekend: idempotent stavka bo’yicha kalit; maqomi - WebSocket orqali; taymaut → shaffof «pending».
• UI-budjet: FUF ≤ 100 ms, yakuniy tasdiqlash ≤ 1 s (agar uzoqroq bo’lsa - taymer/sababni ko’rsatamiz).

• Tezlashtirish ≤ 200 ms, bir tekis aylanish, 300-500 ms; cheksiz tsikllarsiz.
• Yutuq tugmalari - strubasiz, matn/summa o’qish mumkin (AAA).

• Delta patchi 250-1000 ms da bir marta, batching;
• layout sakrashsiz vizual diff (strelka/rang/qalinlik);
• hover/focus yangilanishlariga qarshi.

• hisobvaraq inkrement batchami 40-60 ms, jadval raqamlari;
• sticky-shapka, satrlarni virtuallashtirish.

13) Anti-patternlar

Bosish (tarmoqni kutish) ga bir zumda javob berilmaydi.
Yuzlab elementlardagi’filter/box-shadow’ogʻir animatsiyalari.
Bitta ulkan JS bandl> 1-2 MB tanqidiy yo’l.
«Spinner bo’shliqda» 1-2 s dan ortiq progress/skeletsiz.
Bitta tikda layout oʻqish/yozish (layout thrashing).
Hover-only mobil aloqa funksiyalari.

14) Tezlik tokenlari (dizayn-tizim)

json
{
"latencyBudget": {
"tapFeedbackMs": 100,
"keyEchoMs": 50,
"hoverMs": 120,
"pressMs": 90,
"modalInMs": 240,
"toastInMs": 200
},
"webVitalsTargets": { "INP": 200, "LCP": 2500, "CLS": 0. 1, "TTFB": 200 },
"animation": {
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"duration": { "hover": 160, "active": 90, "overlay": 240 }
}
}

15) Tezlik QA-chek-varag’i

Javob

• Klik/tap → vizual javob ≤ 100 ms; kirish → aks-sado ≤ 50 ms.
• Mobil telefonda 300 ms kechikish yo’q.
• INP p75 ≤ 200 ms; Long Tasks ulushi ≤ 5%.

Yuklash

• TTFB ≤ 200 ms; LCP ≤ 2. 5 s; CLS ≤ 0. 1.
• «Osilgan» spinnerlar o’rniga skeletonlar/taraqqiyot.

Render

• Faqat animatsiyalarda’transform/opacity’; massivlarda «og’ir» soyalar yo’q.
• Uzun roʻyxatlar uchun content-visibility/virtualizatsiya.

Tarmoq

• Edge-kesh, preconnect, niyat boʻyicha prefetch.
• Tanqidiy harakatlar uchun idempotentlik va retraj.

A11y

• ’prefers-reduced-motion’qoʻllab-quvvatlandi.
• Hover-kontent fokus/klaviatura orqali mavjud.

16) Dizayn-tizim uchun hujjatlar

«Latency Budgets»: ostonalar jadvali (tap, hover, modal, toast, shakl).
«Instant Feedback»: optimistik harakatlar patterni + orqaga qaytish.
«Prefetch by Intent»: gidlar va yordamchilar.
«Performance Playbook»: profillash chek-varaqlari va RUM-alertlar.
«Do/Don’t»: raqamlar bilan tezkor/sekin ssenariylar misollari.

Qisqacha xulosa

O’zaro ta’sir tezligi - bu tezkor javob + natijani oldindan aytib bo’ladigan yetkazib berish. first-feedback uchun muqaddas byudjet sifatida 100 ms saqlang, tarmoqni optimallashtiring (Edge/kesh/prefetch), asosiy oqimni tushiring, faqat arzon xususiyatlarni jonlantiring va optimistik namunalarni qo’llang. O’shanda interfeys jonli, tushunarli va barqaror tuyuladi - ayniqsa iGaming ssenariylarida yuqori stavkalar va real vaqt.