Facebook Pixel 将页面加载时间减慢了近一秒答案

【问题标题】：Facebook Pixel slows down page load time by almost a full secondFacebook Pixel 将页面加载时间减慢了近一秒
【发布时间】：2020-01-21 07:08:04
【问题描述】：

我正在开始优化，但我遇到了 Facebook 跟踪像素会导致加载时间缩短的问题： Waterfall Report

我的页面大约在 1.1 秒后完成，但像素直到将近一秒后才完成。

根据文档，我的像素脚本在头脑中。有什么办法可以加快速度吗？

【问题讨论】：

标签： javascript facebook frontend analytics

【解决方案1】：

脚本可能不一定需要在头部，即使 Facebook 建议将其作为默认设置。只要在嵌入代码 sn-p 之前，您没有在任何地方显式调用 fbq 函数，它应该可以正常工作。

问题是，实际带来了多大的改进 - 嵌入代码已经写在了外面，实际的 SDK 是异步加载的。

嵌入 SDK 的 <script> 块可能会阻塞解析器 - 但您不能将 async 或 defer 放在内联脚本上，那样不会产生任何影响。将代码本身放入外部文件，然后使用 async 或 defer 嵌入它可能会在这方面有所帮助。

另一种选择是根本不使用脚本，而是使用图像替代跟踪您需要跟踪的所有事件。

https://developers.facebook.com/docs/facebook-pixel/advanced#installing-the-pixel-using-an-img-tag:

如果您需要使用轻量级实现来安装像素，可以使用<img> 标记进行安装。

“安装”在这里有点误导 - 这只会跟踪图像 URL 参数中指定的特定事件。另外，您必须自己进行所有跟踪，不再有自动化。您可以通过将图像直接嵌入到 HTML 代码中来跟踪简单的页面查看默认事件；如果您需要动态跟踪任何事件，那么您可以使用 JavaScript 创建一个新的Image 对象并分配适当的 URL，以便浏览器在后台获取它。

文档中提到了一些其他限制，如果您想尝试这条路线，请检查您是否可以接受这些限制。

如果您需要考虑其他因素，例如 GDPR 合规性 - 如果您使用图像进行跟踪，那么您也必须完全自行处理。（SDK 有基于同意 cookie 暂停跟踪的方法，https://developers.facebook.com/docs/facebook-pixel/implementation/gdpr）

第三种选择可能是尝试自己修改嵌入 SDK 的代码。

如果 fbq 函数不存在，代码 sn-ps 将创建它。对它的任何后续调用都会将要跟踪的事件放在“堆栈”上，然后在 SDK 文件加载后对其进行处理。所以理论上，这可以被重写，例如，它不会插入 script 节点来立即加载 SDK，而是使用超时来延迟加载。这应该仍然以相同的方式工作（理论上，我没有明确测试过） - 只要事件被推送到提到的堆栈上，SDK 何时或如何加载都无关紧要。（过大的超时可能会导致用户在任何跟踪发生之前就转到其他页面。）

最后但同样重要的是，我称之为“善业”选项 - 完全删除跟踪，以及随之而来的所有嗅探、分析和一般隐私侵犯 :-) 这可能不是每个人的选择，如果你在 Facebook 或类似网站上投放广告活动，它可能根本就不是一个。但如果这纯粹是为了“我想了解用户在我的网站上做什么”的目的，本地 Matomo 安装或类似的安装可能会同样好，甚至更好。

【讨论】：

谢谢！这是非常非常好的。我没想过尝试使用外部脚本并异步推迟它。当我进行速度测试时，我看到头部的速度更快。我似乎是因为脚本正在等待下载。在头部，它启动得更快。我试图对像素进行成像——我喜欢它。这很棒。但我注意到我的 facebook 对我的像素的分析停止了跟踪。我看到我的分析仪表板中出现了一个新的“应用程序”，但还没有数据。我的 facebook 像素分析同时停止收集数据。

【解决方案2】：

我发现使用 Google 跟踪代码管理器加载像素适用于我的 WordPress 网站。在 Pixel 之前，我的速度是 788 毫秒添加像素后是2.12s 然后，通过GTM添加它是970ms

【讨论】：

也许你能帮助我。看看这个：webmasters.stackexchange.com/questions/129573/…

【解决方案3】：

查看这篇文章-https://www.shaytoder.com/improving-page-speed-when-using-facebook-pixel/

我会将脚本放在页脚中，这样不会影响“首次绘制”，但更重要的是——我将添加黄色标记线来包裹像素代码的“脚本”部分，如下所示——

【讨论】：

Shay 的解决方案绝对有效。如果您还需要它与Content-Security-Policy 一起使用，您可以查看this article on how to implement Facebook Pixel securely。它利用 Shay 的解决方案和 CSP 的额外功能。
欢迎提供解决方案的链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最相关的内容您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.
我发现 web.dev 将其报告为未使用的 javascript，即使使用 setTimeout 包装器也是如此。我尝试了不同的搭配，但没有成功。我想知道 web.dev 在检测加载后的 javascript 方面是否更全面？

【解决方案4】：

我知道您可能认为它没有关系，但是您是否尝试过在您的网站上启用延迟加载？将其添加到页脚或使用 Facebook for WordPress 插件也有帮助。

【讨论】：

我建议不要在答案中使用修辞问题。他们冒着被误解为根本不是答案的风险。您正在尝试回答此页面顶部的问题，不是吗？否则请删除此帖。
请将其表述为有条件的解释性答案，以避免给人以澄清问题而不是回答的印象（应该使用评论而不是答案，比较meta.stackexchange.com/questions/214173/…）。例如像“如果你的问题是......那么解决方案是......因为......。”
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。