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

Facebook Pixel slows down page load time by almost a full second(Facebook Pixel 将页面加载时间减慢了近一秒)

问题描述

我正在开始优化，但我遇到了 Facebook 跟踪像素会导致加载时间缩短的问题:瀑布报告

I'm starting to optimize and I have this problem with the Facebook tracking pixel killing my load times: Waterfall Report

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

My page finishes around 1.1 seconds but the pixel doesn't finish until almost a full second later.

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

My pixel script is in the head, per the docs. Is there any way of speeding this up?

推荐答案

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

The script probably doesn’t necessarily need to be in the head, even if Facebook recommends that as the default. As long as you don’t explicitly call the fbq function anywhere before the code snippet was embedded, it should work fine.

问题是，实际带来了多少改进 - 嵌入代码已经写在了一个地方，实际的 SDK 是异步加载的.

Question would be though, how much of an improvement that actually brings - the embed code is already written in a away, that the actual SDK gets loaded asynchronously.

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

The <script> block that embeds the SDK might be parser-blocking - but you can’t put async or defer on inline scripts, that would have no effect. Putting that code itself into an external file, and then embedding that with async or defer might help in that regard though.

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

Another option would be to not use the script at all, but track all events you need to track using the image alternative.

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

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

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

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

"Install" is a bit misleading here though - this will only track the specific event that is specified in the image URL parameters. Plus, you’d have to do all your tracking yourself, there will be no automatism any more. The simple page view default event you could track by embedding an image directly into your HTML code; if you need to track any events dynamically, then you can use JavaScript to create a new Image object and assign the appropriate URL, so that the browser will fetch it in the background.

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

There are a few additional limitations mentioned there in the docs, check if you can live with those, if you want to try this route.

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

If you needed to take into account additional factors like GDPR compliance - then you would have to handle that completely yourself as well, if you use the images for tracking. (The SDK has methods to suspend tracking based on a consent cookie, https://developers.facebook.com/docs/facebook-pixel/implementation/gdpr)

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

A third option might be to try and modify the code that embeds the SDK yourself.

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

The code snippets creates the fbq function, if it does not already exist. Any subsequent calls to it will put the event to track on a "stack", that will then get processed once the SDK file has loaded. So in theory, this could be rewritten for example in such a way, that it doesn’t insert the script node to load the SDK immediately, but delays that using a timeout. That should still work the same way (in theory, I have not explicitly tested it) - as long as the events got pushed onto the mentioned stack, it should not matter when or how the SDK loads. (Too big of a timeout could lead to users moving on to other pages before any tracking happens though.)

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

Last but not least, what I would call the "good karma" option - removing the tracking altogether, and all the sniffing, profiling and general privacy violation that comes with it :-) That is likely not an option for everyone, and if you are running ad campaigns on Facebook or similar, it might not be one at all. But in cases where this is for pure "I want to get an idea what users are doing on my site" purposes, a local Matomo installation or similar might serve that just as fine, if not even better.

这篇关于Facebook Pixel 将页面加载时间减慢了近一秒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！