Özara täsir tizligi we latency UI

1) Interfeýsiň tizligi näme?

1. Input latency - jestden wakany işleýjä çenli.

2. Network latency - arka/kesh jogap berýänçä.

3. Render latency - esasy akymda gaýtadan işlemek (JS/CSS/layout/paint).

4. Animation latency - işgärleriň tekizligi we durnuklylygy.

Maksat: ulanyjy hereketiň başlandygyny we prosesiň nirä gidýändigini derrew görýär; hakyky netije öňünden aýdylýar.

2) Adam duýgusynyň çäkleri

≤ 50 ms - "ýyldyrym çaltlygy" (çap sesleri, düwmä basmak).
≤ 100 ms - "derrew" (basmak → wizual jogap).
≤ 200 ms - UI reaksiýalarynyň köpüsi üçin kabul ederliklidir.
≤ 1000 ms - aç-açan öňe gidişlikde/skeletde çydamly.

3) RAIL-model we maksatlaýyn býudjetler

R (Jogap): Girişe jogap

Basmak/tap → wizual jogap ≤ 100 ms.
Fokus/hover → ≤ 80-120 ms.

A (Animation): ýumşaklyk

60 FPS ⇒ çarçuwa 16. 7 ms; agyr amallary çarçuwadan çykarmak.
Diňe 'transform '/' opacity' animasiýa edýäris.

I (Idle): Fon meseleleri

50 ms ≤ slotlara bölýäris, idle-penjireleri ulanýarys.

L (Ýüklemek): ýüklemek

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

4) KPI we tizlik aladalary

INP (Interaction to Next Paint): p75 <200 ms (gowy), 200-500 (gowulaşmaly).
Long Tasks (> 50 ms): LT bilen işgärleriň paýy <5%.
TTFB p75 <200 ms (kesh/Edge), LCP p75 <2. 5 sah.
First User Feedback (FUF): hereketiň ilkinji wizual tassyklamasyna çenli wagt ≤ 100 ms.
Formalar üçin "Time-to-Usable": Birinji meýdana girmezden ≤ 1 s.

5) Derrew jogap UX-patternleri

1. Optimistik täzelenmeler: UI-ni birbada üýtgedýäris (balans/stawka/halaýarys), ýalňyşlyk ýüze çykan halatynda yzyna alýarys.
2. Eger gurluşy belli bolsa, spinneriň ýerine skeletonlar.
3. Progress/tapgyrlar: eger prosesiň uzynlygy belli bolsa, kesgitlenen progress bar.
4. Lokal maslahatlar: dessine tostlar/state "Iberýäris"... ≤ 100 ms.
5. Öňünden ýüklemek: hover/görünmek → 'prefetch '/' preload'.

6) Gijikdirmeleri azaltmagyň tehniki usullary

6. 1 Input → Render

Jübi telefonyňyzda 300 ms delay çykaryň: '<meta name = "viewport" content = "width = device-width, initial-scale = 1">'.
Skroll/taç üçin passive diňleýjileri: 'addEventListener (' touchstart ', handler, {passive: true})'.
Düwmä basmak - tassyklamany çalt çyzmak üçin 'requestAnimationFrame'.
Layout-thrash-dan gaça duruň: okamak/ýazmak layout - batchit.

6. 2 JS we esasy akym

Bandllary bölüň (code-splitting), ugurlary boýunça ýükläň.
Kyn hasaplamalar → Web Worker.
'scheduler' ulanyň. postTask '/' requestIdleCallback 'fon meseleleri üçin.
Möhüm CSS - inline; JS с `defer`/`async`.
Sanlaşdyrma sanawy, 'content-visibility: auto', 'contain: content'.

6. 3 Render we animasiýa

'transform/opacity' animasiýa; 'height/left/box-shadow' -y ýüzlerçe elementde animasiýa etmäň.
Animasiýanyň öň ýanynda 'will-change' goýuň; soň arassalamak.
Ullakan PNG ýerine spraytlar/wektor; heavy blur-dan gaça duruň.

6. 4 Tor we kesh

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
Möhüm domenlere Preconnect; Early Hints (103), HTTP/2/3.
Niýet boýunça prefetç (hover/viewport).
Akym/SSR + progressiw gidrasiýa/adalar.

7) Debauns/trottling we nobatlar

Debauns - giriş wagtynda gözlemek üçin (150-300 ms).
Trottling - skroll/resize üçin (100-200 ms).
Ýygy-ýygydan hadysalarda UI täzelenmeleriniň nobatlary/batching (live-data).

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) Ýüklemek we yzyna almak patternleri

Skeleton → Content (süýşmesiz, kesgitlenen beýiklikler).
Shimmer 1200-1600 ms, amplituda ≤ 20%.
Optimistik kartoçka: çal prevyu + tekst - maglumatlar gelende çalyşýarys.
Hata: gysga retry-banner, idempotency-gaýtalama açarlary.

9) Çalt jogap bermek üçin tor strategiýalary

• UI tassyklamasy birbada (optimistik), arka tarapy - idempotent;
• wagt (3-5 s) wagtynda "aldyk, gaýtadan işleýäris" statusynyň görkezilmegi + fon retraýalary;
• Statuslar üçin WebSocket/SSE, backoff 1-2-4-8 s.

Deslapky maglumatlar: warm-up keş, meşhur marşrutlaryň prefetç.

Edge funksiýalary: ulanyja has ýakyn tassyklamalar/agregasiýalar.

10) Çalt UI kod-snippetleri

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) Anyklaýyş we gözegçilik

Meýdan: RUM (meýdan metrikleri) p75 ýurtlar/torlar/enjamlar boýunça.
'input → handler → network → paint'.
"Gyzyl zolaklaryň" belligi: Long Task markers, blocking-time, Slow-route list.
INP/LCP/TTFB pese gaçmak üçin alertler.
Ssenariýa synaglary: "basmak → DOM üýtgetmek" salgylanma wagtyny ýazmak.

12) iGaming aýratynlyklary

• UI: düwmäniň ýagdaýyny derrew düzetmek (pressed → busy), goşa - tost "Kabul edildi".
• Backend: jedel boýunça idempotent açary; status - WebSocket arkaly; wagt → aç-açan "pending".
• UI-býudjet: FUF ≤ 100 ms, jemleýji tassyklama ≤ 1 s (has uzyn bolsa - taýmeri/sebäbini görkezýäris).

• Tizlenme ≤ 200 ms, birmeňzeş aýlanmak, 300-500 ms; tükeniksiz aýlawlar.
• Ýeňşiň gysgyçlary - strobsyz, tekst/jemi okalýar (AAA).

• Delta patchleri her 250-1000 ms, batching;
• wizual diff (ok/reňk/galyňlyk) böküşsiz layout;
• hover/focus täzelenmelerine garşy.

• 40-60 ms batçalar bilen hasaplaryň inkrementi, tablisa sanlary;
• sticky-şlýapa, setirleri wirtuallaşdyrmak.

13) Anti-patternler

Düwmä derrew jogap bermezlik (tora garaşmak).
Agyr animasiýalar 'filter/box-shadow' ýüzlerçe elementde.
Bir ullakan JS-bandl> 1-2 MB kritiki ýol üçin.
"Boşlukdaky Spinner" 1-2 s-den gowrak ösüş/skeletsiz.
Bir tikde layout okamak/ýazmak (layout thrashing).
Mobillerde hover-only funksiýalary.

14) Tizlik bellikleri (dizaýn ulgamy)

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) Tizligiň QA-barlag sanawy

Jogap

• Basmak/tap → wizual jogap ≤ 100 ms; giriş → eho ≤ 50 ms.
• Jübi telefonlarynda 300 ms gijikdirme ýok.
• INP p75 ≤ 200 ms; Long Tasks paýy ≤ 5%.

Ýüklemek

• TTFB ≤ 200 ms; LCP ≤ 2. 5 s; CLS ≤ 0. 1.
• "Asylan" spinnerleriň ýerine skeletler/ösüş.

Render

• Diňe animasiýalarda 'transform/opacity'; massiwlerde "agyr" kölegeler ýok.
• uzyn sanawlar üçin content-visibility/wirtualization.

Tor

• Edge-kesh, preconnect, niýet boýunça prefetch.
• Kritiki hereketler üçin idempotentlik we retralar.

A11y

• 'prefers-reduced-motion' goldanýar.
• Hover-mazmuny fokus/klawiatura arkaly elýeterlidir.

16) Dizaýn ulgamy üçin resminamalar

"Latency Budgets": bosagalar tablisasy (tap, hover, modal, toast, forma).
"Instant Feedback": optimistik hereketleriň nusgalary + yza gaýdyp gelmek.
"Prefetch by Intent": gollanma we utilities.
"Performance Playbook": profil çek sahypalary we RUM-alertleri.
"Do/Don 't": sanlar bilen çalt/haýal ssenariýalaryň mysallary.

Gysgaça gysgaça

Özara gatnaşyk tizligi - derrew jogap + netijäniň öňünden getirilmegi. First-feedback üçin mukaddes býudjet hökmünde 100 ms saklaň, tory optimizirläň (Edge/kesh/prefetch), esasy akymy düşüriň, diňe arzan aýratynlyklary janlandyryň we optimistik nagyşlary ulanyň. Şonda interfeýs janly, düşnükli we durnukly duýulýar - esasanam ýokary nyrhlar we hakyky wagt bilen iGaming ssenariýalarynda.