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

Question

我开始优化，但我遇到了 Facebook 跟踪像素杀死我的加载时间的问题： 瀑布报告

我的页面完成大约 1.1 秒，但像素直到几乎一整秒后才完成。

根据文档，我的像素脚本在头脑中。有没有办法加快这个速度？

Answer 1

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

问题是，实际上带来了多少改进 - 嵌入代码已经写好了，实际的 SDK 是异步加载的。

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

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

Answer 2

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

来源和更多详细信息：https://www.8webdesign.com.au/facebook-pixel-making-website-slower/