Template inheritance (@extends, @section, @yield) in Laravel - Performance & Optimization

Performance: Template inheritance (@extends, @section, @yield)

MEDIUM IMPACT

This affects server-side rendering speed and the size of the HTML sent to the browser, impacting initial page load time.

Reusing layout code across multiple pages

Laravel

@extends('layouts.master')
@section('content')
<div>Page content</div>
@endsection

Blade template inheritance compiles templates once and reuses layouts efficiently, reducing server work and HTML size.

📈 Performance GainReduces server CPU load and HTML size, improving LCP.

Reusing layout code across multiple pages

Laravel

@php echo file_get_contents('header.html'); @endphp
<div>Page content</div>
@php echo file_get_contents('footer.html'); @endphp

Manually including HTML fragments duplicates code and increases server processing time for each request.

📉 Performance CostIncreases server CPU usage and can cause larger HTML responses, slowing LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual HTML includes	No direct DOM impact (server-side)	N/A	Larger HTML increases paint time	[X] Bad
Blade template inheritance	No direct DOM impact (server-side)	N/A	Smaller HTML reduces paint time	[OK] Good

Rendering Pipeline

Template inheritance happens on the server before HTML is sent. It reduces duplicated HTML and server processing, leading to faster HTML delivery and quicker browser rendering.

→Server-side Rendering

→Network Transfer

→Browser Parsing

⚠️ BottleneckServer-side Rendering when templates are inefficiently composed

Core Web Vital Affected

LCP

This affects server-side rendering speed and the size of the HTML sent to the browser, impacting initial page load time.

Optimization Tips

1Use @extends and @section to avoid repeating layout HTML.

2Precompile Blade templates to reduce server rendering time.

3Keep templates small and modular to minimize HTML size.

Performance Quiz - 3 Questions

How does using Blade's @extends and @section affect page load performance?

A It increases the amount of HTML sent to the browser.

B It delays browser rendering by adding extra JavaScript.

C It reduces duplicated HTML and server processing, improving load speed.

D It has no effect on performance.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and inspect HTML document size and load time.

What to look for: Smaller HTML size and faster document load time indicate efficient template inheritance.