¿Cómo cargar el botón de Facebook de forma asíncrona?
Casi todos los blogs, un sitio web tiene un botón Me gusta, compartir o seguir de Facebook.
Como sabrá, el código predeterminado para compartir en redes sociales de Facebook se carga sincrónicamente junto con los recursos de su página web.
Esto aumentará el tiempo de carga de su sitio web y dañará la puntuación de SEO. Simplemente no es SEO, sino que también estropea la experiencia del usuario.
Estoy seguro de que el botón de compartir en redes sociales de Facebook es esencial, pero no como su código real para mostrar primero. Hay muchos blogs o sitios web que tienen un tiempo de carga de página más alto debido al código predeterminado de Facebook.
El uso asincrónico del código de Facebook lo ayudará a cargar su página web entre 0,5 y 1,5 segundos más rápido. Esto es lo que tienes que hacer para cargar el botón Me gusta, Compartir o Seguir de Facebook más rápido.
Aquí está el código que obtuve de Desarrollador de Facebook para dar me gusta y compartir en kirukiru.es.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>
Ahora, todo lo que tengo que agregar es seguir la línea única en mi código, lo que ayudará a cargar los botones más rápido.
js.async=true;
Entonces el código modificado sería:
<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>
¿No es fácil?
Actualización: los nuevos fragmentos de código ofrecidos por Facebook no requieren lo anterior, ya que incluye secuencias de comandos asíncronas que ya puede ver a continuación.
<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>
¿Usas WordPress? Consulte esta publicación que explica cómo optimizar el rendimiento sin un complemento. Y si está buscando un complemento de redes sociales que no se ralentice, le recomiendo encarecidamente novashare.
Estoy seguro de que te gusta que tu página web se cargue más rápido, y espero que esto te ayude.
¿Te gustó leer el artículo? ¿Qué tal compartir con el mundo?