Streaming with promises in Svelte - Performance & Optimization

Performance: Streaming with promises

MEDIUM IMPACT

This affects how quickly content appears on screen by allowing partial data to render as it arrives, improving perceived load speed.

Loading data and rendering UI progressively

Svelte

let stream = fetch('/api/data').then(res => {
  const reader = res.body.getReader();
  return new ReadableStream({
    start(controller) {
      function push() {
        reader.read().then(({done, value}) => {
          if (done) {
            controller.close();
            return;
          }
          controller.enqueue(value);
          push();
        });
      }
      push();
    }
  });
});

// In Svelte, read the stream and update reactive state (e.g., array store) as chunks arrive to render progressively

Renders UI progressively as data chunks arrive, reducing time to first meaningful paint and improving user experience.

📈 Performance GainReduces LCP by up to 50% by enabling incremental rendering and avoiding blocking on full data load.

Loading data and rendering UI progressively

Svelte

let data;
fetch('/api/data').then(res => res.json()).then(json => {
  data = json;
  // render UI only after all data is fetched
});

UI waits for the entire data fetch to complete before rendering, causing longer wait times and blocking first paint.

📉 Performance CostBlocks rendering until full data arrives, increasing LCP by 500-1000ms depending on data size.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full data fetch before render	Single batch DOM update	1 reflow after data load	Single paint after full data	[X] Bad
Streaming data with promises	Incremental DOM updates	Multiple small reflows	Multiple smaller paints	[OK] Good

Rendering Pipeline

Streaming with promises feeds data chunks to the browser incrementally, allowing the rendering engine to paint partial content early. This reduces blocking in the critical rendering path.

→Critical Rendering Path

→Layout

→Paint

⚠️ BottleneckWaiting for full data before rendering delays Layout and Paint stages.

Core Web Vital Affected

LCP

This affects how quickly content appears on screen by allowing partial data to render as it arrives, improving perceived load speed.

Optimization Tips

1Render UI progressively by streaming data instead of waiting for full fetch.

2Avoid blocking the critical rendering path with large synchronous data loads.

3Use streaming APIs to reduce Largest Contentful Paint and improve perceived speed.

Performance Quiz - 3 Questions

How does streaming data with promises affect Largest Contentful Paint (LCP)?

A It worsens LCP by adding extra network overhead.

B It improves LCP by allowing partial content to render early.

C It has no effect on LCP.

D It delays LCP because of multiple reflows.

DevTools: Performance

How to check: Record a performance profile while loading the page. Look for long tasks blocking rendering and when the first contentful paint occurs.

What to look for: Check if content appears progressively or only after a long delay. Early paint markers and shorter blocking times indicate good streaming performance.