添加 google ads script 标签时性能不佳，有什么方法可以提高性能？答案

【问题标题】：Bad performance when added google ads script tag, there is any way to improve performance?添加 google ads script 标签时性能不佳，有什么方法可以提高性能？
【发布时间】：2020-12-03 10:22:20
【问题描述】：

我在 html.js 文件的 html.js 文件中添加了这样的 head 标签

 const ads = process.env.NODE_ENV === "production" && (
    <script
      async
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
    />
  )
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
        />
        {props.headComponents}
        {ads && ads}
      </head>
       <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>

如果有任何方法可以提高网站的性能，我将不胜感激。因为当我添加这个脚本标签时，我的网站性能变得非常糟糕。

【问题讨论】：

标签： reactjs jsx gatsby

【解决方案1】：

在性能和可读性、可扩展性和管理方面的最佳选择是使用插件。牢记这一点，您有几种方法：

使用gatsby-plugin-google-adsense:

     {
    resolve: `gatsby-plugin-google-adsense`,
    options: {
      publisherId: `ca-pub-xxxxxxxxxx`
    },
  },

使用 Google 跟踪代码管理器 (gatsby-plugin-google-gtag) 插入其他 Adsense 或 Analytics 代码：

     {
    resolve: `gatsby-plugin-google-gtag`,
    options: {
      // You can add multiple tracking ids and a pageview event will be fired for all of them.
      trackingIds: [
        "GA-TRACKING_ID", // Google Analytics / GA
        "AW-CONVERSION_ID", // Google Ads / Adwords / AW
        "DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
      ],
      // This object gets passed directly to the gtag config command
      // This config will be shared across all trackingIds
      gtagConfig: {
        optimize_id: "OPT_CONTAINER_ID",
        anonymize_ip: true,
        cookie_expires: 0,
      },
      // This object is used for configuration specific to this plugin
      pluginConfig: {
        // Puts tracking script in the head instead of the body
        head: false,
        // Setting this parameter is also optional
        respectDNT: true,
        // Avoids sending pageview hits from custom paths
        exclude: ["/preview/**", "/do-not-track/me/too/"],
      },
    },
  },

使用gatsby-browser.js API 设置脚本而不自定义html.js 文件。 onClientEntry 函数应该适合您的要求：

export const onClientEntry = () => <Helmet> <script async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  /></Helmet>;

【讨论】：

"gatsby-plugin-google-adsense" 插件添加自动广告，没有帮助。我会尝试“gatsby-plugin-google-gtag”
我使用gatsby-browser.js 添加了第三个选项，而不是自定义html.js 文件。