Optimiser le chargement du bouton Facebook sur votre site web
La présence de boutons Facebook, tels que « J’aime », « Partager » ou « Suivre », est devenue une norme sur la plupart des blogs et sites internet.
Le code par défaut fourni par Facebook pour ces boutons se charge de manière synchrone avec les autres éléments de votre page web. Cette méthode de chargement peut rallonger considérablement le temps d’affichage de votre site, ce qui nuit à son référencement (SEO) et dégrade l’expérience utilisateur.
Bien que l’utilité des boutons de partage Facebook soit indéniable, leur chargement ne doit pas être prioritaire par rapport au contenu principal de votre page. Un temps de chargement élevé, souvent causé par le code Facebook, est préjudiciable.
L’implémentation asynchrone du code Facebook permet d’accélérer le chargement de votre page web de 0,5 à 1,5 seconde. C’est une amélioration notable qui contribue à un affichage plus rapide des boutons « J’aime », « Partager » et « Suivre ».
Le code initial proposé par Facebook Developer pour les boutons « J’aime » et « Partager » sur toptips.fr.com était le suivant:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Pour rendre ce chargement asynchrone, il suffit d’ajouter une ligne de code:
js.async=true;
Le code modifié se présente alors ainsi:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Cette modification est extrêmement simple à mettre en œuvre.
Mise à jour : Les nouveaux extraits de code fournis par Facebook intègrent déjà l’attribut « async », rendant la manipulation précédente inutile. Voici l’exemple de code actuel:
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="JekfmCeX"></script>
Si vous utilisez WordPress, nous vous conseillons de lire cet article expliquant comment optimiser les performances sans utiliser de plugin. De plus, si vous recherchez un plugin de partage social qui ne ralentit pas votre site, nous vous recommandons Novashare.
Nous sommes convaincus que vous appréciez un site web rapide et espérons que ces informations vous seront utiles.
Cet article vous a plu? N’hésitez pas à le partager!