Qarşılıqlı təsir sürəti və latency UI

1) Interfeys sürəti nədir

1. Input latency - jestdən hadisə prosessoruna qədər.

2. Network latency - arxa/keşin cavabına qədər.

3. Render latency - əsas axın üzərində emal (JS/CSS/layout/paint).

4. Animation latency - kadrların hamarlığı və sabitliyi.

Məqsəd: istifadəçi dərhal aksiyanın başladığını və prosesin hara getdiyini görür; real nəticə proqnozlaşdırıla bilər.

2) İnsan qavrayışının həddi

≤ 50 ms - «ildırım sürəti» (çap əks-sədası, düyməni basmaq).
≤ 100 ms - «ani» (klik → vizual cavab).
≤ 200 ms - əksər UI reaksiyaları üçün icazə verilir.
≤ 1000 ms - aydın irəliləyişdə/skeletonda dözümlüdür.

3) RAIL modeli və hədəf büdcələri

R (Response): giriş cavab

Klik/tap → vizual cavab ≤ 100 ms.
Focus/hover → ≤ 80-120 ms.

A (Animation): hamarlığı

60 FPS ⇒ 16 çərçivə. 7 ms; ağır əməliyyatlar çərçivədən çıxarmaq.
Yalnız 'transform '/' opacity' animasiyası.

I (İdle): Fon tapşırıqları

50 ms ≤ slotlara bölünür, idle-pəncərələrdən istifadə edirik.

L (Yük): yükləmə

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

4) KPI və sürət riskləri

INP (Interaction to Next Paint): p75 <200 ms (yaxşı), 200-500 (təkmilləşdirilməlidir).
Long Tasks (> 50 ms): LT ilə kadr payı <5%.
TTFB p75 <200 ms (cache/Edge), LCP p75 <2. 5 s.
First User Feedback (FUF): ilk vizual əməliyyat təsdiq qədər vaxt ≤ 100 ms.
Formalar üçün istifadə edilə bilər: ≤ 1 s birinci sahəni daxil etməzdən əvvəl.

5) Ani cavab UX nümunələri

1. Optimist yeniləmələr: Dərhal UI-ni dəyişdirin (balans/bahis/like), səhv olduqda geri çəkin.
2. Quruluşu bilinirsə, spinner əvəzinə skeletonlar.
3. Tərəqqi/mərhələlər: prosesin uzunluğu bilinirsə, determinik tərəqqi.
4. Yerli məsləhətlər: ani tost/state «Göndərmək»... ≤ 100 ms.
5. Əvvəlcədən yükləmə: hover/görünürlük → 'prefetch '/' preload'.

6) Gecikmələrin azaldılması üçün texniki üsullar

6. 1 Input → Render

Mobil cihazlarda 300 ms delay çəkin: '<meta name = «viewport» content = «width = device-width, initial-scale = 1»>'.
Scroll/tac üçün passive dinləyiciləri: 'addEventListener (' touchstart ', handler, {passive: true})'.
Klik emalı - təsdiqi tez bir şəkildə çəkmək üçün bir mikro tapşırığa və ya 'requestAnimationFrame'.
layout-thrash çəkinin: oxumaq/yazmaq layout - batchit.

6. 2 JS və əsas axını

Bandlları bölün (code-splitting), marşrutlar üzrə yükləyin.
Ağır hesablama → Web Worker.
'scheduler istifadə edin. postTask '/' requestIdleCallback 'arxa plan tapşırıqları üçün.
Kritik CSS - inline; JS с `defer`/`async`.
Siyahıların virtuallaşdırılması, 'content-visibility: auto', 'contain: content'.

6. 3 Render və animasiya

Animasiya 'transform/opacity'; yüzlərlə elementdə 'height/left/box-shadow' animasiya etməyin.
Animasiyadan əvvəl müvəqqəti olaraq 'will-change' qoyun; sonra təmizləmək.
Böyük PNG əvəzinə sprayt/vektor; ağır blur çəkinin.

6. 4 Şəbəkə və önbellək

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
Kritik domenlərə Preconnect; Early Hints (103), HTTP/2/3.
Niyyət prefetch (hover/viewport).
Streaming/SSR + mütərəqqi hidrasiya/adalar.

7) Deboons/Trottling və növbələr

Debauns - giriş zamanı axtarış üçün (150-300 ms).
Trottling - scroll/resize üçün (100-200 ms).
Tez-tez baş verən hadisələrdə növbələr/batching UI yeniləmələri (canlı məlumatlar).

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) Yükləmə və geribildirim nümunələri

Skeleton → Content (dəyişmədən, sabit hündürlüklər).
Shimmer 1200-1600 ms, amplituda ≤ 20%.
Optimist kart: boz preview + mətn - məlumat gəldikdə əvəz.
Səhv: qısa retry banner, idempotency-təkrarlama açarları.

9) Sürətli cavab üçün şəbəkə strategiyaları

• dərhal UI təsdiq (optimist), arxa - idempotent;
• Taymaut zamanı (3-5 s) «aldıq, emal edirik» statusunun nümayişi + fon retrayları;
• Statuslar üçün WebSocket/SSE, backoff 1-2-4-8 s.

Pre-data: warm-up cache cədvəli, prefetch məşhur marşrutlar.

Edge funksiyaları: istifadəçiyə daha yaxın validasiya/aqreqasiya.

10) Sürətli UI kodu

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) Diaqnostika və monitorinq

Sahə: RUM (sahə metrikası) p75 ölkələr/şəbəkələr/cihazlar üzrə.
Klik izi: 'input → handler → network → paint'.
«Qırmızı zonalar» nişanı: Long Task markers, blocking-time, Slow-route siyahısı.
INP/LCP/TTFB deqradasiyası üçün alertlər.
Ssenari testləri: istinad vaxtının yazılması «klik → DOM dəyişikliyi».

12) iGaming xüsusiyyətləri

• UI: düymənin vəziyyətinin dərhal sabitlənməsi (pressed → busy), dubl - «Qəbul» tostu.
• Backend: idempotent bahis açarı; status - WebSocket vasitəsilə; zaman → şəffaf «pending».
• UI-büdcə: FUF ≤ 100 ms, yekun təsdiqi ≤ 1 s (əgər daha uzun - zamanlayıcı/səbəb göstərir).

• Sürətlənmə ≤ 200 ms, vahid fırlanma, 300-500 ms; sonsuz dövrlər olmadan.
• Uduşlar - strobe olmadan, mətn/məbləğ oxunur (AAA).

• Delta yamaları 250-1000 ms-də bir dəfə, batching;
• layout atlama olmadan vizual diff (ok/rəng/qalınlıq);
• hover/focus yeniləmələri anti-draging.

• 40-60 ms batchami ilə hesab inkrement, cədvəl rəqəmləri;
• sticky-papaq, sətirlərin virtuallaşdırılması.

13) Anti-nümunələr

Klik üçün ani reaksiya yoxdur (şəbəkə gözləmək).
Ağır animasiyalar 'filter/box-shadow' yüzlərlə element üzərində.
Bir nəhəng JS bandl> 1-2 MB kritik yol.
«Boşluqda Spinner» 1-2-dən çox irəliləyiş/skeleton olmadan.
Bir tikdə layout oxumaq/yazmaq (layout thrashing).
Hover-only mobil funksiyaları.

14) Sürət tokenləri (dizayn sistemi)

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) QA-yoxlama sürəti siyahısı

Cavab

• Klik/tap → vizual cavab ≤ 100 ms; giriş → echo ≤ 50 ms.
• Mobil 300 ms gecikmə yoxdur.
• INP p75 ≤ 200 ms; Long Tasks payı ≤ 5%.

Yükləmə

• TTFB ≤ 200 ms; LCP ≤ 2. 5 s; CLS ≤ 0. 1.
• Skeletonlar/tərəqqi əvəzinə «asılı» spinner.

Render

• Animasiyalarda yalnız 'transform/opacity'; massivlərdə «ağır» kölgələr yoxdur.
• uzun siyahılar üçün content-visibility/virtualization.

Şəbəkə

• Edge-cache, preconnect, niyyət prefetch.
• İdempotentlik və kritik hərəkətlər üçün retraj.

A11y

• 'prefers-reduced-motion' dəstəklənir.
• Hover məzmunu fokus/klaviatura ilə mövcuddur.

16) Dizayn sistemi üçün sənədləşmə

«Latency Budgets»: eşik cədvəli (tap, hover, modal, toast, forma).
«Instant Feedback»: optimist hərəkət nümunələri + geri.
«Prefetch by Intent»: bələdçi və utilities.
«Performance Playbook»: profil yoxlama vərəqləri və RUM alertləri.
«Do/Don 't»: rəqəmlərlə sürətli/yavaş ssenarilərin nümunələri.

Qısa xülasə

Qarşılıqlı əlaqə sürəti ani cavab + nəticənin proqnozlaşdırıla bilən çatdırılmasıdır. İlk yemək üçün müqəddəs büdcə olaraq 100 ms saxlayın, şəbəkəni optimallaşdırın (Edge/Cache/Prefetch), əsas axını boşaltın, yalnız ucuz xüsusiyyətləri canlandırın və optimist nümunələri tətbiq edin. O zaman interfeys canlı, anlaşıqlı və davamlı hiss olunur - xüsusilə iGaming ssenarilərində yüksək dərəcələr və real vaxt.