no-client-load-overuse

Why it matters

client:load hydrates the component immediately, blocking the main thread during page startup. client:idle waits for the browser to be idle; client:visible waits until the element enters the viewport — both give the critical path a head start.

See the difference

---
import Counter from '../components/Counter'
---
<Counter client:load />

---
import Counter from '../components/Counter'
---
<!-- Below-the-fold component: hydrate when browser is idle -->
<Counter client:idle />

<!-- Only visible when scrolled into view -->
<Counter client:visible />

Configure this check

Override the default severity in your ESLint config:

import astroDoctorPlugin from '@santi020k/eslint-plugin-astro-doctor'

export default [
  astroDoctorPlugin.configs.recommended,
  {
    rules: {
      'astro-doctor/no-client-load-overuse': 'error',
    },
  },
]

Or set the severity for CLI scans in doctor.config.ts:

export default {
  rules: {
    'astro-doctor/no-client-load-overuse': 'error',
  },
}

Use 'error', 'warn', or 'off'. The configuration guide covers presets and per-file overrides.

Keep exploring performance

• use-astro-imageUse <Image> from astro:assets instead of raw <img> tags.
• require-image-dimensionsRequire dimensions for public and remote astro:assets images.
• no-blocking-scriptDisallow render-blocking <script src="..."> tags — add defer, async, or type="module".
• no-unprocessed-script-surprisesWarn when script attributes opt out of Astro script processing.

Browse every rule and project audit