▸ Ne Laissez pas le Pixel Facebook 🚫 Ruiner vos Performances ! Optimisez-le 📈

Comment réaliser ce Growth Hack et que peut-il vous apporter ?

L'ajout du Pixel Facebook à votre site web a du bon pour mieux cibler votre audience mais si vous l'utilisez tel quel les performances de votre site vont en pâtir.

Suite à l'analyse de ma Google Search Console, j'ai reçu une alerte m'indiquant que plusieurs URL de ce site web devaient être améliorées car elles possédaient des performances à revoir.

Si la Google Search Console vous indique des points d'amélioration à mettre en place, vous DEVEZ les mettre en place.

Dans mon cas, comme pour beaucoup je pense, ce problème était dû au Pixel Facebook particulièrement gourmand au chargement du site web.

Vous allez voir à travers ce hack comment éviter ce problème pour optimiser vos performances et votre score SEO global.

Résultats attendus de ce Growth Hack

Type de tactique marketing : Optimisation de la vitesse de votre site web
Résultat escompté : Baisse du taux de rebond sur votre site web sur Ordinateur et Mobile, augmentation de vos métriques SEO

Pourquoi réaliser ce Growth Hack ?

Un score SEO plus élevé

La vitesse des pages est l'un des aspects les plus importants de tout site web.

Les utilisateurs se sont habitués à des sites et des applications plus rapides, c'est pourquoi Google utilise la vitesse des pages pour tout :

du classement de vos pages dans les moteurs de recherche
au score de qualité de vos annonces dans Google Ads.

Inutile de dire que la vitesse des pages est importante pour les humains et les moteurs de recherche, elle l'est donc pour vous !

Après la résolution de ce Growth Hack vous pourrez bénéficier de meilleures performances simplement en ayant ajouté quelques lignes de codes au Pixel fournit par Facebook

Avant 🚙

Après 🛫

CLS = 0.01 - soit plus de 10 fois mois !

Mais comment augmenter la vitesse des pages ?

Un moyen simple d'augmenter la vitesse de chargement des pages consiste à retarder certains éléments et scripts après le chargement de la page.

Le chargement paresseux appelé "lazy loading" des images est la version la plus courante et la plus connue de cette stratégie.

Cependant, vous pouvez effectivement "charger paresseusement" n'importe quel élément d'une page.

Un pixel Facebook plus précis sur ceux réellement intéressés par ce que vous faites

Un avantage également non négligeable est le suivant :

Vous ne voulez pas que votre audience Facebook soit nourri d'une audience qui n'est pas intéressée par ce que vous faites.

L'avantage de ce Growth Hack est réussir à définir un persona marketing encore plus fin grâce à un Pixel Facebook qui ne collectera que les données des internautes intéressés par ce que vous faites.

Comment réaliser ce Growth Hack ?

Nous allons différer le chargement du pixel Facebook, qui est typiquement l'un des éléments les plus lourds à charger sur un site web.

Allez sur GT Metrix et lancer une analyse de votre site web pour regarder plus en détails les éléments qui consomment le plus de ressources lors du chargement de votre site web.

Une fois lancé, généralement les 2 plus gros éléments (mise à part si vous disposer de photos ou vidéos que vous devriez optimiser ou retarder) sont les scripts Facebook associés à l'installation du Pixel qui vous permet de suivre l'audience de votre site web.

Comme vous le voyez sur l'Analyse GT Metrix ci-dessus, les scripts Facebook représentent une grande partie des ressources consommés lors du chargement du site web.

Cependant, nous pouvons différer son chargement en premier et le laisser jusqu'à ce que les autres parties et actifs de la page soient chargés.

Votre code pixel Facebook est généralement installé dans votre en-tête (entre les balises <head> et </head> du html).

L'utilisation du plugin WordPress Insert Headers and Footers, permet d'insérer et de trouver très facilement le code dans votre en-tête et votre pied de page.

Si vous n'êtes pas si Wordpress comme moi vous installez généralement le code Facebook de 2 manières :

À l'aide de Google Tag Manager
Dans le header de la page

C'est une erreur, et voici comment faire.

Installez le Pixel dans le Footer

Retirez le pixel Facebook de votre en-tête pour le placer dans votre pied de page.

Le code du header est encadré par 2 balises : <head></head>
Le code du footer est encadré par 2 balises : <footer></footer>

Modifier la place de votre pixel n'est pas tout, l'une des choses les plus importants va être de décalé le chargement des scripts pour laisser votre page s'afficher tranquillement sans être bloqué par ces mêmes scripts.

Modifiez le code du Pixel Facebook

Vous trouverez ci-dessous un exemple de ce code.

Ajoutez les 2 lignes en gras dans l'exemple de code de Pixel Facebook au vôtre pour le retarder (+ la balise Alt pour l'image du Pixel qui retirera de nombreux warnings SEO)

Ici, j'ai choisi un décalage de chargement de 3,5 secondes (3500 millisecondes).

Code du pixel Facebook -->

<script>

setTimeout(function(){
  !fonction(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod ?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)} ;
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0' ;
  n.queue=[];t=b.createElement(e);t.async=!0 ;
  t.src=v;s=b.getElementsByTagName(e)[0] ;
s.parentNode.insertBefore(t,s)}(window, document, 'script',
  https://connect.facebook.net/en_US/fbevents.js') ;
  fbq('init', 'xxxxxxxxxxxxxxx') ;
  fbq('track', 'PageView') ;
}, 3500) ;

</script>

<noscript>
<img height="1" width="1" alt="Pixel Facebook" style="display:none" src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxx&ev=PageView&noscript=1"/>
</noscript>

Voilà ! Ce n'était pas bien difficile et pas très long mais votre site web et vos utilisateurs vous en remercieront !

Conclusion sur ce Growth Hack

Vous avez terminé, cela devrait donner à vos pages un léger coup de pouce en termes de vitesse de chargement.

Cette méthode n'entrave pas la collecte d'informations sur votre pixel, après tout, vous souciez-vous vraiment de savoir si quelqu'un n'est resté sur votre page que moins de trois secondes ?

Ce concept simple peut également être appliqué à d'autres morceaux de code, Javascript, CSS, etc...

‍Cependant, faites attention lorsque vous déplacez ou reportez du code car vous pouvez facilement casser votre site si vous ne faites pas attention.

Ne Laissez pas le Pixel Facebook 🚫 Ruiner vos Performances ! Optimisez-le 📈