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 et dit, le score PageSpeed ​​​​et l'optimisation de Vitaux Web de base elles sont importantes, mais il faut trouver un compromis entre une partition qui apporte des avantages et une partition qui n'apporte que de la vanité.

Nous l'avons réitéré et souligné dans cet article lorsque nous avons expliqué les dangers d'utiliser background-image plutôt que la balise html img pour tromper Google PageSpeed, vous devez trouver un compromis et ne pas vous laisser berner par des mesures de vanité.

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 qui part deexpert Vitaux Web de base Et il dit :

“Uèèèèèè Artiste !!! Mais tu sais que Grand Looca dit que les campagnes nécessitent des sites aussi rapides que des missiles sol-air et que mon ami qui fait du marketing d'affiliation avec des sites Web rapides a acheté la nouvelle BMW M3 Sport et a un score PageSpeed ​​de 91 sur mobile ? Allez, envoyez-moi vite le site et je vous paierai 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 se taire et le voilà qui revient au bout de quelques jours et vous ramène le site aux partitions mobiles stratosphériques. Non seulement cela ne vous a pas aidé, mais au contraire cela vous a créé de sérieux problèmes, que vous paierez à vos dépens à l'avenir, comme obtenir dépenser beaucoup d'argent pour la publicité FB et les campagnes qui ne fonctionnent pas comme elles le devraient avec une chute très élevée.

 

PageSpeed ​​​​Insights Asso360 Mobile

Vous devez tenir compte du fait que Facebook est l'un des meilleurs endroits pour faire de la publicité pour toute entreprise. Il existe de nombreuses façons de créer les annonces parfaites pour vos besoins, et vous pouvez établir un budget dans leur module d'annonces pour chaque type d'annonce de manière unique. Cela signifie que vous pouvez générer du trafic vers votre site Web avec vos publicités Facebook, à un coût très faible.

Mais que se passe-t-il si vos publicités Facebook ne génèrent pas les résultats qu'elles avaient l'habitude d'être ? Cela pourrait être dû aux récentes mises à jour iOS14. Cela est dû aux fonctionnalités de suivi qu'Apple a bloquées. Bien que cela ait pu être très utile d'un point de vue sécurité, c'est un changement inutile lié à la publicité, dont nous allons tous payer le prix, quand le produit qui coûtait auparavant 100 euros, aujourd'hui avec l'augmentation des coûts de publicité nous allons payer 120.

Revenant au discours de l'autre baisse des campagnes facebook à la place, cela pourrait aussi être dû à une sur-optimisation de la Vitaux Web de base, aller à tout prix chercher un score optimal et donc abuser de la fonction js delay trouvée 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 d'autres termes, cela signifie des dépenses très élevées et un rendement minimum, le cauchemar de chaque entrepreneur, de chaque annonceur et de chaque filiale de commercialisation qui, à cause de cela, ne pourra pas vivre la vie de rêve dans une villa et une piscine à Dubaï avec 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 faut garder à l'esprit un concept très clair, le pixel Facebook est un code Javascript. Rappelez-vous, 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 retard de JavaScript peut également affecter les valeurs de Google Vitaux Web de base, qui est une série de mesures utilisées par Google pour évaluer la qualité de l'expérience utilisateur sur les sites Web. Parmi ceux-ci, le temps de chargement de la première réponse (First Contentful Paint – FCP), qui mesure le temps entre le chargement effectif de la page et le moment où le premier élément visible s'affiche, peut être affecté par le délai javascript, comme un temps d'exécution excessif des scripts javascript peut entraîner un retard dans le rendu effectif de la page.

Parler du retard de Javascript en tant que technique, signifie nécessairement au moins à des fins purement informatives introduire Gijo Varghèse, un programmeur indien qui aime se définir blogueur (30%), développeur (60%) et entrepreneur (10%). Un passionné de vitesse WordPress.

Ce jeune programmeur axé sur l'optimisation des sites Web et des performances, a pensé à un moment donné pour améliorer le score PageSpeed (à l'époque le concept de Vitaux Web de base) pour charger les fichiers Javascript avec un retard, un retard en fait.

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

La motivation du Delay Javascript est assez facile à comprendre, l'un des pires facteurs en termes de score PageSpeed ​​​​et de vitesse de chargement sont 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.

De plus, un développeur est-il quelqu'un qui fait ou sait faire des campagnes publicitaires sur Facebook ? Est-il une figure technique capable de comprendre comment ce mécanisme doit fonctionner ? Non, comme c'est normal, il n'est pas à blâmer car il devrait être dirigé par la personne qui fait de la publicité qui à son tour est une figure qui n'a aucune compétence en programmation et donc des compartiments étanches qui ne communiquent pas et voilà le désastre.

Soyons honnêtes, profondément honnêtes. Nous ne connaissions même pas les implications de ce problème avec la publicité Facebook, parce que nous ne savions pas comment fonctionnaient Facebook Advertising et le Facebook Pixel, nous sommes des ingénieurs 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 à partir de serveurs tiers tels que Facebook Page Widget, Facebook Messenger, Facebook Comments, iframe ou des services de chat en direct tels que Tawk.to sont des données que vous ne pouvez pas contrôler. Vous ne pouvez pas les compresser, les fusionner ou les mettre en cache, simplement parce qu'ils ne se trouvent pas sur votre hôte. Ces données sont souvent très lourdes et peuvent causer de sérieux problèmes liés à la vitesse de chargement du site. Pour le voir clairement, vous pouvez utiliser Google PageSpeed Perspectives , GTmetrix ou tout autre outil de test de vitesse à vérifier.

E comme il n'est pas possible de les optimiser, la seule solution pour intégrer les services ci-dessus dans le site Web sans affecter la vitesse des pages est de retarder l'exécution de leurs scripts. En faisant cela, vous réduirez le temps de rendu de votre page et améliorerez les cotes de vitesse sur les outils de test de vitesse de page tels que Time to Interactive, First CPU Idle, Max Potential Input Delay, etc. Cela réduira également la charge utile initiale sur le navigateur en réduisant 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 cette fonctionnalité à ce jour sont basés sur le code de Scripts volants écrit par Gijo Varghese. C'est le cas des plugins tels que Flying Scripts, WP Meteor, FlyngPress (une évolution commerciale de Flyng Script qui est gratuite) ou encore le plus connu Wp Rocket.

Il faut dire que si les 3 premiers listés ci-dessus permettent de définir un délai après lequel les fichiers Javascript sont chargés, Wp Rocket (qui est le plus connu et le plus commercial) bien qu'il ait beaucoup plus de fonctions, c'est le seul parmi tant d'autres qui n'a pas et ne vous permet pas de définir un délai d'attente. Il commencera simplement à charger les autres Javascripts lorsqu'une interaction se produit comme, par exemple, une touche de l'appareil 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 apparaît donc que le visiteur a cliqué sur la publicité Facebook, a été redirigé 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 doit être utilisée pour les scripts liés à l'interaction de l'utilisateur ou chat en direct tels que Facebook Customer Chat, Facebook Widget, Facebook Comment, iframe (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 si vous utilisez les plugins cités plus haut, c'est d'utiliser le Delay du JS mais en même temps exclure des options les plugins impliqués dans le chargement du pixel Facebook comme on peut le faire sur Wp Rocket (ce que personnellement je n'aime pas à cause du manque de timout).

 

Il est toujours préférable d'avoir un site avec un score PageSpeed ​​inférieur qui suit tous les événements et vous permet d'avoir des campagnes performantes et un retour sur profit gratifiant, que d'avoir un site web avec un score de 100 et d'avoir Facebook qui vous fait dépenser des sommes faramineuses 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.

INFORMATIONS

Managed Server Srl est un acteur italien leader dans la fourniture de solutions système GNU/Linux avancées orientées vers la haute performance. Avec un modèle d'abonnement peu coûteux et prévisible, nous garantissons que nos clients ont accès à des technologies avancées en matière d'hébergement, de serveurs dédiés et de services cloud. En plus de cela, nous proposons des conseils système sur les systèmes Linux et une maintenance spécialisée en SGBD, sécurité informatique, Cloud et bien plus encore. Nous nous distinguons par notre expertise dans l'hébergement de CMS Open Source de premier plan tels que WordPress, WooCommerce, Drupal, Prestashop, Joomla, OpenCart et Magento, soutenus par un service d'assistance et de conseil de haut niveau adapté aux administrations publiques, aux PME et à toutes tailles.

Red Hat, Inc. détient les droits de Red Hat®, RHEL®, RedHat Linux® et CentOS® ; AlmaLinux™ est une marque commerciale d'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 The FreeBSD Foundation ; 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® et MyRocks® ; Percona® est une marque déposée de Percona LLC ; MariaDB® est une marque déposée de MariaDB Corporation Ab ; 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. 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®. Amazon Web Services, Inc. détient les droits sur AWS® ; Google LLC détient les droits sur Google Cloud™ et Chrome™ ; Microsoft Corporation détient les droits sur Microsoft®, Azure® et Internet Explorer® ; La Fondation Mozilla détient les droits sur Firefox®. Apache® est une marque déposée de The Apache Software Foundation ; PHP® est une marque déposée du groupe PHP. 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. Hetzner Online GmbH détient les droits sur Hetzner® ; OVHcloud est une marque déposée d'OVH Groupe SAS ; cPanel®, LLC détient les droits sur cPanel® ; Plesk® est une marque déposée de Plesk International GmbH ; Facebook, Inc. détient les droits sur Facebook®. Ce site n'est affilié, sponsorisé ou autrement associé à aucune des entités mentionnées ci-dessus et ne représente en aucune manière aucune de ces entités. 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 appartiennent à leurs titulaires. MANAGED SERVER® est une marque déposée au niveau européen par MANAGED SERVER SRL, Via Enzo Ferrari, 9, 62012 Civitanova Marche (MC), Italie.

JUSTE UN MOMENT !

Souhaitez-vous voir comment votre WooCommerce fonctionne sur nos systèmes sans avoir à migrer quoi que ce soit ? 

Entrez l'adresse de votre site WooCommerce et vous obtiendrez une démonstration navigable, sans avoir à faire absolument quoi que ce soit et entièrement gratuite.

Non merci, mes clients préfèrent le site lent.
Retour en haut de page