Improving page speed when using Facebook pixel
Let me share with you my step-by-step process that will show you exactly how you can improve page speed and even save money by using Facebook pixel in a way nobody else is saying.
Facebook pixel allows you to measure, optimize, and build audiences for your advertising campaigns.
However, the way many “experts” say to install it can REALLY be costing you (leads, money! and especially speed).
If you installed Facebook pixel in the header of your site… think again!
Here are the two biggest reasons why installing Facebook pixel in your header is the wrong way to go:
- It MAJORLY slows down your site! And load speed is EVERYTHING in today’s fast-paced world.
- It loads before ANYTHING ELSE and captures EVERY lead that lands there (you might be thinking, “yes, that’s what I want!” but trust me… you don’t).
In this article, I will explain how you can improve the performance of your webpage and simultaneously improve the quality of your marketing and even save money, all of that while still using Facebook pixel!
First, let’s talk about why capturing EVERY lead is bad (because you still probably disagree with me on this point).
Here is the scenario: you run a Facebook ad, and a user clicks on your ad by accident, he quickly realizes his mistake and bounces back after a split second.
Do you REALLY want this user to be in your remarketing audience? Is it worth sending them yet another (retargeting) ad?
Tracking these quick bounce user results is you throwing away your money.
The other reason installing the Facebook pixel in the header is bad, is that it also hurting your page speed.
The cost of loading a Facebook pixel:
We can see four requests, from two external domains, and 142KB added to page size.
The first request is even before the “First Paint” line—the green line, meaning that the user still sees a white page during this time, proof that this pixel in the header hurts an important part of the page speed.
Our goal when improving page speed is to decrease the numbers of requests, minimize page size, and eliminate calling external domains as much as possible. This allows the most important aspects of the page to load first!
The solution? Delay Facebook pixel!
I will put the script in the footer, so it will not affect the “First Paint”, but more important – I will add the yellow marked lines to wrap the “script” part of the pixel code like shown here–
Here are the two lines for easier copy & paste:
NO Facebook requests. We saved 4 requests from two external domains and 142KB, and the score will also be better, as we will not have “Leverage browser caching”, “Specify a cache validator”, or “Add Expires headers” that we can see in GTmetrix tests.
BUT HOW DO YOU KNOW IF THE PIXEL IS WORKING??
You will open the page in Chrome, open “Developers Tools” by pressing F12, filter “Facebook”, and hit refresh. Wait 3 seconds, and then you will see these 4 requests, as the pixel was delayed.
Update- Codeless solution:
Recently, I contacted a WordPress developer with this concept, the results – a new WordPress plugin that does the exact same thing as I am showing above without touching the code! Could it get any easier?
Another advantage of using this new plugin is that the pixel is firing when there is a user interaction with the page (mouse move, scrolling…) as well as a fixed duration like I showed above. This will ensure even more that the data your pixel collects is ONLY on those people really interested in your site and what is on it.
Check out Flying Scripts plugin.