core_web_vitals · llm
LLM interfaces break traditional Web Vitals
Token streaming causes Cumulative Layout Shift. Inference latency becomes your Largest Contentful Paint. Here is how to measure and optimize for real LLM UX across search, chat, and content generation.
the_problem
CLS — Cumulative Layout Shift
Traditional sites have static content and minimal shift. LLM sites stream token-by-token, pushing content downward with every chunk.
Result: CLS above 0.25 (poor). Users read the interface as janky and broken.
LCP — Largest Contentful Paint
Traditional LCP is the render time of the largest element. On LLM sites, the first token output is what the user actually perceives as “loaded.”
TTFT (Time to First Token) is your LCP. Inference latency directly drives the metric.
ux_patterns
Semantic Search Results
Real-time semantic search with AI-ranked results. User types → instant results stream in. Token-by-token output creates layout shift.
- Token-by-token rendering causes CLS: each new token shifts layout downward
- User sees partial results first, complete after 2–3 seconds
- Desktop: CLS > 0.1 is 'poor'. Mobile: even worse due to narrower layout.
- Perceived slowness: no skeleton screen = feels like page is broken until first token arrives
CLS improvement −0.200 · Impact Fills visual space while waiting for TTFT. Reduces perceived jank.
CLS improvement −0.150 · Impact Container height pre-allocated = no shift as tokens arrive.
CLS improvement −0.050 · Impact Reduces re-layout thrashing. Faster perceived rendering.
CLS improvement −0.010 · Impact If TTFT < 300ms, users see results so fast CLS becomes irrelevant.
Chat/Conversational Agent
Multi-turn conversation. User message → agent thinking + tool calls → streamed response. Chat history grows, containers resize.
- Chat history grows downward. New message from agent pushes previous context up = CLS.
- Scroll position jumps as thinking indicator animates + tokens stream in.
- Long conversations: scroll position becomes chaotic (jumping up/down with each message).
- Mobile: narrow viewport = taller containers = more dramatic CLS.
CLS improvement −0.200 · Impact Auto-scroll to new content. User doesn't see layout shift.
CLS improvement −0.080 · Impact Show 'thinking...' before TTFT. Reduces perceived waiting.
CLS improvement −0.150 · Impact Long conversations: render only viewport + buffer. Huge performance win.
CLS improvement −0.020 · Impact Faster thinking = user sees response sooner = less perceived jank.
Content Editor / Writing Assistant
Generate article sections, edit in-place. Streaming tokens appear inline, pushing surrounding text. Rich formatting (headers, code) = unpredictable height.
- Inline streaming: tokens appear between existing text. Every token shifts following paragraphs.
- Rich content: headers + code blocks have unpredictable height. Hard to reserve space.
- Formatting happens mid-stream (code detection, bold), causing reflows.
- Long-form content: lots of shift potential. Cumulative CLS can be > 0.5.
CLS improvement −0.350 · Impact Separates generation from editing. No CLS to main content.
CLS improvement −0.200 · Impact Reserve a fixed-height box initially, expand once height is known.
CLS improvement −0.150 · Impact Stream plain text first, apply formatting in second pass.
CLS improvement −0.180 · Impact Generate in collapsed section. User expands when ready = controlled CLS.
lcp_is_ttft
LCP for LLM sites is TTFT
Traditional: LCP is the render time of the largest image or text block below the fold.
LLM sites: LCP LCP = time to first meaningful token output (TTFT) because that's what the user perceives as 'page loaded'
Optimizing TTFT directly improves LCP. Reducing inference latency + network roundtrips are your leverage points.
| Rating | TTFT | CLS target | User perception |
|---|---|---|---|
| Good | 1,000ms | < 0.1 | Instant, responsive |
| Needs Work | 2,500ms | < 0.25 | Noticeably slow, janky |
| Poor | 5,000ms | < 0.4 | Site feels broken |
monitoring
Monitoring checklist
CLS (Cumulative Layout Shift)
Use Web Vitals library or browser DevTools. Record per-message CLS for chat, per-result for search.
TTFT (Time to First Token)
Server: measure inference start → first token. Client: measure request sent → first response chunk received.
LCP (Largest Contentful Paint)
Web Vitals library. For LLM sites, LCP ≈ TTFT (time to first meaningful content).
Time to Interactive (TTI)
Web Vitals library. For LLM sites: when chat is fully interactive (can submit new message).
Retry/Error rate
Server logs: measure timed-out requests, inference errors, network failures.
revenue_impact
What CLS and TTFT cost in revenue
CLS → abandonment
TTFT → conversion lift
| TTFT | Perception | Lift |
|---|---|---|
| 300ms | Instant | +8% |
| 1000ms | Quick | +2% |
| 2500ms | Noticeably slow | -5% |
| 5000ms | Page feels broken | -15% |
best_practices
CLS — reduce jank
- Skeleton screen to reserve space
- Fixed-height containers
- Scroll anchor pinned to bottom (chat)
- Batch token rendering (every 5 tokens)
TTFT — reduce latency
- Prompt caching to replay cached context
- Regional inference to cut network latency
- Model downgrade to a faster, cheaper model
- Speculative decoding to pre-compute likely tokens
related
Revenue impact of performance: Page speed → revenue by industry — the full ROI model including LLM sites.
Cost of streaming agents: Agentic RAG cost — the model behind TTFT and the inference bill.
Want your LLM UI measured for CLS and TTFT?
These patterns show where streaming hurts; a review tells you which screen is bleeding conversions. Book a call, or leave your email and I'll reach out.
Prefer proof first? See how this plays out in real case studies →