What steps can I take to minimize the impact of third-party code on my next.js app? I have incorporated Google Analytics and Google AdSense on my website, but it is causing performance issues.
_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<script
defer
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_ID}`}
/>
<script
defer
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.GA_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
<script
defer
src={
"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-75************"
}
crossOrigin="anonymous"
></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Visit my website - click here