Suspense for async components in Vue - Performance & Optimization

Performance: Suspense for async components

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by managing how async components load and render.

Loading async components with fallback UI

Vue

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script setup>
import AsyncComponent from './AsyncComponent.vue'
</script>

Shows fallback UI immediately, improving perceived load speed and user experience.

📈 Performance GainImproves LCP by showing fallback while loading async component

Loading async components with fallback UI

Vue

<template>
  <AsyncComponent />
</template>

<script setup>
import AsyncComponent from './AsyncComponent.vue'
</script>

No fallback UI is shown while the async component loads, causing blank space and poor user feedback.

📉 Performance CostBlocks LCP until async component is fully loaded

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Async component without Suspense	Minimal initial DOM	Single reflow after load	Large paint delay	[X] Bad
Async component with Suspense fallback	More DOM nodes for fallback	Single reflow for fallback + reflow for component	Smaller initial paint delay	[OK] Good

Rendering Pipeline

Suspense delays the rendering of async components until they are ready, showing fallback content first. This affects the Style Calculation, Layout, and Paint stages by controlling when the main content is painted.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckPaint stage is delayed until async component resolves

Core Web Vital Affected

LCP

This affects page load speed and interaction responsiveness by managing how async components load and render.

Optimization Tips

1Use Suspense to show fallback UI immediately for async components.

2Keep fallback UI lightweight to minimize paint delays.

3Avoid deep nesting of Suspense to reduce multiple paint bottlenecks.

Performance Quiz - 3 Questions

What is the main performance benefit of using Suspense with async components in Vue?

A It reduces the size of the JavaScript bundle

B It shows fallback UI immediately, improving perceived load speed

C It eliminates all reflows during loading

D It preloads all async components before rendering

DevTools: Performance

How to check: Record page load and look for long tasks blocking the first contentful paint. Check if fallback UI appears before async component.

What to look for: Look for reduced time to first paint and visible fallback UI indicating Suspense is working well.