client:visible for viewport-based loading in Astro - Performance & Optimization

Performance: client:visible for viewport-based loading

MEDIUM IMPACT

This pattern affects page load speed by deferring component loading until it enters the viewport, improving initial load and interaction readiness.

Loading interactive components only when they appear on screen

Astro

import MyWidget from './MyWidget.astro';
<MyWidget client:visible />

Delays loading and hydration until the component is visible in the viewport, reducing initial bundle and speeding LCP.

📈 Performance Gainreduces initial JS by 30-50%, improves LCP by 200ms+

Loading interactive components only when they appear on screen

Astro

import MyWidget from './MyWidget.astro';
<MyWidget client:load />

Loads and hydrates the component immediately on page load, increasing bundle size and delaying LCP.

📉 Performance Costblocks rendering for 100-300ms depending on component size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Immediate hydration	High (all components loaded)	Multiple reflows during hydration	High paint cost due to JS execution	[X] Bad
client:visible hydration	Low (only visible components)	Single reflow per visible component	Lower paint cost, deferred JS	[OK] Good

Rendering Pipeline

The browser initially renders static HTML and CSS. Components marked with client:visible are not hydrated or executed until they enter the viewport, deferring JavaScript parsing and execution.

→HTML Parsing

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Hydration

Core Web Vital Affected

LCP

This pattern affects page load speed by deferring component loading until it enters the viewport, improving initial load and interaction readiness.

Optimization Tips

1Use client:visible to defer component hydration until visible in viewport.

2Deferring hydration reduces initial JavaScript execution and improves LCP.

3Avoid loading all interactive components immediately to prevent blocking rendering.

Performance Quiz - 3 Questions

What is the main benefit of using client:visible in Astro components?

A Loads all components immediately to avoid delays

B Preloads components before they are visible

C Delays loading until the component is visible, improving initial load speed

D Disables JavaScript for the component

DevTools: Performance

How to check: Record a page load and scroll to the component. Observe when the hydration JS runs and when the component becomes interactive.

What to look for: Look for deferred JS execution and hydration timing matching viewport visibility, indicating client:visible is working.