Etkileşim hızı ve gecikme UI

1) Arayüz hızı nedir

1. Giriş gecikmesi - hareketten olay işleyiciye.

2. Ağ gecikmesi - arka uç/önbellek yanıtından önce.

3. Render gecikmesi - ana akışta işleme (JS/CSS/düzen/boya).

4. Animasyon gecikmesi - karelerin düzgünlüğü ve kararlılığı.

Amaç: Kullanıcı, eylemin başladığını ve sürecin nereye gittiğini anında görür; Gerçek sonuç öngörülebilir şekilde ortaya çıkar.

2) İnsan algısının eşikleri

≤ 50 ms - "yıldırım hızlı" (baskı yankı, tuşa basın).
≤ 100 ms - "anında" (tıklayın - görsel yanıt).
≤ 200 ms - çoğu UI reaksiyonu için kabul edilebilir.
≤ 1000 ms - net ilerleme/iskelet ile tolere edilebilir.

3) RAIL modeli ve hedef bütçeler

R (Yanıt): giriş yanıtı

Tıklayın/dokunun - görsel yanıt ≤ 100 ms.
Focus/hover - 80-120 ms ≤.

A (Animasyon): düzgünlük

Çerçeve 16 ⇒ 60 FPS. 7 ms; Çerçeveden çıkarmak için ağır operasyonlar.
Sadece 'transform'/' opacity' hareketlendiriyoruz.

I (Boşta): arka plan görevleri

50 ms ≤ yuvalara bölün, boşta kalan pencereleri kullanın.

L (Yük): yükleme

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

4) KPI ve hız uyarıları

INP (Interaction to Next Paint): p75 <200 ms (iyi), 200-500 (geliştirilecek).
Uzun Görevler (> 50 ms): LT <%5 olan çerçevelerin oranı.
TTFB p75 <200 ms (önbellek/Kenar), LCP p75 <2. 5 p.
İlk Kullanıcı Geri Bildirimi (FUF): Eylemin ilk görsel onayına kadar geçen süre ≤ 100 ms.
İlk alan girilmeden önce 1 s ≤ formlar için kullanılabilir.

5) UX anında yanıt kalıpları

1. İyimser güncellemeler: UI'yi hemen değiştirin (balance/bet/like), hataya geri dönün.
2. Yapı biliniyorsa, bir spinner yerine iskeletler.
3. İlerleme/adımlar: süreç uzunluğu biliniyorsa deterministik ilerleyici çubuk.
4. Yerel ipuçları: anında tost/devlet "Gönder"... ≤ 100 ms.
5. Niyet ön yüklemesi: hover/visibility - 'prefetch'/' ön yükleme'.

6) Gecikme azaltma teknikleri

6. 1 Giriş> Oluştur

Mobil cihazda 300 ms gecikmeli çekim yapın: '<meta name = "viewport" content = "width = device-width, initial-scale = 1 ">'.
Dinleyiciler kaydırma/taşlama için pasif: 'AddEventListener (' touchstart ', işleyici, {passive: true})'.
İşlemi tıklatın - mikro bir görevde veya 'requestAnimationFrame' hızlı bir şekilde onay çizmek için.
Düzen-thrash kaçının: okuma/yazma düzeni - butch.

6. 2 JS ve Ana Akım

Ayrı demetler (kod bölme), yollar boyunca yükleyin.
Ağır bilgi işlem - Web İşçisi.
Scheduler kullan. Arka plan görevleri için PostTask'/' requestIdleCallback '.
Kritik CSS - satır içi; JS с 'ertele'/' async'.
Liste sanallaştırma, 'content-visibility: auto', 'contain: content'.

6. 3 Render ve animasyonlar

'Dönüştürme/opaklığı' canlandırın; Yüzlerce öğe üzerinde 'yükseklik/sol/kutu-gölge' animasyon uygulamayın.
'will-change' animasyondan önce geçici olarak koymak; Sonra temizle.
Büyük PNG'ler yerine sprite/vektör; Ağır bulanıklıktan kaçının.

6. 4 Ağ ve önbellek

Edge- кеш (CDN), 'cache-control', 'stale-while-revalidate'.
Kritik alanlara önceden bağlanmak; Erken İpuçları (103), HTTP/2/3.
Niyete göre prefetch (hover/viewport).
Akış/SSR + Aşamalı Hidrasyon/Adalar.

7) Debowns/kısma ve kuyruklar

Tartışma - giriş sırasında arama için (150-300 ms).
Kısma - kaydırma/yeniden boyutlandırma için (100-200 ms).
Sık yaşanan olaylar için kuyruklar/butching UI güncellemeleri (canlı veriler).

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ükleme ve geri bildirim kalıpları

İskelet: İçerik (ince ayar yok, sabit yükseklikler).
Shimmer 1200-1600 ms, genlik ≤ %20.
İyimser kart: gri önizleme + metin - veriler geldiğinde değiştiririz.
Hata: kısa yeniden deneme banner'ı, tekrarlamalar için idempotency tuşları.

9) Hızlı yanıt için ağ stratejileri

• UI onayı hemen (iyimser), arka uç - idempotent;
• Zaman aşımı (3-5 s) olduğunda, "alındı, işlendi" durumunu görüntüleyen + arka plan retrays;
• Durumlar için WebSocket/SSE, backoff 1-2-4-8 s.

Ön veri: Programda ısınma önbelleği, popüler rotaların ön ayarı.

Kenar işlevleri: kullanıcıya daha yakın doğrulamalar/toplamalar.

10) Hızlı UI snippet 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) Teşhis ve izleme

Alan: Ülkeye/ağa/cihaza göre RUM (alan metrikleri) p75.
Trace 'input> handler - network - paint' seçeneğini tıklatın.
Kırmızı bölge işaretleme: Uzun Görev işaretleyicileri, engelleme süresi, Yavaş rota listesi.
INP/LCP/TTFB bozunma uyarıları.
Senaryo testleri: Referans zamanının kaydı "click - change DOM".

12) iGaming'in özellikleri

• UI: düğme durumunun anında sabitlenmesi (basıldı - meşgul), çift tost "Kabul edildi".
• Arka uç: orana göre idempotent anahtar; Durum - WebSocket aracılığıyla; timeout - saydam "beklemede".
• UI bütçesi: FUF ≤ 100 ms, 1 s ≤ nihai onay (daha uzunsa, zamanlayıcıyı/nedeni gösteririz).

• Hızlanma ≤ 200 ms, düzgün dönme, zayıflama 300-500 ms; Sonsuz döngüler olmadan.
• Kazanma taslakları - strobe yok, metin/miktar okunabilir (AAA).

• Delta her 250-1000 ms'de bir kez yamalar, butching;
• Düzen sıçramaları olmadan görsel diff (ok/renk/kalınlık);
• hover/focus üzerindeki anti-bounce güncellemeleri.

• Hesap, 40-60 ms'lik gruplar halinde artmaktadır, tablo rakamları;
• yapışkan başlık, dize sanallaştırma.

13) Anti-desenler

Tıklamaya anında yanıt yok (ağ bekleniyor).
Yüzlerce öğe üzerinde ağır 'filtre/kutu-gölge' animasyonları.
Bir büyük JS paketi> kritik yol başına 1-2 MB.
Boşlukta Spinner hiçbir ilerleme/iskelet ile 1-2 üzerinde.
Bir kene içinde okuma/yazma düzeni (düzen thrashing).
Mobil cihazlarda yalnızca Hover özellikleri.

14) Hız belirteçleri (tasarım 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 hız kontrol listesi

Yanıt

• Tıkla/dokun - görsel yanıt ≤ 100 ms; - yankı girişi ≤ 50ms.
• Mobilde 300 ms gecikme yok.
• INP p75 ≤ 200ms; Uzun Görevler payı ≤ %5.

Yükleme

• TTFB ≤ 200ms; LCP ≤ 2. 5 s; CLS ≤ 0. 1.
• "Asılı" iplikçiler yerine iskeletler/ilerleme.

Render

• Animasyonlarda sadece 'transform/opacity'; Dizilerde'ağır "gölgeler yoktur.
• uzun listeler için içerik görünürlüğü/sanallaştırma.

Ağ

• Kenar önbelleği, preconnect, niyet öneki.
• Idempotency ve kritik eylemler için geri çekiliyor.

A11y

• 'prefers-reduced-motion' desteklenir.
• Hover içeriği focus/keyboard ile kullanılabilir.

16) Tasarım sistemi belgeleri

"Gecikme Bütçeleri": eşik tablosu (tap, hover, modal, tost, form).
"Anında Geri Bildirim": iyimser eylem kalıpları + geri çekilme.
"Niyet ile Prefetch": kılavuz ve yardımcı programlar.
"Performans Playbook": profil kontrol listeleri ve RUM uyarıları.
"Do/Don't": Sayılarla hızlı/yavaş komut dosyası örnekleri.

Kısa Özet

Etkileşimin hızı, anında yanıt + sonucun öngörülebilir teslimatıdır. 100ms'yi ilk geri bildirim için kutsal bir bütçe olarak tutun, ağı optimize edin (Kenar/önbellek/önek), ana akışı boşaltın, yalnızca ucuz özelliklere animasyon uygulayın ve iyimser desenler uygulayın. Ardından arayüz canlı, anlaşılır ve esnek hissediyor - özellikle yüksek bahisli, gerçek zamanlı iGaming senaryolarında.