优化 Google AdSense 代码以提升网页速度的实用指南

Google AdSense 是许多网站所有者赚取收入的重要途径，但它的脚本可能对网页加载速度产生一定的影响。在这篇博文中，我们将讨论一些优化 Google AdSense 广告脚本的方法，以确保最佳的用户体验和页面性能。

1. 合并多个脚本

如果你在页面上使用了多个广告脚本，考虑将它们合并以减少 HTTP 请求的数量，提高页面加载性能。

在 Google AdSense 创建的广告代码，每一段都会加载 adsbygoogle.js ，其实在同一个页面中它仅需加载一次。

2. 懒加载 Google AdSense 广告位

这个适合在网页中插入广告位，但不适合 Google AdSense 的网站自动广告。

使用懒加载技术，以在用户滚动到广告附近时才加载广告，避免一开始就加载所有广告。

首先在插入广告位代码的地方仅插入 HTML 代码部分，剔除 JavaScript 脚本，示例如下：

<!-- 注意替换data-ad-client与data-ad-slot的值 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="**********"
     data-ad-format="auto"
     data-full-width-responsive="false">
</ins>

JavaScript 脚本则通过 Intersection Observer API 监测页面上类名为”adsbygoogle”的元素是否进入视口（viewport）来触发加载，示例如下：

<script>
var observer = new IntersectionObserver(function(entries, observer) {
	entries.forEach(function(entry) {
		if (entry.isIntersecting) {
			var ad = document.createElement('script');
			// 注意替换发布商ID部分
			ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx';
			ad.async = true;
			ad.crossOrigin = 'anonymous';
			document.head.appendChild(ad);
			(adsbygoogle = window.adsbygoogle || []).push({});
			observer.unobserve(entry.target);
		}
	});
});
observer.observe(document.querySelector('.adsbygoogle'));
</script>

这段代码的主要功能是在用户屏幕中出现类名为 .adsbygoogle 的元素时，会实时执行一系列操作。具体而言，通过利用 Intersection Observer API 监测元素的可见性，一旦元素可见，即动态生成一个 <script> 元素，用于加载 AdSense 的 JavaScript 文件。通过触发 adsbygoogle.push({})，通知 AdSense 开始渲染广告。为了避免重复执行这一过程，代码会在完成操作后停止对当前元素的观察。

这种设计有助于按需加载广告相关的 JavaScript 脚本，以满足百度移动页面质量规范的要求。规范要求在首屏不出现广告，因此只需确保类名为 .adsbygoogle 的广告位不插入在首屏范围内，即可显著提升首屏加载速度。

总体而言，这种方式有效地提高了网页性能，因为它只有在广告即将展示时才引入相关脚本，避免了不必要的资源浪费，真实提升了用户的浏览体验。

3、延迟加载 Google AdSense 站点自动广告

Google AdSense 的站点自动广告无需插入广告位代码，只需在网页中添加以下一行代码：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx" crossorigin="anonymous"></script>

此代码使用了 async 异步加载方式，它不会等待网页的其他资源加载，同时网页的其他资源也无需等待它。

尽管看似这种方式对网页加载速度没有显著影响，但实际上存在一些潜在问题。

如果 adsbygoogle.js 在网页的其他资源（包括 CSS、JavaScript、图片或字体文件等）未完全加载之前完成加载，Google AdSense 广告可能会在这时开始展示，从而影响其他资源的加载。

相反，如果 adsbygoogle.js 在网页的所有资源加载完成后才加载完成，它将不会影响网页加载速度。

为了消除这个潜在的问题，在 WordPress 中，建议使用 Perfmatters 插件的推迟加载功能。这意味着仅当用户进行交互操作时才下载并执行 JavaScript 脚本，例如移动鼠标、滚动页面等，或者等待 10 秒后再加载。这可以有效解决广告加载可能对页面加载速度造成的影响。

4、测试效果

使用工具如 PageSpeed Insights、Lighthouse 或 Web.dev 来评估你网页的性能，并根据测试结果进行调整。

请注意，修改 AdSense 广告代码时应遵循 AdSense 政策，确保修改符合其规定。

通过采取这些优化措施，你可以最大程度地减小 Google AdSense 广告脚本对网页性能的影响，提供更好的用户体验。如果你有其他问题或需要更多帮助，请发帖咨询！😊