Facebook Pixel Significantly Slowing Site Speed

Facebook Pixel Significantly Slowing Site Speed

Ploutone
Shopify Partner
13 0 4

Hi all. PageSpeed Insights is showing that the Facebook pixel is significantly slowing down my site by about .5 seconds. I found a suggested solution here suggesting that the pixel be placed in the footer and delayed by 3 seconds. My issue is that I am not able to find my FB pixel in theme.liquid. Any help is greatly appreciated.

 

Website is www.ploutone.com. Theme is Blackery

 

Ploutone_0-1675968222627.png

 

Replies 7 (7)

flareAI
Shopify Partner
2405 224 549

Hello @Ploutone,


I am Gina from flareAI app, and I am here to provide assistance.


It's possible that the Facebook pixel code is not located in the theme.liquid file, as it could have been added to the website in a different way. Here are a few steps you can follow to locate the Facebook pixel code in your Shopify store:


1. Check the theme.liquid file: Start by searching for "fbq" (the shorthand for the Facebook pixel) in the theme.liquid file. If it's not there, search for the entire pixel code, which starts with "!function(f,b,e,v,n,t,s)".

2. Check the checkout.liquid file: If the pixel code is not in the theme.liquid file, check the checkout.liquid file. Some Shopify stores add the pixel code to the checkout.liquid file instead of the theme.liquid file.

3. Check the theme's custom HTML section: If you still can't find the pixel code in the theme.liquid or checkout.liquid files, check the theme's custom HTML section. Some stores add the pixel code to this section in the theme editor.

4. Check the theme settings: Finally, check the theme settings for a "Facebook Pixel" section, which may contain the code.


Once you've located the pixel code, you can follow the suggestion you found and place it in the footer and delay it by 3 seconds. To do this, wrap the pixel code in a JavaScript function and use the "setTimeout" function to delay the execution of the function by 3 seconds:

<script>
setTimeout(function() {
<!-- Facebook Pixel Code -->
}, 3000);
</script>


Place this code in the footer of your theme, either in the theme.liquid file or in the theme's custom HTML section.

 

Hope this helps


Gina

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing
Ploutone
Shopify Partner
13 0 4

Hi Gina. I appreciate your assistance. Unfortunately, I was unable to find any of those codes in my theme files.

Cedcommerce
Shopify Partner
718 77 116

Hi @Ploutone,

 

We have gone through the reference document that you have shared regarding how you can lazyload the Facebook pixel script, but the solution mentioned in the reference document would only work when you are adding the pixel code manually. This solution won't work when the Facebook pixel code is injected directly from the {{ content_for_header }} as in the case of your store.

In order to fix this in this scenario, you need to hire a developer who can lazyload the scripts coming directly from the {{ content_for_header }}.

 

Also, as I have checked your website, it contains some other very major speed issues such as CLS that can be worked on, and once this is fixed, it will give a significant boost to your website speed.

 

  • Eliminate render-blocking resources coming from the CSS files can be eliminated by preloading those files.
  • Additionally, you need to add optimized images to your website.
  • And all other scripts coming from other apps, such as judgme, lucky Orange, and google tag manager also needs to be fixed.

 

All the best,

CedCommerce

 

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
Ploutone
Shopify Partner
13 0 4

Hi CedCommerce. Thanks so much for sharing that advice. 

cristian_dev
Shopify Partner
14 2 2

Hi @Ploutone

 

Following Shopify's official Facebook pixel advice is the correct way to implement the fb pixel.

 

Putting the facebook pixel inside a timeout could make the pixel code malfunction (not tracking some behaviour / tracking it wrongly).

 

There are other unseen parts to the Fb Pixel (like conversions API tracking on the server side which shopify implements) that could be affected by non-standard implementations.

 

I would suggest sticking to the official way of implementing tracking codes like Google Analytics and Facebook Pixel and not changing too much the way they are implemented in Shopify.

 

 

 

If you have any questions you can drop me a message.

 

Regards,

Cristian

 

 

Cristian B.
Ploutone
Shopify Partner
13 0 4

Thank you for your help!

SustainableWtr
Shopify Partner
1 0 0

Your site seems pretty quick... especially compared to mine (phoxwater.com) any tips?