以巧妙的方式加载 Google Adsense 和其他 Advertise javascript答案

【问题标题】：Load Google Adsense and other Advertise javascript in a clever way以巧妙的方式加载 Google Adsense 和其他 Advertise javascript
【发布时间】：2020-03-15 23:55:12
【问题描述】：

我正在运行一个 wordpress 博客，其中包含来自 adsense 和 Google ADX 的广告。

当广告被禁用时，网站加载时间不到 1 秒，而广告被激活时，网站加载时间超过 3-4 秒。

我知道有广告的网站的性能总是比没有广告的网站差，但就我而言，问题在于加载广告的时间错误。

我目前像这样在页脚中加载我的广告

<script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "my ad client",
          enable_page_level_ads: true
     });
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async defer src="https://www.googletagmanager.com/gtag/js?id=my id"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'my id');
</script>
<script async defer src="https://cdn.exmarketplace.com/bidder/adsboosternopb.js"></script>
<script async defer src="https://cdn.exmarketplace.com/bidder/my web/my web.dfp.js"></script>

还有这样的广告单元

<!-- Adaptive Header -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="my ad client"
     data-ad-slot="my ad slot"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

现在，问题不在于 adsbygoogle javascript，它的加载速度与我的内容一样快；问题是脚本从外部来源加载的所有广告内容，在绘制或加载我的博客的重要内容（例如文章的文本和图像）期间随机加载。

我已经阅读了这篇关于 window.onload = function() 的文章 Load Google Ads after entire page has loaded，我想知道，在得到这个答案 5 年后，我是否可以用它来加快广告速度

【问题讨论】：

标签： javascript ads adsense

【解决方案1】：

不，您必须考虑一种延迟加载 AdSense 广告的方法。在考虑延迟加载时，我发现 Adsense 不会按顺序将广告位推送到特定容器。延迟脚本加载将引入进一步的延迟和瓶颈请求，最终导致较低的可见度和收益。到广告加载时，用户会滚动到远离广告的位置。

更新

这是Lazy Load Ads的方法

【讨论】：

【解决方案2】：

多年后，在鼠标滚动或触摸（如果是触摸屏设备）上加载 javascript 已经成为一种东西。

在 WordPress 上有一个非常酷的插件可以做到这一点https://wordpress.org/plugins/flying-scripts/ 以及 WPRocket 引入了延迟 javascript 执行的功能（包括 Google Adsense JS）

【讨论】：