Velocidad del sitio y Javascript asincrónico

asincrónico

Si bien desarrollo mucho, no me clasifico como un verdadero desarrollador. Puedo programar y mover cosas en una página y hacer que funcione. Un verdadero desarrollador entiende cómo desarrollar el código para que se pueda escalar, no consuma muchos recursos, se cargue rápidamente, se modifique fácilmente más tarde y siga funcionando.

La situación difícil en la que se encuentran los especialistas en marketing es tener una sitio web muy rápido y aún incorporar integraciones y elementos sociales que pueden crear dependencias sobre la rapidez con la que se cargará su sitio. Un ejemplo es botones sociales. En Martech, tenemos botones sociales en cada página del sitio. Entonces ... si los recursos de Facebook se cargan lentamente un día, ralentiza nuestro sitio. Luego agregue Twitter, Pinterest, Buffer, etc. a eso y las posibilidades de que su sitio se cargue rápidamente se reducen a prácticamente nada.

Eso se conoce como carga síncrona. Tienes que terminar de cargar un elemento antes cargas el siguiente elemento. Si puede cargar elementos de forma asincrónica, puede cargar elementos sin depender entre sí. Puede mejorar drásticamente la velocidad de su sitio cargando elementos de forma asincrónica. El problema es que los scripts listos para usar que le proporcionan estas empresas casi nunca están optimizados para ejecutarse de forma asincrónica.
asincrónico

Puede ver qué está afectando la velocidad de su página ejecutando una prueba en Pingdom:
carga de la página pingdom

Javascript asincrónico te permite escribir código que le dice a los elementos que se carguen después de la página está completamente cargada. ¡Sin dependencias! Entonces, su página se carga y una vez que está completa, se inicia un script que carga los otros elementos, en este caso nuestros botones sociales. Si eres desarrollador, puedes leer un gran artículo, Javascript asincrónico de carga diferida.

Aquí hay un fragmento de cómo hacerlo correctamente de Emil Stenström:

(function () {function async_load () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://buttondomain.com /script.js '; var x = document.getElementsByTagName (' script ') [0]; x.parentNode.insertBefore (s, x);} if (window.attachEvent) window.attachEvent (' onload ', async_load); else window.addEventListener ('cargar', async_load, falso);}) ();

El resultado es que si estas integraciones de terceros están inactivas o funcionan con lentitud, nunca afectará la aparición del contenido principal de su página. Si ve el código fuente de nuestra página, verá que estoy cargando todos los scripts sociales adicionales utilizando esta técnica. El proceso mejorado la velocidad de nuestro sitio en segundos - y no se ahoga durante la carga. No hemos convertido todas nuestras dependencias externas a Javascript asincrónico, pero lo haremos.

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.