Wskaźnik interakcji i opóźnienie interfejsu użytkownika

1) Czym jest prędkość interfejsu

1. Opóźnienie wejściowe - od gestu po obsługę imprez.

2. Opóźnienie sieci - przed odpowiedzią backend/cache.

3. Opóźnienie - przetwarzanie na strumieniu głównym (JS/CSS/układ/farba).

4. Opóźnienie animacji - gładkość i stabilność ramek.

Cel: użytkownik natychmiast widzi, że akcja została rozpoczęta i gdzie przebiega proces; rzeczywisty wynik przychodzi przewidywalnie.

2) Progi postrzegania człowieka

≤ 50 ms - „błyskawica szybka” (echo drukowania, naciśnięcie klawisza).
≤ 100 ms - „natychmiast” (kliknij → odpowiedź wizualna).
≤ 200 ms - dopuszczalne dla większości reakcji UI.
≤ 1000 ms - tolerowane przy wyraźnym postępie/szkielecie.

3) Model RAIL i budżety docelowe

R (odpowiedź): odpowiedź wejściowa

Kliknij/stuknij → odpowiedź wizualna ≤ 100 ms.
Focus/hover → ≤ 80-120 ms.

A (Animacja): gładkość

60 Ramka FPS, 16. 7 ms; ciężkie operacje, aby wyjąć z ramki.
Animujemy tylko „przekształcić ”/„ zmętnienie”.

I (Idle): zadania podstawowe

Podziel na szczeliny ≤ 50 ms, użyj bezczynnych okien.

L (Obciążenie): załadunek

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

4) Wpisy KPI i prędkości

INP (Interakcja do następnej farby): p75 <200 ms (dobra), 200-500 (do poprawienia).
Długie zadania (> 50 ms): odsetek ramek z LT <5%.
TTFB p75 <200 ms (pamięć podręczna/krawędź), LCP p75 <2. 5 p.
Pierwsza informacja zwrotna użytkownika (FUF): czas do pierwszego wizualnego potwierdzenia działania ≤ 100 ms.
Czas do użycia dla formularzy ≤ 1 s przed wprowadzeniem pierwszego pola.

5) Wzory natychmiastowej reakcji UX

1. Optymistyczne aktualizacje: natychmiast zmień interfejs użytkownika (balance/bet/like), cofnij się o błąd.
2. Szkielety zamiast spinnera, jeśli struktura jest znana.
3. Postęp/kroki: deterministyczny progresywny pręt, jeśli znana jest długość procesu.
4. Porady lokalne: natychmiastowy toast/stan "Wyślij'... ≤ 100 ms.
5. Preload intent: hover/visibility → 'prefetch '/' preload'.

6) Techniki ograniczania opóźnień

6. 1 wejście → Render

Shoot 300ms delay on mobile: '<meta name = „viewport” content = „width = device-width, initial-scale = 1 „>'.
Słuchacze pasywne do przewijania/tachu: 'add,, Listener (' touchstart', handler, {pasywny: true}) '.
Kliknij przetwarzanie - w zadaniu mikro lub 'AnimationFrame', aby szybko pobrać potwierdzenie.
Unikaj układu-thrash: czytaj/pisz układ - butch.

6. 2 JS i główny strumień

Oddzielne wiązki (podział kodu), załadunek wzdłuż tras.
Heavy computing → Web Worker.
Użyj 'scheduler. Zadanie PostTask '/' IdleCallback 'dla zadań w tle.
Krytyczny CSS - inline; JS "defer "/" async'.
Wirtualizacja listy, 'content-visibility: auto', 'contain: content'.

6. 3 Renderowanie i animacje

Animacja „transformacja/nieprzezroczystość”; nie animują 'wysokości/lewej/skrzynki-cienia' na setkach elementów.
„zmiana woli” tymczasowo przed animacją; posprzątać po.
Sprites/wektor zamiast ogromnych PNG; unikać silnej rozmycia.

6. 4 Sieć i pamięć podręczna

Krawędź-keja (CDN), „cache-control”, „stale-while-revalidate”.
Preconnect do domen krytycznych; Wczesne wskazówki (103), HTTP/2/3.
Prefetch według intencji (hover/viewport).
Streaming/SSR + Progressive Hydration/Islands.

7) Zadłużenie/rozdrabnianie i kolejki

Debata - wyszukiwanie podczas wejścia (150-300 ms).
Przepuszczanie - do przewijania/rozmiaru (100-200 ms).
Kolejki/butching UI aktualizacje dla częstych zdarzeń (dane na żywo).

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) Wzory ładowania i sprzężenia zwrotnego

Szkielet → Zawartość (brak znaczników, stałe wysokości).
Shimmer 1200-1600 ms, amplituda ≤ 20%.
Karta optymistyczna: szary podgląd + tekst - zastępujemy go po przybyciu danych.
Błąd: krótki baner retry, klucze idempotencji do powtórzeń.

9) Strategie sieci na rzecz szybkiego reagowania

• natychmiastowe potwierdzenie interfejsu użytkownika (optymistyczne), backend - idempotent;
• kiedy czas (3-5 s), wyświetlanie stanu „odebrane, przetworzone” + przekładki tła;
• WebSocket/SSE dla statusów, backoff 1-2-4-8 s.

Wstępne dane: pamięć podręczna rozgrzana w harmonogramie, prefetch popularnych tras.

Funkcje krawędzi: walidacje/agregacje bliżej użytkownika.

10) Szybki kod UI snippet

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) Diagnostyka i monitorowanie

Pole: RUM (mierniki pola) p75 według kraju/sieci/urządzenia.
Kliknij przycisk 'input → handler → network → paint'.
Znacznik strefy czerwonej: znaczniki długiego zadania, czas blokowania, lista wolnych tras.
Alerty degradacji INP/LCP/TTFB.
Testy scenariuszowe: zapis czasu odniesienia "kliknij → zmień DOM'.

12) Specyfika iGaming

• Interfejs: natychmiastowe utrwalenie stanu przycisku (naciśnięty → zajęty), podwójny - toast „Akceptowane”.
• Backend: idempotent key by rate; status - za pośrednictwem WebSocket; timeout → przejrzyste „oczekujące”.
• Budżet interfejsu użytkownika: FUF ≤ 100 ms, ostateczne potwierdzenie ≤ 1 s (jeśli dłużej, pokazujemy czas/powód).

• Przyspieszenie ≤ 200 ms, jednolita rotacja, tłumienie 300-500 ms; bez nieskończonych cykli.
• Win stubs - no strobe, text/amount readable (AAA).

• Delta plastry raz na 250-1000 ms, butching;
• diff wizualny (strzałka/kolor/grubość) bez skoków układu;
• aktualizacje anty-bounce na hover/focus.

• przyrost rachunku według partii 40-60 ms, cyfry tabeli;
• lepki nagłówek, wirtualizacja strun.

13) Anty-wzory

Brak natychmiastowej odpowiedzi, aby kliknąć (czekając na sieć).
Ciężkie animacje 'filtr/box-shadow' na setkach elementów.
Jeden ogromny pakiet JS> 1-2 MB na ścieżkę krytyczną.
Spinner w pustce jest ponad 1-2 bez postępu/szkieletu.
Czytanie/pisanie układ w jednym kleszczu (układ thrashing).
Funkcje Hover tylko na telefonie komórkowym.

14) Żetony prędkości (system projektowania)

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) Lista kontrolna QA prędkości

Odpowiedź

• Kliknij/stuknij → odpowiedź wizualna ≤ 100 ms; → wejście echo ≤ 50ms.
• Brak opóźnienia 300 ms na telefonie komórkowym.
• INP p75 ≤ 200 ms; Udział zadań długich ≤ 5%.

Załadunek

• TTFB ≤ 200 ms; LCP ≤ 2. 5 s; CLS ≤ 0. 1.
• Szkielety/postęp zamiast „wiszących” spinnerów.

Render

• Tylko „transformacja/nieprzezroczystość” w animacjach; na tablicach nie ma „ciężkich” cieni.
• widoczność treści/wirtualizacja dla długich list.

Sieć

• Pamięć podręczna krawędzi, prekonekt, przedrostek intencji.
• Idempotencja i rekolekcje do działań krytycznych.

A11y

• „Preferers-reduced-motion” obsługiwane.
• Treść zawisu jest dostępna przez ostrość/klawiaturę.

16) Dokumentacja systemu projektowego

„Budżety opóźnień”: tabela progów (kran, kran, modal, toast, forma).
„Instant Feedback”: optymistyczne wzorce działania + pullback.
„Prefetch by Intent”: przewodnik i narzędzia.
„Performance Playbook”: listy kontrolne i wpisy RUM.
„Do/Don”: Przykłady szybkich/wolnych skryptów z numerami.

Krótkie podsumowanie

Szybkość interakcji to natychmiastowa odpowiedź + przewidywalne dostarczenie wyniku. Zachowaj 100ms jako święty budżet dla pierwszego sprzężenia zwrotnego, zoptymalizuj sieć (Edge/cache/prefix), odciążyć główny strumień, animować tylko tanie właściwości i stosować optymistyczne wzory. Wtedy interfejs czuje się żywy, zrozumiały i odporny - zwłaszcza w wysokich stawkach, w czasie rzeczywistym iGaming scenariuszy.