July 8 2022

Delay JS to optimize Core Web Vitals and low performance of Facebook ADS campaigns.

How Core Web Vitals over-optimization and Javascript delay can kill your Facebook Advertising campaigns.

Print Friendly, PDF & Email

We said it and said it, the PageSpeed ​​score and the optimization of Core Web Vitals they are important, but a compromise must be found between a score that brings advantages and a score that brings only vanity.

We have reiterated and highlighted this in this article when we explained the dangers of using background-image rather than the html img tag to fool Google PageSpeed, you have to find a compromise and not be fooled by vanity metrics.

The problem is always that there is a lack of skills, honesty, or sometimes both.

Or, more simply, the client arrives who goes fromexpert Core Web Vitals And he says :

“Uèèèèèè Artist !!! But you know that Big Looca said that campaigns to perform require sites as fast as ground-to-air missiles and that my friend who does Affiliate Marketing with Fast Websites bought the new BMW M3 Sport and has a PageSpeed ​​score of 91 on Mobile? Come on, send me the site quickly and I'll pay you a thousand euros !!! "

And here is the web designer artist, web developer, or web performer as it is in fashion today, simply performs without batting an eye.

It is practice, mindset, to execute and implement what the client requires, avoiding giving advice and raising objections on the request and on the harmful implications that could ensue.

And if he then thinks about it and doesn't let me do the optimization anymore, or worse, he doesn't let me do it anymore but lets someone else do it for me?

Better to remain silent and here it comes back after a few days and brings you the site to stratospheric Mobile scores. Not only did it not help you, but on the contrary it created serious problems for you, which you will pay at your expense in the future, such as getting spending a lot of money on FB Advertising and campaigns that don't run as they should with a very high drop.

 

PageSpeed ​​Insights Asso360 Mobile

You have to take into account that Facebook is one of the best places to advertise any business. There are many ways to create the perfect ads for your needs, and you can budget within their ad module for each ad type uniquely. This means that you can drive traffic to your website with your Facebook ads, at a very low cost.

But what if your Facebook ads aren't generating the results they used to be? This could be due to the recent iOS14 updates. This is due to the tracking features that Apple has blocked. While this may have been very useful from a security point of view, it is a useless change related to advertising, which we will all pay the price for, when the product that previously cost 100 euros, today with the increased costs of advertising we will pay 120.

Returning to the discourse of the other drop of facebook campaigns instead, it could also be due to an over-optimization of the Core Web Vitals, going at all costs to look for an optimal score and therefore misusing the js delay function found in many performance optimization plugins.

What is meant by the Drop of a Facebook campaign?

By Drop of a Facebook campaign in technical jargon we mean that situation in which the campaign does not perform as it should, and in particular the phenomenon in which Facebook sends paid traffic from campaigns to your ecommerce site and your ecommerce site not records the visit by giving feedback to FB and sending events such as the visit itself.

Facebook thinks and reasons like this: I sent you 1000 potentially target visitors with your criteria that you entered, of these 1000 users that I Facebook sent you from FB (and that I know I sent you) 800 (or 80 %) they left immediately, so I Facebook think that:

  1. You have the site that is not working and is down.
  2. You have a slow site that doesn't load and users quit right away.
  3. You have a site that is not relevant or with scause and ugly creativity with bad usability.
  4. You have a site on which the pixel does not work and I cannot track events.

Regardless, Facebook has an exclusive interest in running campaigns that work and generate profits, all those that do not go simply do not run or run at a higher expense by failing to profile and track the people concerned.

In other words, this means very high expenditure and minimum yield, the nightmare of every entrepreneur, every advertiser and every Affiliate Marketer who because of this will not be able to live the dream life in a villa and pool in Dubai together with Big Looca.

What is the Facebook pixel?

Facebook Pixel is a code embedded in a website via Javascript code that tracks the actions of its visitors.

These data are used to:

  • measure the performance of Facebook ads;
  • define custom audiences for targeting and setting up dynamic ad campaigns;
  • analyze the effectiveness of your site's conversion funnels.

How does the Facebook Pixel work?

The functioning of the Facebook Pixel itself is pretty easy. We are not going to analyze it from the point of view of the Javascript code, it will be enough for us to roughly know how it works:

  1. A user visits your website by performing some actions like searching for products, adding them to the cart, completing the checkout, etc.
  2. The Facebook pixel tracks these events and synchronizes with Facebook cookies in the user's web browser.
  3. After the synchronization process, the user is marked as part of certain target groups.
  4. When the user opens Facebook, the platform already knows which ads to show.

 

We must keep in mind a very clear concept, the Facebook pixel is a Javascript Code. Remember, a code… Javascript.

Javascript delay and optimization Core Web Vitals.

To speak of the delay of Javascript as a technique, necessarily means at least for purely informative purposes to introduce Gijo Varghese, an Indian programmer who likes to define himself blogger (30%), developer (60%) and entrepreneur (10%). A WordPress speed enthusiast.

This young programmer focused on website and performance optimization, at one point thought in order to improve the PageSpeed ​​score (at the time the concept of the Core Web Vitals) to load Javascript files with a delay, a delay in fact.

This technique he called it Flyng Script (probably in honor of customers who want sites that fly).

The motivation of the Delay Javascript is pretty easy to understand, one of the worst factors in terms of PageSpeed ​​score and loading speed are the Javascript files.

The causes are mainly the following:

  1. There are usually a lot of them especially on WordPress sites and the numerous plugins.
  2. They have a weight at the level of kilobytes that is not indifferent.
  3. They are not markup languages ​​like HTML or styles like CSS, but programming languages ​​that are processed on the client side and therefore impact both hardware resources and responsiveness on not very fast devices.

Anyone who has tried to do a PageSpeed ​​Insight test with Javascript loaded normally and Javascript loaded with a delay will have noticed how evident a site loaded with this technique is in terms of weight and speed (as well as Pagespeed score).

It is therefore peaceful at least in the early days to try to delay everything that is delayable by trying to find this green light that satisfies both our ego and that of the customer, however, as they teach in the art of war, we must be afraid of what is not you know and that's where problems begin.

Moreover, a developer is one who makes or knows how to make Facebook Advetising campaigns? Is he a technical figure able to understand how this mechanism should work? No, as is normal, it has no faults as it should be directed by the one who instead does advertising who in turn is a figure who has no programming skills and therefore watertight compartments that do not communicate and here the disaster is served.

Let's be honest, deeply honest. We didn't even know about the implication of this issue with Facebook Advertiging, because we did not know how Facebook Advertising and the Facebook Pixel work, we are systems engineers, a bit developers but not advertisers.

We had to invest time and resources with our professional Affiliate Marketer clients to understand where the catch was and understand without regret that we needed to step back and value business goals rather than a mere Google Pagespeed score.

Other reasons to delay the execution of Javascript scripts

Data downloaded from third party servers such as Facebook Page Widget, Facebook Messenger, Facebook Comments, iframe or live chat services such as Tawk.to is data that you cannot control. You can't compress, merge, or cache them, simply because they're not on your host. This data is often very heavy and can cause serious problems related to the loading speed of the website. To see it clearly, you can use Google PageSpeed Insights , GTmetrix or any other speed test tool to check.

E since it is not possible to optimize them, the only solution to integrate the above services into the website without affecting page speed is to delay the execution of their scripts. By doing this, you will reduce the rendering time of your page and improve the speed ratings on the page speed test tools such as Time to Interactive, First CPU Idle, Max Potential Input Delay, etc. This will also reduce the initial payload on the browser by reducing the number of requests.

How to delay the execution of Javascript?

From a purely technical point of view, delaying Javascript simply means adding a Javascript script to delay the execution of other Javascript scripts.

For example, all WordPress plugins that implement this feature to date are based on the code of Flying scripts written by Gijo Varghese. This applies to plugins such as Flying Scripts, WP Meteor, FlyngPress (a commercial evolution of Flyng Script which is free) or even the better known Wp Rocket.

It must be said that while the first 3 listed above allow you to set a timeout after which the Javascript files are loaded, Wp Rocket (which is the best known and most commercial) although it has many more functions, it is the only one among many that does not have and does not allow you to set a timeout. It will simply start loading the other Javascript when an interaction such as a touch of the device or a scroll occurs.

This creates many problems, for example for sites that have plugins with sliders in Javascript that remain empty and waiting until the user interacts with the site by activating the event that will lead to the loading of the site.

In some cases it is really annoying because the phenomenon is created in which the user waits for something to load, and the script waits for the user to interact, but the user is still waiting for the slider to load. A situation as clumsy as it is unpleasant.

How does the Javascript delay or the JS delay impact Facebook ADS campaigns?

If you have followed well and carefully so far you should have already gotten there. Let's go back to the diagram below to retrace the various steps and understand the problem of Delay JS and the drop of Facebook campaigns.

We said that that the user from Facebook is sent to my site which contains the Facebook pixel, the browser loads the site which however has the JS delay active, the user opens the page, looks at the image, reads the text and it comes out after two or three seconds and the Facebook pixel has not yet been loaded, the event has not triggered and has not communicated anything to Facebook.

For Facebook it therefore appears that the visitor has clicked on the Facebook advertising, has been sent to your site, that did not open.

It is irrelevant if in fact the visitor saw the images, the logo, the text and the description and only the Facebook pixel was not loaded, because the Facebook Pixel is "the litmus test" that the site has loaded and has precisely the event.

Should or shouldn't he use the Delay JS technique?

This technique should be used for scripts related to user interaction or live chat such as Facebook Customer Chat, Facebook Widget, Facebook Comment, iframe (Youtube, Google Maps), Tawk.to, ...

Otherwise, it is not recommended for scripts such as user data tracking or analysis such as Google Analytics, Facebook Pixel, Google Tag Manager, Crazy Egg, Google Remarketing Tag, because applying this technique can cause failure recording of data or make it incomplete or inaccurate.

The right compromise if you use the plugins mentioned above, is to use the Delay of the JS but at the same time exclude from the options the plugins that are involved in loading the Facebook Pixel such as we can do on Wp Rocket (which I personally don't like due to the lack of timout).

 

It is always better to have a site with a lower PageSpeed ​​score that tracks all events and allows you to have high-performance campaigns and a rewarding return on profit., than having a website with a score of 100 and having Facebook that makes you spend huge sums without selling anything.

 

Do you have doubts? Not sure where to start? Contact us


We have all the answers to your questions to help you make the right choice.

Chat with us

Chat directly with our presales support.

0256569681

Contact us by phone during office hours 9:30 - 19:30

Contact us online

Open a request directly in the contact area.

PRACTICAL

ManagedServer.it is the leading Italian provider of high performance hosting solutions. Our subscription model is affordable and predictable, so customers can access our reliable hosting technologies, dedicated servers and the cloud. ManagedServer.it also offers excellent support and consulting services on Hosting of the main Open Source CMS such as WordPress, WooCommerce, Drupal, Prestashop, Magento.

JUST A MOMENT !

Would you like to see how your WooCommerce runs on our systems without having to migrate anything? 

Enter the address of your WooCommerce site and you will get a navigable demonstration, without having to do absolutely anything and completely free.

No thanks, my customers prefer the slow site.
Back to top