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

Question

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

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

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

Answer 1

该脚本可能不一定需要位于头部，即使 Facebook 建议将其作为默认值。只要你不显式调用fbq在嵌入代码片段之前的任何地方都可以运行，它应该可以正常工作。

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

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

<小时/>

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

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

If you need to install the pixel using a lightweight implementation, you can install it with an <img> tag.

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

文档中提到了一些额外的限制，如果您想尝试此路线，请检查您是否可以忍受这些限制。

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

<小时/>

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

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

<小时/>

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