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