react-doctor/rendering-script-defer-async

Add `defer` for DOM-dependent scripts or `async` for independent ones (analytics). In Next.js, use `<Script strategy="afterInteractive" />` instead

  • Category: Performance
  • Severity: warn
  • Source: oxlint-plugin-react-doctor
  • Framework: global
  • Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm a JSX <script src=...> opening element that lacks BOTH defer and async attributes. The rule skips type='module' (deferred by default) and non-executable type values like application/ld+json. Render-blocking scripts halt HTML parsing until they download, parse, and execute — directly inflating LCP and FCP.

Fix prompt

Use this once validation confirms the diagnostic is real.

Add defer for scripts that depend on the parsed DOM (most app code) or async for independent third-party scripts (analytics, ads). In Next.js prefer next/script with <Script src=... strategy="afterInteractive" /> so the framework owns scheduling. See https://web.dev/articles/efficiently-load-third-party-javascript#use-async-or-defer