Lazy loading components in Vue - Performance & Optimization

Performance: Lazy loading components

HIGH IMPACT

This affects the initial page load speed by deferring component loading until needed, reducing the amount of JavaScript parsed and executed upfront.

Loading a large component only when the user navigates to it

Vue

import { defineAsyncComponent } from 'vue';

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

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

📈 Performance GainReduces initial JS bundle by 50-200kb, improving LCP by 200-400ms depending on network.

Loading a large component only when the user navigates to it

Vue

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

Imports the entire component bundle upfront, increasing initial JavaScript size and delaying first contentful paint.

📉 Performance CostBlocks rendering until full component JS is downloaded and parsed, increasing LCP by 300-500ms on slow networks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager loading full component	High (all nodes created upfront)	Multiple reflows during initial render	High paint cost due to large DOM	[X] Bad
Lazy loading with defineAsyncComponent	Lower (nodes created on demand)	Single reflow when component loads	Lower paint cost as DOM grows gradually	[OK] Good

Rendering Pipeline

Lazy loading defers fetching and parsing component code until it is needed, reducing initial style calculation and layout work.

→JavaScript Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Parsing and Execution during initial load

Core Web Vital Affected

LCP

This affects the initial page load speed by deferring component loading until needed, reducing the amount of JavaScript parsed and executed upfront.

Optimization Tips

1Use lazy loading for large or rarely used components to reduce initial bundle size.

2Avoid lazy loading very small components to prevent excessive network requests.

3Combine lazy loading with skeleton loaders or placeholders to improve perceived performance.

Performance Quiz - 3 Questions

What is the main performance benefit of lazy loading Vue components?

A Improves CSS selector matching speed

B Reduces initial JavaScript bundle size and speeds up page load

C Prevents layout shifts caused by images

D Caches components permanently in browser memory

DevTools: Performance

How to check: Record page load, filter for scripting and rendering tasks, and observe when component code is fetched and executed.

What to look for: Look for reduced scripting time and delayed component loading in network and flame chart indicating lazy loading.