Using data in pages in Svelte - Performance & Optimization

Performance: Using data in pages

MEDIUM IMPACT

This affects how quickly the page loads and updates by controlling data fetching and rendering timing.

Displaying data fetched directly in the page component

Svelte

  <script context="module">
    export async function load() {
      const res = await fetch('/api/data');
      const data = await res.json();
      return { props: { data } };
    }
  </script>

  <script>
    export let data;
  </script>

  <p>{data.message}</p>

Using the load function fetches data before the page renders, allowing immediate display and faster LCP.

📈 Performance GainReduces LCP by 300-500ms and avoids layout shifts by rendering stable content immediately.

Displaying data fetched directly in the page component

Svelte

  <script>
    let data;
    fetch('/api/data')
      .then(res => res.json())
      .then(json => data = json);
  </script>

  {#if data}
    <p>{data.message}</p>
  {/if}

Fetching data inside the component delays rendering until data arrives, causing slower Largest Contentful Paint and possible layout shifts.

📉 Performance CostBlocks initial render until fetch completes, increasing LCP by 300-500ms depending on network.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fetch data inside component after render	Minimal initially, but triggers updates	Triggers 1 reflow per data update	Multiple paints as data arrives	[X] Bad
Fetch data in load function before render	DOM built with data ready	Single layout and paint	Single paint with stable content	[OK] Good
Load minimal data first, fetch large data lazily	Initial DOM small, updates later	1 reflow when large data arrives	Initial paint fast, later paint deferred	[!] OK

Rendering Pipeline

Data fetching timing affects when the browser can paint the page content. Fetching data early allows style calculation and layout to proceed without delay. Late data fetching causes reflows and repaints when data arrives.

→Data Fetching

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckData Fetching and Layout

Core Web Vital Affected

LCP, INP

This affects how quickly the page loads and updates by controlling data fetching and rendering timing.

Optimization Tips

1Fetch data in the load function to have it ready before rendering.

2Avoid passing large data objects directly; load them lazily if possible.

3Minimize layout shifts by rendering stable content on first paint.

Performance Quiz - 3 Questions

What is the main performance benefit of fetching data in the Svelte load function instead of inside the component?

A Data is ready before rendering, reducing Largest Contentful Paint delay.

B It reduces the total amount of data fetched.

C It avoids any network requests.

D It automatically caches data in the browser.

DevTools: Performance

How to check: Record a page load, then look for long gaps before first content paint and multiple layout or paint events after load.

What to look for: Check if data fetching delays initial paint (LCP) or causes multiple reflows and repaints indicating late data updates.