Resource collections in Laravel - Performance & Optimization

Performance: Resource collections

MEDIUM IMPACT

This affects the server response time and the size of data sent to the client, impacting page load speed and perceived responsiveness.

Returning a large dataset from the server to the client

Laravel

return UserResource::collection(User::paginate(15));

Paginates data and formats it with resource collection to send only needed fields and limited items.

📈 Performance GainReduces payload size and server processing, improving response time and LCP

Returning a large dataset from the server to the client

Laravel

return User::all();

Returns all user data without filtering or formatting, causing large payload and slow response.

📉 Performance CostAdds large JSON payload, increasing network transfer and blocking rendering longer

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Returning raw large dataset	N/A (server-side)	N/A	High due to large JSON parsing	[X] Bad
Using paginated resource collection	N/A (server-side)	N/A	Low due to smaller JSON	[OK] Good

Rendering Pipeline

Laravel resource collections prepare and format data on the server before sending JSON to the browser. Smaller, well-structured JSON reduces parsing and rendering time in the browser.

→Server Processing

→Network Transfer

→Browser Parsing

→Rendering

⚠️ BottleneckNetwork Transfer and Browser Parsing

Core Web Vital Affected

LCP

This affects the server response time and the size of data sent to the client, impacting page load speed and perceived responsiveness.

Optimization Tips

1Always paginate large resource collections to limit data size.

2Use resource collections to format and filter only needed fields.

3Avoid returning raw model data directly to reduce payload and processing.

Performance Quiz - 3 Questions

What is a key benefit of using Laravel resource collections with pagination?

A They add extra CSS to the page.

B They increase the number of database queries.

C They reduce the size of data sent to the client.

D They delay server response intentionally.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and inspect the JSON response size and timing.

What to look for: Look for large payload sizes and long response times indicating inefficient resource usage.