No synchronous render-blocking scripts in `<head>`

A synchronous <script> tag in <head> without async or defer halts the HTML parser entirely until the script downloads, parses, and executes — this is the most severe form of render-blocking resource under ISO-25010 time-behaviour measurement. Google Tag Manager, Hotjar, and Meta Pixel are frequently copied from vendor docs as bare <script src> tags, each adding its full download time as a sequential blocking delay before any page content renders. Two synchronous third-party scripts on a 4G connection can add 400–600ms of blocked parser time, pushing FCP and LCP into 'needs improvement' territory and penalising the page in Google's Page Experience scoring.

Replace bare <script> tags with Next.js Script component, specifying the correct strategy for each use case — afterInteractive for analytics and pixels, lazyOnload for non-critical widgets.

import Script from 'next/script'

// Google Tag Manager — fires after hydration
<Script
  src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX"
  strategy="afterInteractive"
/>

// Hotjar — can wait until idle
<Script
  src="https://static.hotjar.com/c/hotjar-XXXXXX.js"
  strategy="lazyOnload"
/>

beforeInteractive is only appropriate for scripts that genuinely need to run before hydration — A/B testing tools sometimes require it for flicker prevention, but verify with the tool's documentation before using it. The default should always be afterInteractive.