如何延迟加载Adsense广告？

Question

有没有延迟加载Adsense Ads的工作方法？

我在堆栈溢出和谷歌中检查了一些答案，所有这些方法都只是延迟加载，只有当用户在视口中可见时我才需要加载广告；就像延迟加载图像一样。

Answer 1

是的，可以延迟加载Adsense，您需要使用像LazyHTML这样的开源库来延迟加载Adsense广告，而无需修改Adcode。

在以下示例中，将 ca-pub-xxx 替换为您的 Google Adsense 客户端 ID，您还必须替换槽 ID。根据您的需要进行更改。

将以下代码添加到Head中。

<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyhtml.min.js" crossorigin="anonymous"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx" crossorigin="anonymous"></script>

将广告代码包装在 lazyhtml 包装器中。

<div class="lazyhtml" data-lazyhtml onvisible>
  <script type="text/lazyhtml">
  <!--
  <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYY"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  -->
  </script>
</div>

步骤与注意事项：

1. 将 LazyHTML 和 adsbygoogle.js Javascript 添加到 Head 中，异步加载。
2. 将所有 Adsense 代码包装在 LazyHTML Wrapper 中。
3. 如果您想延迟加载所有 Adsense 广告，您必须将所有 Adsense 标签包装在 LazyHTML 包装器
4. 请注意，包装器内不允许有 HTML、CSS 或 JS 注释。
5. onvisble 属性在用户完全可见时加载 Adsense 广告单元。
6. 尽量避免 Adsense 自动广告。

帮助链接：

来源：延迟加载 Adsense 广告

Lazy HTML 包装器：LazyHTML 转换器

Answer 2

你可以加入 pubpower .net ，他们支持 adsense 的延迟加载 检查我的网站 Pinterest 下载器