Interceptors for request modification in Angular - Performance & Optimization

Performance: Interceptors for request modification

MEDIUM IMPACT

This affects the time it takes for HTTP requests to be sent and responses to be processed, impacting interaction responsiveness and network efficiency.

Modifying HTTP requests to add headers or tokens

Angular

intercept(req, next) {
  const clonedReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + this.token) });
  return next.handle(clonedReq);
}

Cloning and modifying the request without delays keeps the pipeline fast and responsive.

📈 Performance GainNo added delay, minimal CPU overhead, improves INP by reducing request blocking.

Modifying HTTP requests to add headers or tokens

Angular

intercept(req, next) {
  const clonedReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + this.token) });
  return next.handle(clonedReq).pipe(delay(100));
}

Adding artificial delays or heavy synchronous processing blocks the request pipeline, increasing response time.

📉 Performance CostBlocks request processing for 100ms per request, increasing INP and slowing user interactions.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Interceptor with delay or heavy sync work	0	0	Blocks UI update indirectly by delaying response	[X] Bad
Lightweight interceptor modifying headers only	0	0	Minimal impact on UI update speed	[OK] Good

Rendering Pipeline

Interceptors modify HTTP requests before they leave the browser and responses before they reach components, affecting the network request lifecycle and UI update timing.

→Request Preparation

→Network

→Response Processing

→UI Update

⚠️ BottleneckRequest Preparation and Response Processing when interceptors add heavy synchronous work or delays.

Core Web Vital Affected

INP

This affects the time it takes for HTTP requests to be sent and responses to be processed, impacting interaction responsiveness and network efficiency.

Optimization Tips

1Avoid heavy synchronous work inside interceptors to prevent blocking HTTP requests.

2Do not add artificial delays in interceptors as they increase interaction latency.

3Keep interceptor logic simple and asynchronous to maintain fast response handling.

Performance Quiz - 3 Questions

What is the main performance risk when adding heavy synchronous logic inside an Angular HTTP interceptor?

A It increases the bundle size significantly.

B It blocks the request pipeline, increasing response time and reducing interaction responsiveness.

C It causes layout shifts on the page.

D It improves caching automatically.

DevTools: Performance

How to check: Record a performance profile while triggering HTTP requests. Look for long tasks or delays in the network request timeline caused by interceptor code.

What to look for: Check for blocking time before network requests complete and UI thread idle time to confirm interceptor efficiency.