Como carregar o botão do Facebook de forma assíncrona?
Quase todos os blogs e sites têm um botão de curtir, compartilhar ou seguir no Facebook.
Como você deve saber, o código de compartilhamento social padrão do Facebook é carregado de forma síncrona junto com os recursos da sua página da web.
Isso aumentará o tempo de carregamento do site e prejudicará a pontuação de SEO. Não é apenas SEO, mas também estraga a experiência do usuário.
Tenho certeza de que o botão de compartilhamento social do Facebook é essencial, mas não como seu código real a ser exibido primeiro. Muitos blogs ou sites têm tempo de carregamento de página maior por causa do código padrão do Facebook.
Usar o código do Facebook de forma assíncrona ajudará você a carregar sua página da web 0,5 a 1,5 segundos mais rápido. Isso é o que você precisa para carregar o botão curtir, compartilhar ou seguir do Facebook mais rapidamente.
Aqui está o código que recebi de Desenvolvedor do Facebook para curtir e compartilhar em etechpt.com.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>
Agora, tudo o que tenho a acrescentar é seguir uma única linha no meu código, o que ajudará a carregar os botões mais rapidamente.
js.async=true;
Então o código modificado seria:
<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ão é fácil?
Atualização: os novos trechos de código oferecidos pelo Facebook não exigem acima, pois incluem script assíncrono já que você pode ver abaixo.
<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>
Usando WordPress? Confira esta postagem que explica como otimizar o desempenho sem um plug-in. E se você estiver procurando por um plug-in de mídia social que não diminua a velocidade, eu recomendo Novashare.
Tenho certeza de que você gosta que sua página da Web carregue mais rápido e espero que isso o ajude.
Gostou de ler o artigo? Que tal compartilhar com o mundo?