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

问题描述 投票:-1回答:1

我开始进行优化,Facebook跟踪像素导致我的加载时间缩短,因此出现了这个问题:Waterfall Report

我的页面完成了大约1.1秒,但直到差不多一秒钟后像素才完成。

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

javascript facebook frontend analytics
1个回答
0
投票
需要放在首位,即使Facebook建议将其作为默认设置。只要您在嵌入代码段之前的任何地方都没有显式调用fbq函数,它就可以正常工作。

问题是,实际上带来了多大的改进-嵌入式代码已经被编写出来了,实际的SDK是异步加载的。

嵌入SDK的<script>块可能是解析器块-但是您不能将asyncdefer放在内联脚本上,这无效。不过,将代码本身放入外部文件中,然后将其嵌入异步或延迟可能会对此有所帮助。

另一个选择是完全不使用脚本,而是使用图像替代来跟踪您需要跟踪的所有事件。


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

如果需要使用轻量级的实现来安装像素,则可以使用<img>标签进行安装。

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

文档中提到了一些其他限制,如果您想尝试这种方法,请检查是否可以忍受这些限制。

[如果您需要考虑GDPR合规性等其他因素,那么,如果您使用这些图像进行跟踪,则也必须完全自己解决。 (SDK具有基于同意Cookie https://developers.facebook.com/docs/facebook-pixel/implementation/gdpr暂停跟踪的方法)

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

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


最后但并非最不重要的一点,我将其称为“良好业力”选项-完全删除跟踪,以及随之而来的所有嗅探,配置文件和一般隐私侵害行为:-)并非所有人都可以选择,并且如果您正在Facebook或类似网站上投放广告系列,则可能根本就不是一个。但是,如果纯粹出于“我想了解用户在我的网站上正在做什么”的目的,则在本地安装Matomo或类似工具可能会效果更好,甚至更好。

© www.soinside.com 2019 - 2024. All rights reserved.