如何避免谷歌广告拖慢我的网站（特别是移动端）？

Question

我知道很多网站管理员认为页面速度无关紧要。然而，我有信心说这个因素是谷歌决定排名任何网站的前三大因素之一。

我厌倦了看到谷歌自己的服务拖慢我的页面速度。我编写干净的代码。当我启动任何网站/应用程序时，在GTMetrix和Pingdom上得分为“A”，在Google Page Speed（移动版）上得分为100/100。通常来说，Google广告不会损害桌面版本。

然而，一旦我添加至少一个Google广告，我的排名就下降到“C”和60-67/100（移动版）。

当然，可能有人会说页面速度不是SEO排名因素。好的，对于《纽约时报》、《华尔街日报》、Bustle、HuffPost等可能是。但对于任何新的网站来说，速度都是至关重要的因素。

不公正的是，谷歌指出了它自己的服务会拖慢我的（和你的）项目，如：

有6个静态组件没有长期过期日期。

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
https://code.jquery.com/jquery-3.3.1.min.js (not Google)
https://adservice.google.ca/adsid/integrator.js?domain=xxx
https://adservice.google.com/adsid/integrator.js?domain=xxx
https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub- 
xxx.js
https://fonts.googleapis.com/css? 
family=Open+Sans:400,700|Roboto:700&lang=en

减少DNS查找：

pagead2.googlesyndication.com: 6 components, 368.9K (136.4K GZip)
code.jquery.com: 1 component, 86.9K (30.2K GZip)
adservice.google.ca: 1 component, 0.1K (0.1K GZip)
adservice.google.com: 1 component, 0.1K (0.1K GZip)
googleads.g.doubleclick.net: 11 components, 173.4K (45.9K GZip)
fonts.googleapis.com: 1 component, 7.0K (0.6K GZip)
tpc.googlesyndication.com: 5 components, 153.0K (57.0K GZip)
www.google.com: 1 component, 0.2K

避免URL重定向：

https://www.google.com/pagead/drt/ui redirects to 
https://googleads.g.doubleclick.net/pagead/drt/si

减少 JavaScript 执行时间：

/pagead/ads?client=…(googleads.g.doubleclick.net)
/pagead/ads?client=…(googleads.g.doubleclick.net)
…js/adsbygoogle.js(pagead2.googlesyndication.com)
…r20100101/osd.js(pagead2.googlesyndication.com)
…r20180604/show_ads_impl.js(pagead2.googlesyndication.com)
…activeview/osd_listener.js(tpc.googlesyndication.com)

我知道我无法在他们的网站上编辑代码。但是也许有某种方法可以推迟Google广告或使用其他技巧来减少Google自己服务的危害？是否至少有人在页面上放置2-3个Google广告，同时在Google Page Speed（移动版）上获得100/100的分数？

- Alex Cardo

---

我投票关闭此问题，因为SEO问题是离题的，正如标签所述。请使用webmasters.stackexchange.com。 - Larry Shatzer

请问您能否提醒我广告标签的样式以及放置广告的位置？用于定位广告的HTML代码片段是什么？ - Chloe

Answer 1

最近我对这些问题进行了一些测试和更深入的研究，所以关于此我有一些解决方案和建议。

主要目标是将所有转化和第三方脚本的影响减到最小，并将它们全部移到低优先级加载，例如将它们添加到页脚部分而不是头部，尽管所有这些服务都建议将它们放在头部。从跟踪和分析的角度来看，将这些脚本以较低的优先级加载不会造成太大的损失。可能会导致一些转化无法被跟踪并且你的报告中会遗漏，但同时你会提高所有用户的网站速度。例外情况是保持Google Analytics或Google Tag Manager在头部，因为这可能对功能和跟踪有重要作用。

另一个重要的好习惯是审查和删除您没有活动的广告标记（tag），仅在网站上保留重要的营销和跟踪标签。

我推荐的控制所有这些第三方脚本的方法是使用Google Tag Manager并通过它管理所有这些标记。

如何使用Google Tag Manager优化网站速度：

1. 按优先级对所有脚本进行排序

使用Google Tag Manager的页面视图触发器在网页加载时触发标记。有三种触发器类型跟踪页面加载事件，每种类型都有略微不同的条件来确定何时触发触发器并引发标记：

页面视图：在Web浏览器开始加载页面时立即触发。如果您只需要从页面印象中生成数据，则使用此选项。

DOM就绪：在浏览器完成构建完整的HTML页面且文档对象模型（DOM）已准备好进行解析后触发。与DOM交互以填充变量的基于页面视图的标记应使用此触发器类型，以确保正确的值可供Tag Manager使用。

窗口已加载：在页面完全加载完成后触发，包括任何嵌入的资源，如图像和脚本。

要创建新的页面视图触发器：

1. 单击“触发器”，然后单击“新建”。
2. 单击“触发器配置”并选择一个页面视图触发器类型。

3. 可选但推荐以提高性能：为您希望点击发生的页面指定条件（通常是URL模式）：

   • 在“此触发器触发时”下，选择“某些事件”。
   • 在“当事件发生并且这些条件都为真时触发此触发器”下，添加过滤器以仅在需要时启用此触发器的页面上，例如点击URL包含/path/to/promo。

4. 保存触发器并发布。

来源：https://support.google.com/tagmanager/answer/7679319?hl=en

我建议仅针对最重要的标签（例如Google Analytics）使用Page View触发器。对于所有其他标签，您应该使用至少DOM Ready或更可能是Page Loaded触发器。使用Page Loaded触发器将对所有这些第三方标签的网站速度产生较小的影响，但会增加某些转化无法跟踪的可能性，如果用户关闭Thank You页面比跟踪脚本加载更快。

有时候像HotJar或类似的热图脚本也应该与Page View脚本一起使用，以增加这些分析数据的准确性。

如果您在网站上添加了一些聊天或支持工具，则对于这些脚本也应该使用Page Loaded触发器。

2. 根据需要审核和更新脚本。

您应该审核、更改或暂停您未使用的标签或这些第三方工具没有任何活动的运营活动。

使用资源提示：DNS Prefetch和/或Preconnect

此外，您应该为从另一个域加载的所有第三方资源使用这些资源提示。由于两者不支持相同的浏览器，我建议同时使用它们。

简而言之，您应该为“减少DNS查找”下提到的所有域使用这些内容。

您应该在头部添加以下代码：

<!-- Prefetch DNS for external assets -->
 <link rel="dns-prefetch" href="//fonts.googleapis.com">
 <link rel="dns-prefetch" href="//www.google-analytics.com">
 <link rel="dns-prefetch" href="//cdn.domain.com">

<!-- Preconnect for external assets -->
 <link rel="preconnect" href="//fonts.googleapis.com" crossorigin>
 <link rel="preconnect" href="//www.google-analytics.com" crossorigin>
 <link rel="preconnect" href="//cdn.domain.com" crossorigin>

- gintsg

Answer 2

我特别注意到许多网站上都有fonts.googleapis.com，这会导致页面加载时间长达10秒以上。这非常令人烦恼，因为我的uBlock Origin广告拦截器无法阻止它。

你可以将内容（字体、JQuery）托管在自己的服务器上，但这样人们就无法缓存经常访问的库了。（可能每个网站都已经从CDN中缓存了最新版本的JQuery，因为所有网站都在使用它。）你可以尝试托管广告脚本，但Google可能会经常更改它们，或者为每个唯一的用户包含一个哈希值，这将使其不可能。如果它们对每个用户不是唯一的，则可能需要在后台频繁刷新它们，例如每小时或每天。不确定。

此外，将<script>标签放在页面底部，甚至在</body>之后，但在</html>之前。这将最后加载脚本和广告。

另一件您可以做的事情是放置一个 JQuery $(document).ready() {...} 函数，以便在文档加载完成后将广告 <script> 标签和 <iframe> (?) 标签插入到正确位置。然后它们不会计入页面速度加载时间。使用一个 <div class="ad"></div> 占位符。

- Chloe