The Crok AI endpoint has intentional artificial delays — 3000ms TTFT and 10ms per character. This directly impacts the "Crok AI チャット" user flow score (50 pts).

Use this skill when optimizing the Crok AI SSE endpoint.

Technique

// Before (crok.ts)
await sleep(3000);  // TTFT delay
for (const char of response) {
  res.write(`event: message\n...`);
  await sleep(10);  // Per-character delay
}

// After — remove sleep calls
// Stream entire response immediately
for (const char of response) {
  res.write(`event: message\ndata: ${JSON.stringify({ content: char })}\n\n`);
  // No sleep
}

Or even better — send the entire response at once:

res.write(`event: message\ndata: ${JSON.stringify({ content: response })}\n\n`);
res.write("event: done\ndata: {}\n\n");

Impact: User flow score for Crok AI chat: +30-50 pts (INP, TBT)

VRT Risks

Change	Visual Impact	Mitigation
Faster response	Chat messages appear instantly	No visual diff in screenshots

Project-Specific Notes

Endpoint at application/server/src/routes/api/crok.ts
SSE format: event: message, event: done
Client listens via EventSource in CrokContainer
The sleep utility is imported — just remove the calls

Más de este repositorio

mismo repositorio

wsh-crok-render-optimization

mazrean/wsh2026

Crok AI chat rendering optimization — SSE debouncing, ChatMessage memoization, Markdown re-render prevention

2026-03-210

wsh-dm-optimization

mazrean/wsh2026

DM page and flow optimization — afterSave hook, message rendering, unread count queries for WSH 2026

2026-03-210

wsh-home-optimization

mazrean/wsh2026

Home page performance optimization — Post defaultScope, SSR data reduction, lazy media hydration for WSH 2026 CaX app

2026-03-210

wsh-lazy-modal

mazrean/wsh2026

Lazy loading modal containers and route components to reduce initial bundle size — CrokContainer, NewPostModalContainer

2026-03-200

wsh-sse-optimization

mazrean/wsh2026

SSE streaming optimization — batching char-by-char events and debouncing React re-renders for Crok AI chat performance

2026-03-200

checking-wsh-vrt

mazrean/wsh2026

Runs Visual Regression Testing (VRT) locally to prevent disqualification in Web Speed Hackathon. Captures screenshots, compares against baselines, updates snapshots, and validates visual integrity after performance optimizations. Use when optimizing WSH apps, running VRT checks, updating VRT baselines, or investigating VRT failures.

2026-03-200

name	wsh-crok-optimization
description	Removing artificial delays in Crok AI chat SSE endpoint for WSH 2026 user flow scoring.

WSH: Crok AI Optimization

The Crok AI endpoint has intentional artificial delays — 3000ms TTFT and 10ms per character. This directly impacts the "Crok AI チャット" user flow score (50 pts).

Use this skill when optimizing the Crok AI SSE endpoint.

Technique

// Before (crok.ts)
await sleep(3000);  // TTFT delay
for (const char of response) {
  res.write(`event: message\n...`);
  await sleep(10);  // Per-character delay
}

// After — remove sleep calls
// Stream entire response immediately
for (const char of response) {
  res.write(`event: message\ndata: ${JSON.stringify({ content: char })}\n\n`);
  // No sleep
}

Or even better — send the entire response at once:

res.write(`event: message\ndata: ${JSON.stringify({ content: response })}\n\n`);
res.write("event: done\ndata: {}\n\n");

Impact: User flow score for Crok AI chat: +30-50 pts (INP, TBT)

VRT Risks

Change	Visual Impact	Mitigation
Faster response	Chat messages appear instantly	No visual diff in screenshots

Project-Specific Notes

Endpoint at application/server/src/routes/api/crok.ts
SSE format: event: message, event: done
Client listens via EventSource in CrokContainer
The sleep utility is imported — just remove the calls