Table of contents of the article:
We've said it many times: PageSpeed scores and Core Web Vitals optimization are important, but you have to find a compromise between a score that brings benefits and one that only brings vanity.
We reiterated and highlighted this in this article when we explained the dangers of using background-image rather than the HTML img tag to cheat Google PageSpeed. You need 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 and goes to the Core Web Vitals expert and says:
“Hey Artist!!! Did you know that Big Looca said that to perform well, campaigns require sites as fast as surface-to-air missiles, and that my friend who does Affiliate Marketing with Fast Websites bought himself a 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 stay silent, and then it comes back a few days later, bringing your site to sky-high mobile scores. Not only did it not help you, it actually created serious problems for you, which you'll pay for in the future, such as wasting a lot of money on Facebook Advertising and campaigns that don't perform as they should, resulting in significant drops.
You should keep in mind 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 quote uniquely for each ad type within their advertising module. This means 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 once did? This could be due to the recent iOS 14 updates. This is due to the tracking features that Apple has blocked. While this may have been very useful from a security perspective, it's an unnecessary change in advertising, one that we'll all pay the price for when a product that used to cost €100 now costs €120, with increased advertising costs.
Returning to the discussion of the other drop in Facebook campaigns, it could also be due to an over-optimization of the Core Web Vitals , going at all costs to seek an optimal score and therefore using the delay js function present in many performance optimization plugins incorrectly.
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 short, this means very high costs and minimal returns, 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 swimming pool in Dubai 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 one thing very clear in mind: the Facebook pixel is a JavaScript code. Remember, a JavaScript code.
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 impact Google Core Web Vitals , a set of metrics used by Google to evaluate the quality of user experience on websites. Among these, First Contentful Paint (FCP), which measures the time between the actual page load and the first visible element being displayed, can be affected by JavaScript delay, as excessive JavaScript execution time can cause a delay in the actual rendering of the page.
Discussing JavaScript delays as a technique necessarily means introducing, at least for informational purposes, Gijo Varghese , an Indian programmer who likes to describe himself as a blogger (30%), developer (60%), and entrepreneur (10%). He's a WordPress speed enthusiast.
This young programmer focused on website optimization and performance, at a certain point thought of loading Javascript files with a delay, a delay precisely, in order to improve the PageSpeed score (at the time the concept of Core Web Vitals did not yet exist ).
This technique he called it Flyng Script (probably in honor of customers who want sites that fly).
The reason for the Javascript Delay is quite easy to understand, one of the most detrimental factors in terms of PageSpeed score and loading speed are precisely 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 runs or knows how to run Facebook Advertising campaigns? Is he a technical figure capable of understanding how this mechanism should work? No, as is normal, he's not to blame since he should be directed by the person who runs advertising, who in turn lacks programming skills and thus creates watertight compartments that don't communicate, and thus disaster is served.
Let's be honest, deeply honest. We didn't even know about the implications of this issue with Facebook Advertising , because we didn't know how Facebook Advertising and the Facebook Pixel work. We're system administrators, a bit of 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
And since they can't be optimized, the only way to integrate the above services into your website without impacting page speed is to delay the execution of their scripts. This will reduce your page's rendering time and improve speed scores on page speed testing tools like Time to Interactive, First CPU Idle, Max Potential Input Delay, etc. This will also reduce the initial browser load 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 currently implement this feature are based on the Flying Scripts code written by Gijo Varghese. This applies to plugins like Flying Scripts, WP Meteor, FlyingPress (a free commercial version of Flying Script), and even the more popular WP Rocket.
It's worth noting that while the first three listed above allow you to set a timeout after which the JavaScript files are loaded, WP Rocket (the most popular and commercial), despite having many more features, is the only one among many that doesn't have or allow you to set a timeout. It will simply begin loading the other JavaScripts upon an interaction, such as a touch or 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 appears that the visitor clicked on the Facebook ad, was sent to your site, which 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 user interaction scripts or live chats such as Facebook Customer Chat, Facebook Widget, Facebook Comment, iframes (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 when using the plugins mentioned above is to use the JS Delay but at the same time exclude from the options the plugins that are involved in loading the Facebook Pixel as we can do for example on Wp Rocket (which I personally don't like due to the lack of a timing out).
It's always better to have a site with a lower PageSpeed score that tracks all the events and allows you to have high-performing campaigns and a rewarding ROI , than to have a website with a score of 100 and have Facebook make you spend stratospheric amounts without selling anything.
