.svg)
How to do this Growth Hack and what can it do for you?
Adding the Facebook Pixel to your website is good for better targeting your audience, but if you use it as it is, the performance of your site will suffer.
Following the analysis of my Google Search Console, I received an alert telling me that several URLs on this website needed to be improved because they had performances to be revised.
If Google Search Console shows you areas for improvement to implement, you MUST implement them.
In my case, as for many I think, this problem was due to the Facebook pixel particularly greedy when loading the website.
Through this hack, you will see how to avoid this problem to optimize your performance and your overall SEO score.
Expected results of this Growth Hack
- Type of marketing tactic: Optimizing the speed of your website
- Expected result: Lower the bounce rate on your website on Desktop and Mobile, increase in your SEO metrics
Why do this Growth Hack?
A higher SEO score
Page speed is one of the most important aspects of any website.
Users have gotten used to faster sites and apps, which is why Google uses page speed for everything:
- the ranking of your pages in search engines
- to the quality score of your ads in Google Ads.
Needless to say, page speed is important for humans and search engines, so it's important for you!
After solving this Growth Hack, you will be able to benefit from better performance simply by adding a few lines of code to the Pixel provided by Facebook.
Before 🚙
After 🛫
But how do you increase page speed?
A simple way to increase page load speed is to delay certain elements and scripts after the page loads.
Lazy loading of images is the most common and well-known version of this strategy.
However, you can effectively “lazily load” any element on a page.
A Facebook pixel that is more accurate on those who are really interested in what you do
An advantage that is also not insignificant is the following:
You don't want your Facebook audience to be fed by an audience that's not interested in what you're doing.
The advantage of this Growth Hack is successfully defining a Persona marketing even finer thanks to a Facebook Pixel that will only collect data from Internet users interested in what you do.
How do you do this Growth Hack?
We are going to postpone loading the Facebook pixel, which is typically one of the heaviest elements to load on a website.
Go to GT Metrix and start an analysis of your website to take a closer look at the elements that consume the most resources when loading your website.
Once launched, usually the 2 biggest elements (except if you have photos or videos that you should optimize or delay) Are the Facebook scripts associated with installing the Pixel that allows you to track the audience of your website.
As you can see in the GT Metrix Analysis above, Facebook scripts represent a large portion of the resources consumed when loading the website.
However, we may delay loading it first and leave it until the other parts and assets of the page have loaded.
Your Facebook pixel code is usually installed in your header (between tags <head>and</head> html).
The use of the WordPress plugin Insert Headers and Footers, makes it very easy to insert and find the code in your header and footer.
If you are not a Wordpress user like me, you generally install the Facebook code in 2 ways:
- Using Google Tag Manager
- In the header of the page
It is a mistake, and here's how to do it.
Install the Pixel in the Footer
Remove the Facebook pixel from your header and place it in your footer.
- The header code is surrounded by 2 tags:<head></head>
- The footer code is surrounded by 2 tags:<footer></footer>
Changing the location of your pixel is not everything, one of the most important things will be to delay the loading of the scripts to let your page be displayed quietly without being blocked by these same scripts.
Change the Facebook Pixel code
Below is an example of this code.
Add the 2 bold lines in the Facebook Pixel sample code to yours to delay it (+ the Alt tag for the Pixel image which will remove many SEO warnings)
Here, I chose a load lag of 3.5 seconds (3500 milliseconds).
Facebook pixel code -->
<script>
setTimeout (function () {
! function (f, b, e, v, v, n, t, s)
{if (f.fbq) return; n=f.faq=function () {n.callMethod?
n.callmethod.apply (n, arguments) :n.queue.push (arguments)};
If (! f. _fbq). _fbq=n; n.push=n; n.loaded=! 0; n.version='2.0';
n.queue= []; t=b.createElement (e); t.async=! 0;
t.src=v; s=b.getElementsByTagName (e) [0];
s.parentnode.insertBefore (t, s)} (window, document, 'script',
https://connect.facebook.net/en_US/fbevents.js');
fbq ('init', 'xxxxxxxxxxxxxxx');
fbq ('track', 'pageView');
}, 3500);
</script>
<noscript>
<img height="1" width="1" alt="Facebook pixel” style="display:none” src=” https://www.facebook.com/tr?id=xxxxxxxxxxxxxxx&ev=PageView&noscript=1"/ >
</noscript>
There you go! It was not very difficult and not very long but your website and your users will thank you for it!
Conclusion on this Growth Hack
You're done, it should give your pages a slight boost in terms of loading speed.
This method doesn't hinder the collection of information about your pixel, after all, do you really care if someone only stayed on your page for less than three seconds?
This simple concept can also be applied to other pieces of code, Javascript, CSS, etc...
However, be careful when moving or deporting code as you can easily break your site if you are not careful.
