J'utilise Next JS sur un projet et je procède à quelques optimisations à l'aide de l'outil Page Speed Insights de Google. L'un des principaux contributeurs négatifs aux performances de mes sites est les scripts tiers, principalement Google Tag scripts (qui charge également mon Google Analytics) et l'API Google maps scripts. Jusqu'à présent, j'ai essayé plusieurs choses pour compenser le chargement de ces deux bibliothèques, mais je reçois toujours les messages suivants de l'outil :
Supprimez les JavaScript inutilisés
https://maps.googleapis.com/maps/api/js?key=asdafsafasafasfasf&libraries=places&language=en®ion=US
(maps.googleapis.com)
https://www.googletagmanager.com/gtag/js?id=UA-123123-2
(www.googletagmanager.com)J'ai besoin que ces scripts soient chargés partout sur le site, j'ai donc essayé de retarder le chargement des scripts jusqu'à ce que tout le reste de la page ait fini de se charger. Voici ce que j'avais initialement :
_document.js
import Document, { Head, Main, NextScript, Html } from "next/document";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang="en">
<Head>
<script
defer
src={`https://www.googletagmanager.com/gtag/js?id=UA-123123-2`}
/>
<script
defer
src="https://maps.googleapis.com/maps/api/js?key=asdafsafasafasfasf&libraries=places&language=en®ion=US"
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123123-2');
`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}Comme vous pouvez le voir, je charge simplement les scripts avec la balise defer prop comme vous le feriez normalement. Avec cette méthode, google page speed insights me donne toujours le même message cependant. J'ai alors essayé une approche différente en utilisant un composant expérimental dans Next JS appelé ScriptLoader qui vise à permettre aux gens de différer les scripts. Voici un lien vers ce composant :
https://github.com/vercel/next.js/discussions/18172
Voici ma mise en œuvre :
_app.js
import App from "next/app";
import ScriptLoader from "next/dist/client/experimental-script.js";
export default class NextApp extends App {
render() {
return (<>
<ScriptLoader
strategy="defer"
src="https://www.googletagmanager.com/gtag/js?id=UA-123123-2"
/>
<ScriptLoader
strategy="defer"
src="https://maps.googleapis.com/maps/api/js?key=asdafsafasafasfasf&libraries=places&language=en®ion=US"
/>
</>)
}
}Cependant, le message d'erreur reste le même. Je ne sais pas quoi essayer maintenant ! Quelqu'un d'autre a-t-il rencontré ce problème et trouvé une solution de contournement ?
Merci
