⬆

Ne Laissez pas le Pixel Facebook đŸš« Ruiner vos Performances ! Optimisez-le 📈

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

Ne Laissez pas le Pixel Facebook đŸš« Ruiner vos Performances ! Optimisez-le 📈
Difficulté :
1/3
Durée: 
1/3
non définie
Gratuit

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 🚙

CLS > 0.1

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. 

upvote triangle
51
Merci !
Cette astuce vous a été utile ? Votez en un clic ci-dessus.
photo stephen mesnildrey
Stephen MESNILDREY
CEO & Fondateur

🔍 Ma passion ? DĂ©crypter, analyser et partager des stratĂ©gies puissantes, des logiciels avant-gardistes et des astuces inĂ©dites qui boostent votre entreprise et rĂ©volutionnent votre secteur.

Vous voulez rester Ă  la pointe ? Vous ĂȘtes au bon endroit ! 💡

đŸ“© Abonnez-vous Ă  ma newsletter et recevez chaque semaine :

  • Des conseils pratiques pour rĂ©inventer votre business, optimiser votre productivitĂ© et stimuler votre crĂ©ativitĂ©
  • Un accĂšs privilĂ©giĂ© aux nouvelles stratĂ©gies
  • 100% de contenu EXCLUSIF Ă  partager avec vous
  • 0% de choses Ă  vous vendre

L'aventure ne fait que commencer, et elle s'annonce Ă©pique ! 🚀

Twitter 𝕏 : Connectons- nous !
Table des matiĂšres
>
Partagez cette atuce
< Voir la liste de toutes les astuces