What This Post Covers
While streaming agent responses over WebSocket, I also worked on the main landing page's LCP. "Showing quickly" and "the first screen painting quickly" are different axes.
Day Summary
| Task | What I Wanted | What I Did | Result |
|---|---|---|---|
| Streaming | Quickly display partial responses over WebSocket | Split the streaming channel out to WebSocket | Exposed to the UI token/chunk by chunk |
| Stable UI | Minimize layout shift during streaming | Reserve space in the streaming area with a fixed-height placeholder | Layout shift eased |
| LCP | Improve LCP by priority-loading the hero image | Adjusted resource priority on the LCP-candidate image | Noticeable LCP improvement |
1. Streaming UI — Partial Responses + Stable Layout
Background (Concepts)
- WebSocket: a protocol that keeps a bidirectional connection with the server to exchange messages. Better suited to streaming than HTTP polling.
The Situation
Instead of receiving the agent response all at once, I had to show it in the UI token/chunk by chunk. But as streaming messages grew, there was a layout shift where the layout got pushed down.
Key Work
- Split the streaming channel out to WebSocket and exposed it to the UI token/chunk by chunk.
- In the streaming area, reserved space with a fixed-height placeholder to ease layout shift. It's a choice to claim the space that content will grow into ahead of time.
Lessons
- A streaming UI needs a fixed-height placeholder — claim the space that content will grow into ahead of time.
- Streaming "fast" and LCP "first paint" are optimized separately.
2. Landing LCP — Resource Priority
Background (Concepts)
- LCP (Largest Contentful Paint): the time until the largest content in the viewport is painted. Usually the hero image or a large text block is the candidate.
- Resource priority: giving the browser hints about which resource to fetch first via
fetchpriority, preload, and so on.
The Situation
The loading order of the main page's LCP candidate (a large image) had a big impact on perceived speed.
Key Work
I adjusted resource priority on the LCP-candidate image and priority-loaded it based on largest-contentful-paint. I got a noticeable LCP improvement.
Lessons
- Adjusting resource-priority alone changes LCP noticeably — compare before and after measurement.
- Streaming "fast" and LCP "first paint" are optimized separately.
→ Largest Contentful Paint · Resource priority
Derived Knowledge
What to Look at Next
Writing the blog draft and reinforcing the Knowledge documents.