GET requests in Angular - Performance & Optimization

Performance: GET requests

MEDIUM IMPACT

GET requests impact page load speed and interaction responsiveness by controlling how fast data is fetched and rendered.

Fetching data on component load

Angular

ngOnInit() {
  forkJoin({
    data: this.http.get('/api/data'),
    extra: this.http.get('/api/extra')
  }).subscribe(results => {
    this.data = results.data;
    this.extra = results.extra;
  });
}

Combines requests to run in parallel and handle results together, reducing overhead and improving load speed.

📈 Performance GainSingle subscription reduces overhead; faster data availability improves LCP.

Fetching data on component load

Angular

ngOnInit() {
  this.http.get('/api/data').subscribe(data => {
    this.data = data;
  });
  this.http.get('/api/extra').subscribe(extra => {
    this.extra = extra;
  });
}

Multiple GET requests fired simultaneously without batching increase network overhead and delay rendering.

📉 Performance CostBlocks rendering until both requests complete; increases total load time by multiple round trips.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple separate GET requests	Multiple DOM updates	Multiple reflows triggered	Higher paint cost due to incremental updates	[X] Bad
Batched GET requests with forkJoin	Single DOM update	Single reflow	Lower paint cost with consolidated update	[OK] Good

Rendering Pipeline

GET requests start in the network stage, then data parsing affects scripting, which triggers DOM updates and layout recalculations.

→Network

→Scripting

→Layout

→Paint

⚠️ BottleneckNetwork latency and blocking JavaScript execution waiting for data

Core Web Vital Affected

LCP

GET requests impact page load speed and interaction responsiveness by controlling how fast data is fetched and rendered.

Optimization Tips

1Batch multiple GET requests to reduce network overhead and DOM updates.

2Cache GET request results to avoid repeated network delays.

3Avoid blocking rendering by lazy loading non-critical GET requests.

Performance Quiz - 3 Questions

What is a main performance drawback of firing multiple separate GET requests on component load?

A Increases network overhead and delays content rendering

B Reduces network overhead by parallelizing requests

C Improves caching automatically

D Triggers fewer DOM updates

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by XHR, reload page and observe GET requests timing and count.

What to look for: Look for multiple similar GET requests and their timing; fewer and faster requests indicate better performance.