8 juillet 2022

Retardez JS pour optimiser les Core Web Vitals et les faibles performances des campagnes Facebook ADS.

Comment la sur-optimisation de Core Web Vitals et le retard de Javascript peuvent tuer vos campagnes publicitaires sur Facebook.

Nous l'avons dit à maintes reprises : les scores PageSpeed ​​et l'optimisation des Core Web Vitals sont importants, mais il faut trouver un compromis entre un score qui apporte des bénéfices et un autre qui n'apporte que de la vanité.

Nous l'avons réaffirmé dans cet article en expliquant les dangers liés à l'utilisation de l'attribut background-image au lieu de la balise HTML img pour tromper Google PageSpeed. Il est essentiel de trouver un compromis et de ne pas se laisser berner par des indicateurs superficiels.

Le problème est toujours qu'il y a un manque de compétences, d'honnêteté, ou parfois les deux.

Ou plus simplement, le client arrive, s'adresse à l' expert en Core Web Vitals et lui dit :

« Hé, l'artiste !!! Savais-tu que Big Looca a dit que pour être performantes, les campagnes nécessitent des sites aussi rapides que des missiles sol-air, et que mon ami, qui fait du marketing d'affiliation avec Fast Websites, s'est offert une BMW M3 Sport neuve et a un score PageSpeed ​​de 91 sur mobile ? Allez, envoie-moi vite le site et je te paie mille euros !!! »

Et voici l'artiste web designer, le développeur web ou le web performer tel qu'il est à la mode aujourd'hui, tout simplement performe sans sourciller.

C'est une pratique, un état d'esprit, d'exécuter et de mettre en œuvre ce que le client demande, en évitant de donner des conseils et de soulever des objections sur la demande et sur les implications néfastes qui pourraient en découler.

Et s'il y réfléchit et ne me laisse plus faire l'optimisation, ou pire, il ne me laisse plus le faire mais laisse quelqu'un d'autre le faire à ma place ?

Mieux vaut garder le silence, et puis quelques jours plus tard, le phénomène revient en force, propulsant votre site au sommet des classements mobiles. Non seulement cela ne vous a pas été utile, mais cela vous a même causé de sérieux problèmes, dont vous paierez le prix fort plus tard, comme un gaspillage d'argent considérable en publicités Facebook et en campagnes peu performantes, entraînant des baisses de trafic importantes.

 

PageSpeed ​​​​Insights Asso360 Mobile

N'oubliez pas que Facebook est l'une des meilleures plateformes publicitaires pour toute entreprise. De nombreuses options permettent de créer des publicités parfaitement adaptées à vos besoins, et vous pouvez obtenir un devis personnalisé pour chaque type de publicité grâce à leur module dédié. Ainsi, vous pouvez générer du trafic vers votre site web à moindre coût grâce à vos publicités Facebook.

Que faire si vos publicités Facebook ne sont plus aussi performantes qu'avant ? Cela pourrait être dû à la récente mise à jour iOS 14. En effet, Apple a bloqué certaines fonctionnalités de suivi. Bien que cela ait pu s'avérer très utile du point de vue de la sécurité, il s'agit d'un changement inutile pour la publicité, dont nous subirons tous les conséquences : un produit qui coûtait 100 € coûte désormais 120 €, et les coûts publicitaires augmentent.

Pour revenir à la discussion sur l'autre baisse des campagnes Facebook, cela pourrait également être dû à une sur-optimisation des Core Web Vitals , cherchant à tout prix à obtenir un score optimal et utilisant donc incorrectement la fonction delay js présente dans de nombreux plugins d'optimisation des performances.

Que signifie le Drop d'une campagne Facebook ?

Par Drop d'une campagne Facebook dans le jargon technique, nous entendons cette situation dans laquelle la campagne ne fonctionne pas comme elle le devrait, et en particulier le phénomène dans lequel Facebook envoie du trafic payant des campagnes vers votre site de commerce électronique et votre site de commerce électronique n'enregistre pas la visite par donner des commentaires à FB et envoyer des événements tels que la visite elle-même.

Facebook pense et raisonne ainsi : je vous ai envoyé 1000 visiteurs potentiellement ciblés avec les critères que vous avez saisis, sur ces 1000 utilisateurs que je vous ai envoyés sur Facebook (et dont je sais que je vous ai envoyé) pas moins de 800 (soit 80 %) à gauche tout de suite, donc je Facebook pense que :

  1. Vous avez le site qui ne fonctionne pas et est en panne.
  2. Vous avez un site lent qui ne se charge pas et les utilisateurs quittent immédiatement.
  3. Vous avez un site qui n'est pas pertinent ou avec une créativité crasseuse et laide avec une mauvaise convivialité.
  4. Vous avez un site sur lequel le pixel ne fonctionne pas et je ne peux pas suivre les événements.

Quoi qu'il en soit, Facebook a un intérêt exclusif à mener des campagnes qui fonctionnent et génèrent des profits, toutes celles qui ne marchent pas ne courent tout simplement pas ou courent à un coût plus élevé en omettant de profiler et de suivre les personnes concernées.

En résumé, cela signifie des coûts très élevés et des rendements minimes, le cauchemar de tout entrepreneur, de tout annonceur et de tout spécialiste du marketing d'affiliation qui, à cause de cela, ne pourra pas vivre la vie de rêve dans une villa avec piscine à Dubaï grâce à Big Looca.

Qu'est-ce que le pixel Facebook ?

Le pixel Facebook est un code qui peut être inséré dans un site Web pour suivre les utilisateurs qui visitent le site et utiliser ces informations pour créer des publicités ciblées sur Facebook. Ce code nous permet de suivre les actions des utilisateurs sur le site, telles que les pages visitées et les produits achetés, et d'utiliser ces informations pour créer des publicités personnalisées sur Facebook.

Le Pixel Facebook vous permet de :

  • Créez des publicités ciblées en fonction des actions des utilisateurs sur le site, telles que les pages visitées et les produits achetés.
  • Créer des publicités personnalisées pour les utilisateurs qui ont déjà visité le site.
  • Créez des publicités ciblées en fonction de votre audience.
  • Suivre les conversions, c'est-à-dire les actions entreprises par l'utilisateur, comme un achat.

Comment fonctionne Facebook Pixel ?

Le fonctionnement du Facebook Pixel lui-même est assez simple. Nous ne l'analyserons pas du point de vue du code Javascript, il nous suffira de savoir grossièrement comment cela fonctionne :

  1. Un utilisateur visite votre site Web en effectuant certaines actions comme rechercher des produits, les ajouter au panier, terminer le paiement, etc.
  2. Le pixel Facebook suit ces événements et se synchronise avec les cookies Facebook dans le navigateur Web de l'utilisateur.
  3. Après le processus de synchronisation, l'utilisateur est marqué comme faisant partie de certains groupes cibles.
  4. Lorsque l'utilisateur ouvre Facebook, la plateforme sait déjà quelles publicités afficher.

 

Il est essentiel de bien comprendre une chose : le pixel Facebook est un code JavaScript. N'oubliez pas : un code JavaScript.

Retard et optimisation Javascript Vitaux Web de base.

Le délai JavaScript est un terme utilisé pour décrire le temps entre le chargement effectif d'une page Web et le moment où les scripts JavaScript qu'elle contient sont exécutés.

La principale raison pour laquelle le retard de JavaScript peut affecter les performances du site Web est que les scripts JavaScript peuvent ralentir le chargement de la page. Si un script JavaScript doit être exécuté avant le chargement complet de la page, cela peut entraîner un retard dans l'affichage de la page pour les utilisateurs.

Le délai d'exécution de JavaScript peut également impacter les indicateurs Web Vitals de Google , un ensemble de métriques utilisées par Google pour évaluer la qualité de l'expérience utilisateur sur les sites web. Parmi celles-ci, le First Contentful Paint (FCP), qui mesure le temps entre le chargement effectif de la page et l'affichage du premier élément visible, peut être affecté par ce délai, car une durée d'exécution excessive de JavaScript peut retarder l'affichage de la page.

Parler des délais JavaScript comme d'une technique implique nécessairement de présenter, au moins à titre informatif, Gijo Varghese , un programmeur indien qui se décrit comme blogueur (30 %), développeur (60 %) et entrepreneur (10 %). Il est un fervent défenseur de l'optimisation de la vitesse de WordPress.

Ce jeune programmeur, spécialisé dans l'optimisation et les performances des sites web, a eu l'idée, à un certain moment, de charger les fichiers Javascript avec un délai, précisément dans le but d' améliorer le score PageSpeed ​​(à l'époque, le concept de Core Web Vitals n'existait pas encore ).

Cette technique, il l'a appelée Flyng Script (probablement en l'honneur des clients qui veulent des sites qui volent).

La raison du délai Javascript est assez facile à comprendre : l’un des facteurs les plus préjudiciables au score PageSpeed ​​et à la vitesse de chargement est précisément constitué par les fichiers Javascript.

Les causes sont principalement les suivantes :

  1. Il en existe généralement beaucoup notamment sur les sites WordPress et de nombreux plugins.
  2. Ils ont un poids au niveau des kilo-octets qui n'est pas indifférent.
  3. Ce ne sont pas des langages de balisage comme HTML ou des styles comme CSS, mais des langages de programmation qui sont traités côté client et impactent donc à la fois les ressources matérielles et la réactivité sur des appareils pas très rapides.

Quiconque a essayé de faire un test PageSpeed ​​​​Insight avec Javascript chargé normalement et Javascript chargé avec un retard aura remarqué à quel point un site chargé avec cette technique est évident en termes de poids et de vitesse (ainsi que de score Pagespeed).

Il est donc pacifique, au moins dans les premiers jours, d'essayer de retarder tout ce qui peut être retardé en essayant de trouver ce feu vert qui satisfait à la fois notre ego et celui du client, cependant, comme ils l'enseignent dans l'art de la guerre, il faut avoir peur de ce qu'on ne sait pas et c'est là que les problèmes commencent.

Par ailleurs, un développeur est-il quelqu'un qui gère ou sait gérer des campagnes publicitaires Facebook ? Est-ce un technicien capable de comprendre le fonctionnement de ce mécanisme ? Non, comme souvent, il n'est pas responsable puisqu'il est censé être supervisé par le responsable de la publicité, lequel, dépourvu de compétences en programmation, crée des systèmes cloisonnés qui ne communiquent pas entre eux, ce qui engendre des problèmes.

Soyons francs, très francs. Nous ignorions tout des conséquences de ce problème sur la publicité Facebook , car nous ne comprenions pas le fonctionnement de la publicité Facebook et du pixel Facebook. Nous sommes administrateurs système, un peu développeurs, mais pas annonceurs.

Nous avons dû investir du temps et des ressources auprès de nos clients professionnels du marketing affilié pour comprendre où se trouvait le piège et comprendre sans regret que nous devions prendre du recul et valoriser les objectifs commerciaux plutôt qu'un simple score Google Pagespeed.

Autres raisons de retarder l'exécution des scripts Javascript

Les données téléchargées depuis des serveurs tiers, comme les widgets de page Facebook, Facebook Messenger, les commentaires Facebook, les iframes ou les services de chat en direct tels que Tawk.to, sont des données que vous ne contrôlez pas. Vous ne pouvez ni les compresser, ni les fusionner, ni les mettre en cache, car elles ne sont pas hébergées sur votre site. Ces données sont souvent volumineuses et peuvent sérieusement impacter la vitesse de chargement de votre site web. Pour le constater, vous pouvez utiliser Google PageSpeed ​​Insights , GTmetrix ou tout autre outil de test de vitesse.

Puisqu'il est impossible de les optimiser, la seule façon d'intégrer les services mentionnés ci-dessus à votre site web sans impacter la vitesse de chargement est de retarder l'exécution de leurs scripts. Cela réduira le temps d'affichage de votre page et améliorera les scores de vitesse sur les outils de test tels que le temps d'interaction, le délai d'inactivité du processeur et le délai d'entrée maximal potentiel. Cela réduira également la charge initiale du navigateur en diminuant le nombre de requêtes.

Comment retarder l'exécution de Javascript ?

D'un point de vue purement technique, retarder Javascript revient simplement à ajouter un script Javascript pour retarder l'exécution d'autres scripts Javascript.

Par exemple, tous les plugins WordPress qui implémentent actuellement cette fonctionnalité sont basés sur le code de Flying Scripts écrit par Gijo Varghese. Cela concerne des plugins comme Flying Scripts, WP Meteor, FlyingPress (une version commerciale gratuite de Flying Scripts), et même le très populaire WP Rocket.

Il est important de noter que si les trois premiers plugins mentionnés ci-dessus permettent de définir un délai d'attente avant le chargement des fichiers JavaScript, WP Rocket (le plus populaire et le plus commercial), malgré ses nombreuses fonctionnalités supplémentaires, est le seul parmi tous ceux qui ne proposent pas cette option. Il commencera simplement à charger les autres fichiers JavaScript dès qu'une interaction se produit, comme un appui ou un défilement.

Cela crée pas mal de problèmes, par exemple, pour les sites qui ont des plugins avec des curseurs Javascript qui restent et attendent jusqu'à ce que l'utilisateur interagisse avec le site en activant l'événement qui conduira au chargement du site.

Dans certains cas, c'est vraiment ennuyeux car le phénomène est créé dans lequel l'utilisateur attend que quelque chose se charge, et le script attend que l'utilisateur interagisse, mais l'utilisateur attend toujours que le curseur se charge. Une situation aussi maladroite que désagréable.

Comment le retard Javascript ou le retard JS impacte-t-il les campagnes Facebook ADS ?

Si vous avez bien suivi et attentivement jusqu'à présent, vous devriez déjà y être arrivé. Reprenons le schéma ci-dessous pour retracer les différentes étapes et comprendre la problématique du Delay JS et du drop des campagnes Facebook.

Nous avons dit que l'utilisateur de Facebook est envoyé sur mon site qui contient le pixel Facebook, le navigateur charge le site qui a cependant le délai JS actif, l'utilisateur ouvre la page, regarde l'image, lit le texte et il sort après deux ou trois secondes et que le pixel Facebook n'a pas encore été chargé, l'événement ne s'est pas déclenché et n'a rien communiqué à Facebook.

Pour Facebook, il semble que le visiteur ait cliqué sur la publicité Facebook, ait été envoyé vers votre site, qui ne s'est pas ouvert.

Peu importe si en fait le visiteur a vu les images, le logo, le texte et la description et que seul le pixel Facebook n'a pas été chargé, car le pixel Facebook est "le test décisif" que le site a chargé et a précisément l'événement.

Doit-il ou non utiliser la technique Delay JS ?

Cette technique devrait être utilisée pour les scripts d'interaction utilisateur ou les discussions en direct comme le chat client Facebook, le widget Facebook, les commentaires Facebook, les iframes (YouTube, Google Maps), Tawk.to, …

Sinon, il n'est pas recommandé pour les scripts tels que le suivi ou l'analyse des données des utilisateurs tels que Google Analytics, Facebook Pixel, Google Tag Manager, Crazy Egg, Google Remarketing Tag, car l'application de cette technique peut entraîner un échec de l'enregistrement des données ou les rendre incomplètes ou inexactes. .

Le bon compromis lors de l'utilisation des plugins mentionnés ci-dessus consiste à utiliser le délai JS tout en excluant des options les plugins impliqués dans le chargement du pixel Facebook, comme on peut le faire par exemple sur Wp Rocket (que je n'apprécie personnellement pas en raison de l'absence de délai d'attente).

 

Il est toujours préférable d'avoir un site avec un score PageSpeed ​​plus faible, mais qui suit tous les événements et vous permet de mener des campagnes performantes et d'obtenir un retour sur investissement intéressant , plutôt qu'un site web avec un score de 100 qui vous fait dépenser des sommes astronomiques sur Facebook sans rien vendre.

 

Vous avez des doutes ? Vous ne savez pas par où commencer ? Contactez-nous !

Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

AVIS DE NON-RESPONSABILITÉ, Mentions légales et droits d'auteur. Red Hat, Inc. détient les droits sur Red Hat®, RHEL®, RedHat Linux® et CentOS® ; AlmaLinux™ est une marque commerciale de la AlmaLinux OS Foundation ; Rocky Linux® est une marque déposée de la Rocky Linux Foundation ; SUSE® est une marque déposée de SUSE LLC ; Canonical Ltd. détient les droits sur Ubuntu® ; Software in the Public Interest, Inc. détient les droits sur Debian® ; Linus Torvalds détient les droits sur Linux® ; FreeBSD® est une marque déposée de la Fondation FreeBSD ; NetBSD® est une marque déposée de la Fondation NetBSD ; OpenBSD® est une marque déposée de Theo de Raadt ; Oracle Corporation détient les droits sur Oracle®, MySQL®, MyRocks®, VirtualBox® et ZFS® ; Percona® est une marque déposée de Percona LLC ; MariaDB® est une marque déposée de MariaDB Corporation Ab ; PostgreSQL® est une marque déposée de PostgreSQL Global Development Group ; SQLite® est une marque déposée de Hipp, Wyrick & Company, Inc. ; KeyDB® est une marque déposée d'EQ Alpha Technology Ltd. ; Typesense® est une marque déposée de Typesense Inc. ; REDIS® est une marque déposée de Redis Labs Ltd ; F5 Networks, Inc. détient les droits sur NGINX® et NGINX Plus® ; Varnish® est une marque déposée de Varnish Software AB ; HAProxy® est une marque déposée de HAProxy Technologies LLC ; Traefik® est une marque déposée de Traefik Labs ; Envoy® est une marque déposée de CNCF ; Adobe Inc. détient les droits sur Magento® ; PrestaShop® est une marque déposée de PrestaShop SA ; OpenCart® est une marque déposée d'OpenCart Limited ; Automattic Inc. détient les droits sur WordPress®, WooCommerce® et JetPack® ; Open Source Matters, Inc. détient les droits sur Joomla® ; Dries Buytaert détient les droits sur Drupal® ; Shopify® est une marque déposée de Shopify Inc. ; BigCommerce® est une marque déposée de BigCommerce Pty. Ltd.; TYPO3® est une marque déposée de la TYPO3 Association; Ghost® est une marque déposée de la Ghost Foundation; Amazon Web Services, Inc. détient les droits sur AWS® et Amazon SES® ; Google LLC détient les droits sur Google Cloud™, Chrome™ et Google Kubernetes Engine™ ; Alibaba Cloud® est une marque déposée d'Alibaba Group Holding Limited ; DigitalOcean® est une marque déposée de DigitalOcean, LLC ; Linode® est une marque déposée de Linode, LLC ; Vultr® est une marque déposée de The Constant Company, LLC ; Akamai® est une marque déposée d'Akamai Technologies, Inc. ; Fastly® est une marque déposée de Fastly, Inc. ; Let's Encrypt® est une marque déposée d'Internet Security Research Group ; Microsoft Corporation détient les droits sur Microsoft®, Azure®, Windows®, Office® et Internet Explorer® ; Mozilla Foundation détient les droits sur Firefox® ; Apache® est une marque déposée de The Apache Software Foundation ; Apache Tomcat® est une marque déposée de The Apache Software Foundation ; PHP® est une marque déposée de PHP Group ; Docker® est une marque déposée de Docker, Inc. Kubernetes® est une marque déposée de The Linux Foundation ; OpenShift® est une marque déposée de Red Hat, Inc. ; Podman® est une marque déposée de Red Hat, Inc. ; Proxmox® est une marque déposée de Proxmox Server Solutions GmbH ; VMware® est une marque déposée de Broadcom Inc. ; CloudFlare® est une marque déposée de Cloudflare, Inc. ; NETSCOUT® est une marque déposée de NETSCOUT Systems Inc. ; ElasticSearch®, LogStash® et Kibana® sont des marques déposées d'Elastic NV ; Grafana® est une marque déposée de Grafana Labs ; Prometheus® est une marque déposée de The Linux Foundation ; Zabbix® est une marque déposée de Zabbix LLC ; Datadog® est une marque déposée de Datadog, Inc. ; Ceph® est une marque déposée de Red Hat, Inc. ; MinIO® est une marque déposée de MinIO, Inc. ; Mailgun® est une marque déposée de Mailgun Technologies, Inc. ; SendGrid® est une marque déposée de Twilio Inc. Postmark® est une marque déposée d'ActiveCampaign, LLC ; cPanel®, LLC détient les droits sur cPanel® ; Plesk® est une marque déposée de Plesk International GmbH ; Hetzner® est une marque déposée de Hetzner Online GmbH ; OVHcloud® est une marque déposée d'OVH Groupe SAS ; Terraform® est une marque déposée de HashiCorp, Inc. ; Ansible® est une marque déposée de Red Hat, Inc. ; cURL® est une marque déposée de Daniel Stenberg ; Facebook®, Inc. détient les droits sur Facebook®, Messenger® et Instagram®. Ce site n'est pas affilié, sponsorisé ou autrement associé à l'une des entités mentionnées ci-dessus et ne représente aucune de ces entités de quelque manière que ce soit. Tous les droits sur les marques et noms de produits mentionnés sont la propriété de leurs titulaires respectifs des droits d'auteur. Toutes les autres marques mentionnées sont la propriété de leurs titulaires respectifs. MANAGED SERVER® est une marque déposée européenne de MANAGED SERVER SRL, dont le siège social est situé Via Flavio Gioia, 6, 62012 Civitanova Marche (MC), Italie et le siège opérationnel Via Enzo Ferrari, 9, 62012 Civitanova Marche (MC), Italie.

JUSTE UN MOMENT !

Vous êtes-vous déjà demandé si votre hébergement était nul ?

Découvrez dès maintenant si votre hébergeur vous pénalise avec un site web lent digne des années 1990 ! Résultats immédiats.

Fermer le CTA
Retour en haut de page