Error pages (+error.svelte) - Performance & Optimization

Performance: Error pages (+error.svelte)

MEDIUM IMPACT

This affects the page load speed and user experience when an error occurs, impacting how quickly the error content is shown and how stable the layout remains.

Displaying a custom error page when a route fails

Svelte

<script>
  export let error;
</script>

<section aria-live="assertive" role="alert">
  <h1>{error.status}</h1>
  <p>{error.message}</p>
</section>

Minimal markup and no extra components ensure the error page loads instantly and layout stays stable.

📈 Performance GainSingle reflow, fast LCP under 100 ms, and no extra bundle weight

Displaying a custom error page when a route fails

Svelte

<script>
  import HeavyComponent from '../components/HeavyComponent.svelte';
  export let error;
</script>

<HeavyComponent />
<h1>{error.status}</h1>
<p>{error.message}</p>

Loading a heavy component on the error page delays error content rendering and increases bundle size unnecessarily.

📉 Performance CostBlocks rendering for 200+ ms due to large bundle and triggers multiple reflows from complex layout

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy component on error page	High (many nodes)	Multiple reflows	High paint cost	[X] Bad
Minimal markup with semantic HTML	Low (few nodes)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

When an error occurs, the browser renders the +error.svelte component. Simple markup and styles allow quick style calculation and layout, minimizing paint time and avoiding layout shifts.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout due to complex or large components on error page

Core Web Vital Affected

LCP, CLS

This affects the page load speed and user experience when an error occurs, impacting how quickly the error content is shown and how stable the layout remains.

Optimization Tips

1Keep error pages minimal with simple HTML and CSS.

2Avoid importing large or complex components in +error.svelte.

3Use semantic roles and ARIA attributes for accessibility without extra cost.

Performance Quiz - 3 Questions

What is the main performance benefit of keeping the +error.svelte page simple?

A More animations on the error page

B Larger bundle size for better visuals

C Faster error content display and less layout shift

D More DOM nodes for flexibility

DevTools: Performance

How to check: Open DevTools, go to Performance tab, reload the page with an error, and record the load. Look for long tasks or delayed paint events.

What to look for: Check the Largest Contentful Paint timing and layout shift events to confirm fast error page rendering and visual stability.