Table of contents of the article:
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 that are as fast as surface 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.
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 have sent you 1000 potentially target visitors with the criteria you entered, of these 1000 users that I Facebook have sent you from FB (and which I know I have sent you) no less than 800 (i.e. 80 %) left right away, so I Facebook think that:
- You have the site that is not working and is down.
- You have a slow site that doesn't load and users quit right away.
- You have a site that is irrelevant or with scrause and ugly creativity with bad usability.
- 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?
The Facebook Pixel is a code that can be inserted into a website to track users who visit the site and use this information to create targeted advertisements on Facebook. This code allows us to track users' actions on the site, such as pages visited and products purchased, and use this information to create personalized advertisements on Facebook.
The Facebook Pixel allows you to:
- Create targeted advertisements based on user actions on the site, such as pages visited and products purchased.
- Create personalized advertisements for users who have previously visited the site.
- Create targeted advertisements based on your audience.
- Track conversions, i.e. actions taken by the user, such as a purchase.
How does 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:
- A user visits your website by performing some actions like searching for products, adding them to the cart, completing the checkout, etc.
- The Facebook pixel tracks these events and synchronizes with Facebook cookies in the user's web browser.
- After the synchronization process, the user is marked as part of certain target groups.
- 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.
JavaScript delay is a term used to describe the time between the actual loading of a web page and the moment in which the JavaScript scripts contained in it are executed.
The main reason JavaScript delay can affect website performance is that JavaScript scripts can slow down page loading. If a JavaScript script must be executed before the page is fully loaded, this can cause a delay in displaying the page for users.
JavaScript delay can also affect Google values Core Web Vitals, which is a series of metrics used by Google to evaluate the quality of the user experience on websites. Among these, the loading time of the first response (First Contentful Paint – FCP), which measures the time between the actual loading of the page and the moment in which the first visible element is displayed, can be affected by the javascript delay, as excessive execution time of javascript scripts can cause a delay in the effective rendering of the page.
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:
- There are usually many especially on WordPress sites and numerous plugins.
- They have a weight at the level of kilobytes that is not indifferent.
- 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 can be delayed 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, one must be afraid of what you don't know and that's where problems start.
Furthermore, is a developer someone who does or knows how to do Facebook Advertising campaigns? Is he a technical figure capable of understanding how this mechanism should work? No, as is normal, he is not to blame as he should be directed by the person who does advertising who in turn is a figure who has no programming skills and therefore watertight compartments that do not communicate and here is the disaster.
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
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 Javascripts when an interaction occurs such as, for example, a touch of the device or a scroll.
This creates quite a few problems, for example, for sites that have plugins with Javascript sliders that remain out and waiting until the user interacts with the site by activating the event that will lead to the site loading.
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 performing campaigns and a gratifying return on profit, than having a website with a score of 100 and having Facebook that makes you spend huge sums without selling anything.
