client:media for responsive interactivity in Astro - Performance & Optimization

Performance: client:media for responsive interactivity

MEDIUM IMPACT

This affects how quickly interactive components respond to viewport changes and user input on different screen sizes.

Load interactive components only on specific screen sizes

Astro

<MyComponent client:media="(min-width: 768px)" />

Loads interactivity only when viewport matches media query, saving CPU and memory on smaller screens.

📈 Performance GainReduces unnecessary script execution, improving INP and lowering CPU usage.

Load interactive components only on specific screen sizes

Astro

<MyComponent client:load />

Loads and runs interactive JavaScript on all screen sizes, even when not needed.

📉 Performance CostBlocks main thread on all devices, increasing input delay and bundle size.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
client:load on all screens	High (all scripts loaded)	Multiple reflows if scripts modify DOM	High paint cost due to unnecessary event listeners	[X] Bad
client:media with media query	Low (scripts loaded conditionally)	Single reflow when media matches	Lower paint cost, fewer event listeners	[OK] Good

Rendering Pipeline

The browser first parses HTML and CSS, then Astro defers loading interactive scripts until the media query matches. This delays JavaScript execution and event binding until needed.

→Parsing

→JavaScript Execution

→Event Binding

⚠️ BottleneckJavaScript Execution and Event Binding on unnecessary screen sizes

Core Web Vital Affected

INP

This affects how quickly interactive components respond to viewport changes and user input on different screen sizes.

Optimization Tips

1Use client:media to load interactive scripts only when the viewport matches the media query.

2Avoid client:load for components that only need interactivity on certain screen sizes.

3Test responsiveness by resizing the viewport and checking script execution in DevTools Performance panel.

Performance Quiz - 3 Questions

What is the main benefit of using client:media in Astro for responsive interactivity?

A It disables CSS styles on small screens.

B It delays loading interactive scripts until the media query matches, improving input responsiveness.

C It preloads all scripts to avoid delays on any screen size.

D It forces all scripts to load immediately regardless of screen size.

DevTools: Performance

How to check: Record a performance profile while resizing the viewport and interacting with the component. Look for script execution and event binding times.

What to look for: Lower script execution time and fewer event listeners on non-matching screen sizes indicate good use of client:media.