Popup layout stabilizes without cumulative layout shift during loading

Layout shift during popup load is visually jarring and causes accidental clicks — a user aiming at a button hits a link when content loads and pushes the layout down. ISO 25010:2011 performance-efficiency.time-behaviour covers stability of the rendered interface, not just load time. Cumulative layout shift in extension popups is harder to measure than in web pages but its user impact is identical: misclicks on the wrong interactive element after a reflow.

Reserve space for every dynamic element before data arrives using fixed dimensions or skeleton containers. Images must always declare explicit width and height.

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eee; /* Placeholder until image loads */
}

.stats-section {
  min-height: 60px; /* Holds space before async data populates */
}

Skeleton screen dimensions must match the final rendered content so no reflow occurs when real content replaces the placeholder. Avoid patterns where the popup grows in height after opening.