Async components for lazy loading in Vue - Performance & Optimization

Performance: Async components for lazy loading

HIGH IMPACT

This affects the initial page load speed by deferring component loading until needed, improving time to interactive.

Loading a large Vue component only when needed

Vue

import { defineAsyncComponent } from 'vue';
export default {
  components: {
    LargeComponent: defineAsyncComponent(() => import('./LargeComponent.vue'))
  }
};

Loads the component only when needed, reducing initial bundle size and speeding up first paint.

📈 Performance GainSaves 100+ kb on initial load, improves LCP by deferring heavy code

Loading a large Vue component only when needed

Vue

import LargeComponent from './LargeComponent.vue';
export default {
  components: { LargeComponent }
};

Imports the large component upfront, increasing initial bundle size and delaying page load.

📉 Performance CostAdds 100+ kb to initial bundle, blocking rendering until loaded

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager import of large component	High upfront DOM nodes	Multiple reflows during initial load	High paint cost due to large bundle	[X] Bad
Async component lazy loaded	DOM nodes added on demand	Single reflow when component loads	Lower initial paint cost	[OK] Good

Rendering Pipeline

Async components delay loading until requested, so initial style calculation and layout happen faster with less code. The component is fetched and rendered later, triggering additional paint and composite steps.

→Network

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckNetwork and Paint when async component loads

Core Web Vital Affected

LCP

This affects the initial page load speed by deferring component loading until needed, improving time to interactive.

Optimization Tips

1Always lazy load large components to reduce initial bundle size.

2Use loading placeholders to avoid layout shifts when async components load.

3Monitor network requests to ensure components load only when needed.

Performance Quiz - 3 Questions

What is the main benefit of using async components in Vue for lazy loading?

A Prevents all JavaScript from loading

B Improves CSS selector performance

C Reduces initial bundle size and speeds up page load

D Automatically caches all components

DevTools: Performance

How to check: Record a page load and interaction; look for long tasks and network requests related to component chunks loading.

What to look for: Check if large JS chunks load upfront or deferred; verify faster Time to Interactive and lower LCP with async components.