Menu
I'm starting to optimize and I have this problem with the Facebook tracking pixel killing my load times: Waterfall Report
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?
794
Facebook Pixel is an analytics tool that helps you: and remarket to people who have taken some kind of action on your website. It’s a great tool, but it’s a tool that might be slowing your website down, costing you leads and money. What’s the problem?
Unedited, Facebook’s little code snippet can add anywhere from 1.3–1.5 seconds to your page’s load time. To make matters worse, the script is loaded, four HTTP requests made and 170KB added to your page weight (or page size) all before your page’s First Paint—that’s before the first pixel is even visible on the screen.
While JavaScript is widely in use by many large platforms such as Google, Twitter, YouTube and the like, it’s often unstable and could become damaged or corrupted. This prevents your computer from processing the files to open the website. Third-party browser extensions could also cause Facebook to load slower.
If you’re following Facebook’s instructions on installing Facebook Pixel or getting some, umm… expert advice, you’ll most likely be advised to place the Facebook Pixel code in your site’s head element. Don’t do this! Unedited, Facebook’s little code snippet can add anywhere from 1.3–1.5 seconds to your page’s load time.
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.
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.
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://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.
“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.
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)
A third option might be to try and modify the code that embeds the SDK yourself.
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.)
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.
96
I've found that loading the pixel using Google Tag Manager works for my WordPress website. Before Pixel, my speed was 788ms After adding the pixel it was 2.12s Then, adding it through GTM it was 970ms
Source and more details: https://www.8webdesign.com.au/facebook-pixel-making-website-slower/
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
