Script, markup, and style sections in Svelte - Performance & Optimization

Performance: Script, markup, and style sections

MEDIUM IMPACT

This concept affects initial page load speed and rendering performance by how scripts, markup, and styles are processed and applied.

Organizing component code with script, markup, and style in Svelte

Svelte

<script>let count = 0;</script>
<div>{count}</div>
<style>div { font-size: 1rem; }</style>

Avoids unnecessary imports, keeps script small and fast to parse, styles scoped and minimal.

📈 Performance GainSaves 150kb bundle size, reduces blocking time to under 10ms

Organizing component code with script, markup, and style in Svelte

Svelte

<script>import bigLib from 'big-lib'; let count = 0;</script>
<div>{count}</div>
<style>div { font-size: 16px; }</style>

Importing large libraries in the script section increases bundle size and blocks rendering until loaded.

📉 Performance CostAdds 150kb to bundle, blocks rendering for 100ms on slow connections

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large script imports in <script>	Minimal	1 (initial)	Medium (due to delayed paint)	[X] Bad
Minimal script with scoped styles	Minimal	1 (initial)	Low	[OK] Good

Rendering Pipeline

The browser parses the markup to build the DOM, applies styles from the style section, and executes scripts from the script section. Large or blocking scripts delay DOM construction and style application, affecting paint timing.

→Parsing

→Style Calculation

→Layout

→Paint

→Script Execution

⚠️ BottleneckScript Execution blocking DOM construction and style application

Core Web Vital Affected

LCP

This concept affects initial page load speed and rendering performance by how scripts, markup, and styles are processed and applied.

Optimization Tips

1Keep the <script> section minimal to avoid blocking rendering.

2Use scoped styles in the <style> section to reduce layout shifts.

3Avoid importing large libraries directly in component scripts to reduce bundle size.

Performance Quiz - 3 Questions

How does importing large libraries in the <script> section affect Svelte component performance?

A It increases bundle size and delays rendering

B It reduces bundle size and speeds up rendering

C It has no effect on performance

D It only affects style calculation

DevTools: Performance

How to check: Record a performance profile while loading the page; look for long scripting tasks and delayed first paint.

What to look for: Long scripting blocks delaying DOMContentLoaded and increased time to first paint indicate script blocking.