Named slots in Svelte - Performance & Optimization

Performance: Named slots

MEDIUM IMPACT

Named slots affect how content is distributed inside components, impacting rendering and layout stability.

Passing multiple content sections into a component using slots

Svelte

<MyComponent>
  <div slot="header">Header content</div>
  <div slot="default">Default content</div>
  <div slot="footer">Footer content</div>
</MyComponent>

Explicitly naming all slots including default stabilizes layout and reduces unexpected shifts.

📈 Performance GainSingle reflow on initial render, reduces CLS by preventing content jumps.

Passing multiple content sections into a component using slots

Svelte

<MyComponent>
  <div slot="header">Header content</div>
  <div slot="footer">Footer content</div>
  <div>Default content</div>
</MyComponent>

Using unnamed default slot mixed with multiple named slots can cause layout shifts if default slot content size changes dynamically.

📉 Performance CostTriggers multiple reflows when slot content changes size, causing CLS issues.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Unnamed default slot mixed with named slots	Multiple nodes inserted dynamically	Multiple reflows on content change	Higher paint cost due to layout shifts	[X] Bad
Explicitly named slots including default	Stable node insertion	Single reflow on initial render	Lower paint cost with stable layout	[OK] Good

Rendering Pipeline

Named slots content is inserted during the component's render phase, affecting layout calculation and paint stages.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to recalculating positions when slot content changes.

Core Web Vital Affected

CLS

Named slots affect how content is distributed inside components, impacting rendering and layout stability.

Optimization Tips

1Always explicitly name all slots, including the default, to stabilize layout.

2Avoid dynamic size changes in slot content to reduce reflows and CLS.

3Use browser DevTools Performance panel to monitor layout shifts caused by slot content.

Performance Quiz - 3 Questions

How do named slots in Svelte affect page performance?

A They help stabilize layout and reduce layout shifts.

B They increase JavaScript bundle size significantly.

C They block rendering until all slots are filled.

D They cause more paint events than unnamed slots.

DevTools: Performance

How to check: Record a performance profile while interacting with slot content changes. Look for layout shifts and reflows in the flame chart.

What to look for: Check for multiple Layout events and large Layout Shift scores indicating CLS problems.