Resource-based URL design in Express - Performance & Optimization

Performance: Resource-based URL design

MEDIUM IMPACT

This affects how quickly the server can route requests and how efficiently browsers cache resources, impacting page load speed and responsiveness.

Designing URLs for API endpoints to serve resources

Express

app.get('/users/:id', (req, res) => { /* handler */ });
app.get('/users/:id/posts', (req, res) => { /* handler */ });

Resource-based URLs are predictable and cache-friendly, allowing browsers and CDNs to cache responses effectively.

📈 Performance GainImproves cache hit rate and reduces server routing overhead, speeding up LCP.

Designing URLs for API endpoints to serve resources

Express

app.get('/getUserInfo', (req, res) => { /* handler */ });
app.get('/fetchUserPosts', (req, res) => { /* handler */ });

Using action verbs in URLs makes caching harder and routing less predictable, increasing server processing time.

📉 Performance CostIncreases server routing complexity and reduces cache hit rate, causing slower LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Action-based URLs (e.g., /getUserInfo)	N/A	N/A	Higher due to slower response	[X] Bad
Resource-based URLs (e.g., /users/:id)	N/A	N/A	Lower due to better caching	[OK] Good

Rendering Pipeline

Resource-based URLs help browsers and CDNs cache content efficiently, reducing network requests and server load. This speeds up the critical rendering path by delivering content faster.

→Network

→Server Routing

→Cache Lookup

→Rendering

⚠️ BottleneckServer Routing and Network Latency

Core Web Vital Affected

LCP

This affects how quickly the server can route requests and how efficiently browsers cache resources, impacting page load speed and responsiveness.

Optimization Tips

1Use nouns to name resources in URLs, not verbs.

2Keep URLs consistent to maximize browser and CDN caching.

3Avoid query parameters for resource identification when possible.

Performance Quiz - 3 Questions

Why do resource-based URLs improve web performance?

A They reduce the number of DOM elements on the page.

B They enable better caching and simpler server routing.

C They increase the size of JavaScript bundles.

D They force the browser to reload resources every time.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload the page, and inspect the resource URLs and their cache status.

What to look for: Look for repeated requests that could be cached and check if resource URLs are consistent and cacheable.