Why relationships model real data in Laravel - Performance Evidence

Performance: Why relationships model real data

MEDIUM IMPACT

This concept affects how efficiently the application queries and renders related data, impacting page load and interaction speed.

Fetching related data for display in a view

Laravel

$users = User::with('profile')->get();
foreach ($users as $user) {
  echo $user->profile->bio;
}

Eager loading fetches all profiles in one query, reducing database calls and speeding up rendering.

📈 Performance GainSingle query for users and profiles, reducing queries from N+1 to 2

Fetching related data for display in a view

Laravel

$users = User::all();
foreach ($users as $user) {
  echo $user->profile->bio;
}

This triggers a query for each user's profile (N+1 query problem), causing many database hits and slow page load.

📉 Performance CostTriggers N+1 queries, increasing database load and blocking rendering longer

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Lazy loading relationships (N+1 queries)	Minimal DOM nodes	Multiple reflows due to slow data	High paint cost due to delayed data	[X] Bad
Eager loading relationships	Minimal DOM nodes	Single reflow after data ready	Lower paint cost with fast data	[OK] Good

Rendering Pipeline

When relationships are used inefficiently, the browser waits longer for data to arrive, delaying layout and paint. Proper eager loading reduces database calls, so data arrives faster, improving the critical rendering path.

→Data Fetching

→Layout

→Paint

⚠️ BottleneckData Fetching from database causing delayed layout and paint

Core Web Vital Affected

LCP

This concept affects how efficiently the application queries and renders related data, impacting page load and interaction speed.

Optimization Tips

1Avoid lazy loading relationships inside loops to prevent N+1 queries.

2Use eager loading (with()) to fetch related data in fewer queries.

3Reducing database queries improves Largest Contentful Paint and user experience.

Performance Quiz - 3 Questions

What is the main performance problem with lazy loading relationships in Laravel?

A It blocks JavaScript execution

B It increases CSS file size

C It causes many database queries, slowing page load

D It causes layout shifts in the browser

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and count number of database API calls or AJAX requests fetching related data.

What to look for: Multiple repeated calls for related data indicate N+1 problem; a single batched call indicates good eager loading.