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 đ«
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.Â