Acelere o Carregamento do Seu Site: Implementação Assíncrona do Botão do Facebook
É comum encontrar botões de curtir, compartilhar ou seguir do Facebook integrados em diversos blogs e websites.
O código padrão do Facebook para funcionalidades sociais, como você deve saber, é carregado de forma síncrona, o que significa que ele é processado simultaneamente com outros elementos da sua página.
Essa forma de carregamento pode aumentar o tempo de carregamento geral do seu site e impactar negativamente o seu posicionamento nos resultados de busca (SEO). Além disso, essa lentidão prejudica a experiência do usuário.
Embora o botão de compartilhamento do Facebook seja importante, o código que o carrega não precisa ser processado prioritariamente. Muitos sites e blogs enfrentam tempos de carregamento mais longos justamente por conta da execução síncrona desse código.
Ao empregar o código do Facebook de maneira assíncrona, você consegue acelerar o carregamento da sua página web em um intervalo de 0,5 a 1,5 segundos. Essa melhoria é fundamental para que os botões de curtir, compartilhar ou seguir sejam exibidos de forma mais rápida e eficiente.
O código a seguir, obtido através do Facebook para Desenvolvedores, demonstra como implementar as funcionalidades de curtir e compartilhar:
<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>
Para otimizar o carregamento, basta adicionar uma simples linha de código:
js.async=true;
O código otimizado ficará da seguinte forma:
<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>
Simples, não é?
Atualização: As novas instruções fornecidas pelo Facebook já incluem o carregamento assíncrono por padrão, como pode ser visto 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>
Utiliza WordPress? Recomendo que veja este artigo que explica como otimizar o desempenho sem usar plugins. Caso necessite de um plugin para redes sociais que não impacte a velocidade do seu site, minha sugestão é o Novashare.
Tenho certeza de que você se importa com o tempo de carregamento do seu site, e espero que essas dicas tenham sido úteis.
Gostou deste artigo? Que tal compartilhá-lo?