HTMLmarkup~8 mins

Head and body sections in HTML - Performance & Optimization

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Performance: Head and body sections

MEDIUM IMPACT

This affects the critical rendering path by controlling when and how resources load and when content is displayed.

Including scripts and styles in the head to load page resources

HTML

<head>
  <link rel="preload" href="styles.css" as="style">
  <link rel="stylesheet" href="styles.css">
  <script src="large-script.js" defer></script>
</head>
<body>
  <h1>Welcome</h1>
</body>

Using preload and defer allows styles to load early and scripts to load without blocking rendering.

📈 Performance GainReduces render-blocking, improving LCP by 200-400ms

Including scripts and styles in the head to load page resources

HTML

<head>
  <script src="large-script.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome</h1>
</body>

Blocking scripts and large CSS in the head delay rendering of visible content, increasing load time.

📉 Performance CostBlocks rendering until scripts/styles load, increasing LCP by 300-500ms

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Blocking scripts/styles in head	Minimal DOM nodes	Multiple reflows due to delayed styles	High paint cost due to late style application	[X] Bad
Preload CSS and defer scripts	Minimal DOM nodes	Single reflow after styles load	Lower paint cost with early style application	[OK] Good

Rendering Pipeline

The browser parses the head first, loading metadata, styles, and scripts. Blocking scripts/styles delay layout and paint. The body content renders after head resources are ready.

→HTML Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckBlocking scripts/styles in the head delay Style Calculation and Layout stages.

Core Web Vital Affected

LCP

This affects the critical rendering path by controlling when and how resources load and when content is displayed.

Optimization Tips

1Put only essential metadata and critical CSS in the head.

2Use defer or async attributes on scripts to avoid blocking rendering.

3Preload critical resources to speed up style and script loading.

Performance Quiz - 3 Questions

Test your performance knowledge

What is the main performance issue with placing large scripts directly in the head without defer or async?

AThey block HTML parsing and delay rendering.

BThey increase the number of DOM nodes.

CThey reduce the size of the CSS file.

DThey improve the speed of image loading.

DevTools: Performance

How to check: Record a page load and look for long tasks blocking the main thread during head parsing. Check if scripts/styles block rendering.

What to look for: Look for 'Long Tasks' and 'Blocking Time' in the waterfall; early style and script loading without blocking indicates good performance.