Page speed is one of the most important aspects of any website. Users have become more accustomed to faster websites and applications, which is why Google uses page speeds for everything from your pages rankings within search engines to the quality score of your ads in Google Ads. Needless to say page speed matters for humans and search engines, therefore it matters to you!

But how to increase page speed?

One simple way to increase page load speeds is to defer certain elements and scripts until after the page loads. Afterall, users simply want the page to load, and what they don’t know won’t hurt. Lazy loading images is the most common and well-known version of this strategy. However, you can effectively “lazy load” any aspect of a page.

Defer the Facebook Pixel

We are going to defer the loading of the Facebook pixel, which is typically one of the most intensive objects to load. Open an incognito window of your site, and go to the page you wish to test. Right-click, and select “Inspect” or “ctrl + shift + I” to open Google DevTools. Click “Lighthouse” at the top and generate a report (make sure all categories are checked) to get your page’s load speed, amongst other statistics.

Google Web Developers: Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools >

WordPress Plugin: Insert Headers and Footers >

Next select “Coverage” at the bottom of the DevTools (you may have to adjust the window). Below you can see the Facebook pixel (highlighted in gray) we have installed has the second most Unused Bytes and third-most in Total Bytes. On a side-note you can also inspect the code for any given asset, below you can see the code for the Facebook pixel in green.

However, we can defer this from loading 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 the <head> and </head> tags in html). Using the WordPress plugin Insert Headers and Footers, makes inserting and finding code in your header and footer very easy. You will need to add the code on line 3 and line 14 and put your 15 number id where I have block out my own.

An example of the code can be found below:

<!-- Facebook Pixel Code -->
<script>
setTimeout(function(){ 
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._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" style="display:none"
  src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxx&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Cut your Facebook pixel from your header and place it in your footer and make the changes highlighted below to delay implementation.

You are done, that should give your pages a slight easy boost in page load speed, while really not hampering the collection of information on your pixel, after all, do you really care whether someone only stayed on your page for less than three seconds? This simple concept can also be applied to other pieces of code, js, CSS, et cetera, however, be careful when moving or deferring code as you can easily break your site!

Leave a Comment

Recent Posts

Copyright © 2020

Coral Digital, LLC

Boca Raton, Florida

Site built by Coral Digital

Privacy PolicyTerms of Use

When you buy through links on our site, we may earn an affiliate commission.