Panel and layout groups in Unity - Performance & Optimization

Performance: Panel and layout groups

MEDIUM IMPACT

This affects how quickly the UI elements are arranged and rendered on screen, impacting frame rate and responsiveness.

Arranging multiple UI elements dynamically in a panel

Unity

GameObject panel = new GameObject("Panel");
var verticalGroup = panel.AddComponent<VerticalLayoutGroup>();
// Add simple children without extra LayoutGroups or ContentSizeFitters
for (int i = 0; i < 50; i++) {
  GameObject child = new GameObject($"Child{i}");
  child.transform.SetParent(panel.transform);
  // Use fixed sizes or minimal layout components
}

Using a single LayoutGroup on the parent panel reduces layout recalculations and avoids nested layout thrashing.

📈 Performance GainSingle layout recalculation per frame regardless of child count, improving frame rate.

Arranging multiple UI elements dynamically in a panel

Unity

GameObject panel = new GameObject("Panel");
panel.AddComponent<VerticalLayoutGroup>();
// Adding many child elements each with their own LayoutGroup
for (int i = 0; i < 50; i++) {
  GameObject child = new GameObject($"Child{i}");
  child.transform.SetParent(panel.transform);
  child.AddComponent<HorizontalLayoutGroup>();
  child.AddComponent<ContentSizeFitter>();
}

Each child having its own LayoutGroup and ContentSizeFitter causes multiple layout recalculations and reflows every frame.

📉 Performance CostTriggers 50+ layout recalculations and reflows per frame, causing frame drops.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Nested LayoutGroups on many children	High (many GameObjects with LayoutGroups)	50+ per frame	High (many recalculations)	[X] Bad
Single LayoutGroup on parent panel	Low (one LayoutGroup)	1 per frame	Low (minimal recalculations)	[OK] Good

Rendering Pipeline

When UI elements use layout groups, Unity recalculates positions and sizes during the layout phase before rendering. Nested or multiple layout groups increase the number of recalculations and cause layout thrashing.

→Layout Calculation

→Canvas Update

→Render

⚠️ BottleneckLayout Calculation stage is most expensive due to repeated recalculations.

Core Web Vital Affected

INP

This affects how quickly the UI elements are arranged and rendered on screen, impacting frame rate and responsiveness.

Optimization Tips

1Avoid nesting multiple LayoutGroups on many child elements.

2Minimize use of ContentSizeFitter on numerous children.

3Use a single LayoutGroup on the parent panel for better performance.

Performance Quiz - 3 Questions

What causes multiple layout recalculations in Unity UI panels?

A Using many nested LayoutGroups and ContentSizeFitters on children

B Using a single LayoutGroup on the parent panel

C Using fixed sizes for UI elements

D Disabling the Canvas component

DevTools: Unity Profiler

How to check: Open Unity Profiler, select UI module, record while interacting with UI, look for Layout and Canvas rebuild times.

What to look for: High Layout Calculation or Canvas Rebuild times indicate expensive layout groups causing frame drops.