Optimisation des scripts tiers
De nombreuses applications dépendent de JavaScript tiers pour inclure différents types de fonctionnalités, telles que l'analyse des données, les publicités et les widgets d'assistance client. Cependant, l'intégration de code tiers peut retarder le rendu du contenu de la page et affecter les performances utilisateur s'il est chargé trop tôt.
Next.js fournit un composant Script intégré qui optimise le chargement de tout script tiers, tout en offrant aux développeurs la possibilité de décider quand le récupérer et l'exécuter.
Utilisation du composant Script
Avec le HTML classique, les scripts externes doivent être ajoutés manuellement à next/head :
import Head from 'next/head';
function IndexPage() {
return (
<div>
<Head>
<script src="https://www.googletagmanager.com/gtag/js?id=123" />
</Head>
</div>
);
}Avec le composant Script de Next.js, vous pouvez l'ajouter n'importe où dans le composant sans avoir besoin d'utiliser next/head :
import Script from 'next/script';
function IndexPage() {
return (
<div>
<Script
strategy="afterInteractive"
src="https://www.googletagmanager.com/gtag/js?id=123"
/>
</div>
);
}Le composant Script introduit une propriété strategy qui vous permet de décider quand récupérer et exécuter un script pour un chargement optimal. Pour ne pas affecter négativement le Largest Contentful Paint (LCP), la plupart des scripts tiers doivent être différés pour se charger après que tout le contenu d'une page a fini de charger, soit immédiatement après que la page devient interactive (strategy="afterInteractive"), soit de manière paresseuse pendant les temps d'inactivité du navigateur (strategy="lazyOnload").
Pour aller plus loin
- Next.js : Composant Script
- Next.js : Référence API pour
next/script