Loading Ads with the Script Component
Ads on web pages are typically loaded from script tags, but without the proper attributes this can easily introduce a delay before a page becomes interactive. This is where the Next.js Script Component comes into play.
It allows you to change the loading priority of scripts. For this example we set the strategy prop to "lazyOnload" so that ads load during idle time and don't hurt the TTI.
We have a loading state for ads while they load While our ads are loading, we show a fallback state to reserve a space for them and avoid a layout shift (CLS).
The example introduces a voluntary 3 second lag in loading the ad and it doesn't affect its lighthouse score.
Note: Having an ad blocker will break this demo.