Load scripts with next/script

Pick when each third-party script runs.

From next-best-practices, scripts.md.

Three scripts, two loaders

Change a strategy, then drag Time or press Play.

<script> in headBad
Consent · 20 ms<script>
Analytics · 80 ms<script>
Chat widget · 250 ms<script>

First paint – Interactive – 3rd-party pre-TTI –
next/scriptGood

First paint – Interactive – 3rd-party pre-TTI –
  • Parse
  • Blocks parser
  • 3rd-party
  • Hydrate
  • Download
  • Idle wait

Inline scripts need an id

Leave Home and come back, then clear the id.

<Script> without idBad
no id
Executions 0
<Script id>Good
Executions 0

Where each script goes

Pick a preset, or edit the fields.

What you wroteBad
    FixedGood

    Why it matters, pros and cons

    Why it matters

    A head <script> blocks paint. next/script runs each one when needed.

    Pros

    • Paint and hydration skip third parties.
    • One prop decides when it runs.
    • Deduped across navigations by id/src.

    Cons

    • afterInteractive still lands right after hydration.
    • lazyOnload is too late for first-tap features.
    • beforeInteractive delays hydration on every page.