Resolver for pre-fetching data in Angular - Performance & Optimization

Performance: Resolver for pre-fetching data

MEDIUM IMPACT

This affects the page load speed by delaying route activation until data is ready, improving perceived load but potentially increasing initial wait time.

Pre-fetching data before route activation to avoid loading spinners inside components

Angular

export const dataResolver = () => {
  const dataService = inject(DataService);
  const route = inject(ActivatedRouteSnapshot);
  return dataService.getData(route.params['id']);
};

const routes = [
  {
    path: 'item/:id',
    component: ItemComponent,
    resolve: { itemData: dataResolver }
  }
];

Data is fetched before route activation, so component renders with data immediately, reducing layout shifts and improving LCP.

📈 Performance GainSingle render with data present, reducing reflows and improving perceived load speed.

Pre-fetching data before route activation to avoid loading spinners inside components

Angular

this.route.params.subscribe(params => {
  this.dataService.getData(params['id']).subscribe(data => {
    this.data = data;
  });
});

Data loads inside the component after route activation, causing delayed content rendering and possible layout shifts.

📉 Performance CostTriggers multiple reflows as content updates after initial paint, increasing LCP and CLS.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Data fetched inside component after route loads	Multiple DOM updates as data arrives	Multiple reflows triggered	Multiple paints increasing load time	[X] Bad
Data fetched in resolver before route activation	Single DOM update with data ready	Single reflow on initial render	Single paint with stable layout	[OK] Good

Rendering Pipeline

The resolver fetches data before Angular activates the route, so the browser paints the component with data already present, avoiding multiple layout recalculations.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution waiting for data fetch delays initial paint.

Core Web Vital Affected

LCP

This affects the page load speed by delaying route activation until data is ready, improving perceived load but potentially increasing initial wait time.

Optimization Tips

1Use resolvers to fetch data before route activation to improve LCP.

2Avoid fetching data inside components to reduce layout shifts and reflows.

3Keep resolver data fetching fast and lightweight to minimize initial load delay.

Performance Quiz - 3 Questions

How does using a resolver for data fetching affect Largest Contentful Paint (LCP)?

A It has no effect on LCP.

B It improves LCP by ensuring data is ready before rendering.

C It worsens LCP by delaying route activation unnecessarily.

D It causes layout shifts after initial paint.

DevTools: Performance

How to check: Record a performance profile while navigating to the route. Look for scripting time and paint events related to data fetching and rendering.

What to look for: Check if the main content paints once with data or if multiple paints and layout shifts occur after initial load.