Comment charger le bouton Facebook de manière asynchrone ?
Presque tous les blogs, un site Web ont un bouton Facebook comme, partager ou suivre.
Comme vous le savez peut-être, le code de partage social Facebook par défaut est chargé de manière synchrone avec les ressources de votre page Web.
Cela augmentera le temps de chargement de votre site Web et endommagera le score SEO. Ce n’est tout simplement pas du référencement, mais cela gâche également l’expérience utilisateur.
Je suis sûr que le bouton de partage social de Facebook est essentiel, mais pas comme votre code réel à afficher en premier. De nombreux blogs ou sites Web ont un temps de chargement de page plus élevé en raison du code Facebook par défaut.
L’utilisation asynchrone du code Facebook vous aidera à charger votre page Web de 0,5 à 1,5 seconde plus rapidement. C’est ce que vous devez charger Facebook comme, partager ou suivre le bouton plus rapidement.
Voici le code que j’ai obtenu de Développeur Facebook pour aimer et partager sur toptips.fr.com
<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>Maintenant, tout ce que j’ai à ajouter est de suivre la ligne unique de mon code, ce qui aidera à charger les boutons plus rapidement.
js.async=true;
Donc le code modifié serait :
<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>N’est-ce pas facile ?
Mise à jour : les nouveaux extraits de code proposés par Facebook ne nécessitent pas ce qui précède car ils incluent déjà le script asynchrone que vous pouvez voir ci-dessous.
<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>
Vous utilisez WordPress ? Consultez cet article qui explique comment optimiser les performances sans plugin. Et si vous recherchez un plugin de médias sociaux qui ne ralentit pas, je vous le recommande vivement Novashare.
Je suis sûr que vous aimez que votre page Web se charge plus rapidement, et j’espère que cela vous aidera.
Vous avez apprécié la lecture de l’article ? Que diriez-vous de partager avec le monde ?