REST vs GraphQL awareness in Express - Performance Comparison

Performance: REST vs GraphQL awareness

MEDIUM IMPACT

This affects how fast data loads on the page and how much data the browser processes, impacting load speed and interaction responsiveness.

Fetching data for a user profile with multiple related resources

Express

GraphQL query: { user(id: "123") { name, posts { title }, friends { name } } }

Single request fetches all needed data, reducing network overhead and speeding up rendering.

📈 Performance GainSingle HTTP request reduces latency and speeds up LCP and INP.

Fetching data for a user profile with multiple related resources

Express

REST endpoints: GET /user/123, GET /user/123/posts, GET /user/123/friends

Multiple REST requests cause extra network overhead and delay rendering.

📉 Performance CostTriggers multiple HTTP requests, increasing load time and blocking rendering until all complete.

Performance Comparison

Pattern	Network Requests	Payload Size	Rendering Delay	Verdict
Multiple REST calls	Multiple HTTP requests	Larger due to over-fetching	Higher due to waiting on all requests	[X] Bad
GraphQL single query	Single HTTP request	Smaller, only requested fields	Lower, data ready sooner	[OK] Good

Rendering Pipeline

Data fetching impacts the Critical Rendering Path by affecting when the browser can paint meaningful content. Multiple REST calls delay data availability, causing longer blocking times. GraphQL's single request reduces blocking and speeds up style calculation and layout.

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork latency and data parsing delay the Layout and Paint stages.

Core Web Vital Affected

LCP, INP

This affects how fast data loads on the page and how much data the browser processes, impacting load speed and interaction responsiveness.

Optimization Tips

1Minimize number of network requests to reduce load blocking.

2Fetch only needed data fields to reduce payload size.

3Use GraphQL to combine data needs into a single efficient request.

Performance Quiz - 3 Questions

How does using GraphQL instead of multiple REST endpoints affect page load?

A Increases number of network requests, slowing load

B Reduces number of network requests, speeding up load

C Has no effect on network requests

D Always increases payload size

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, observe number of requests and size of responses.

What to look for: Fewer requests and smaller payload sizes indicate better performance; large or many requests indicate potential issues.