Aplazar la carga de JavaScript es una de las advertencias que te da el PageSpeed Insights que puede hacer que te tires de los pelos tratando de encontrar la solución. Este método se utiliza normalmente para cargar el código JavaScript externo a nuestro sitio web. Mucha gente aplica el método “defer” o el método “async” y otros dicen que “hay que poner el JavaScript en la parte inferior de la página”.

Ninguna de las anteriores son soluciones al problema actual que permite cargar una página web por completo y luego cargar el JS externo.

Aplazar la carga de JavaScript.
Aplazar la carga de JavaScript.
Tampoco será una solución para resolver la advertencia de que se recibe de la herramienta PageSpeed Insights de Google.

Puedes ver lo que Google, en sus directrices de PageSpeed Insights, recomienda sobre los archivos JavaScript extrenos en el apartado “Defer loading of JavaScript“.

Cómo aplazar la carga de JavaScript.
El siguiente código es lo que Google recomienda. Este código debe colocarse en el código HTML justo antes de la etiqueta < /body > (al final del archivo HTML).
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Con este código se consigue que todo el documento cargue primero y luego cargue el archivo “defer.js” externo. Hay que tener en cuenta la ruta del archivo dependiendo de dónde se coloque en el servidor. Para el código anterior, el JS externo, se encuentra en la raíz del servidor.
Instrucciones específicas para aplazar la carga de JavaScript.
  • Copia el código anterior.
  • Pega el código en el archivo HTML justo antes de la etiqueta < /body > (al final del archivo HTML).
  • Cambia el nombre “defer.js” por el nombre de tu archivo JS externo.
  • Asegúrate de que la ruta de acceso al archivo es correcta. Por ejemplo: si usas “defer.js”, el archivo “defer.js” debe estar en la misma carpeta que el archivo HTML.
¿Para qué puedes usar este código (y para qué no)?
Este código no carga el archivo externo que has especificado hasta que el documento HTML no se haya cargado. Por eso, no deberías usar este método con ningún archivo JS necesario para que la página se cargue correctamente. Debes separar los archivos JavaScript en dos grupos. Un grupo es el JavaScript que necesita la página para cargar y el segundo grupo es el JavaScript que se cargará externamente. El JavaScript que se cargará externamente debe estar puesto en un archivo externo como en el código anterior.
¿Por qué no funcionan los otros métodos?
Los métodos de procesos en línea, la colocación del código en la parte inferior del archivo HTML y el uso de los métodos “defer” o “async” no logran el objetivo de dejar cargar la página primero y luego los JS y ciertamente no funcionan de forma universal en todos los navegadores.
¿Por qué es importante?
Es importante porque Google toma en cuenta la velocidad de carga de la página como un factor de posicionamiento.
Métodos para caragr el JavaScript externo.
Métodos para caragr el JavaScript externo.
Google mide la velocidad de carga de la página desde el momento de ser llamada hasta que se carga la página. El método de colocar los JS en la parte inferior de la página, por ejemplo, muestra el contenido al usuario más rápido pero se toma en cuenta con la carga inicial de la página. Ese momento inicial de carga de la página es lo que Google utiliza para clasificar ti página web.
Conclusiónes:
  • El contenido prioritario debe ser entregado al usuario tan pronto como sea posible. No hemos estado haciendo esto por la forma en la que hemos hecho cargar el JavaScript externo de la página.
  • Un usuario no tendría por que esperar para ver el contenido debido a algún JS que está probablemente afectando la carga de la página.
  • No importa lo “asombroso” que es el pie de página de tu sitio. Esto no es razón para que un usuario tenga que desplazarse hasta el pie de página para cargar el JavaScript que hace “asombroso” el pie de página de tu sitio web.

¿Quieres más?

No te pierdas las actualizaciones del blog y recibe mas información en tu email sobre el correcto “Posicionamiento en Google“.

¡Suscríbete y mantente al día!

Suscríbete…

¿Me Compartes?
Me gustaría conocer tu opinión sobre este artículo en la sección de comentarios que encontrarás a continuación y que lo compartas para que otras personas lo puedan disfrutar. Gracias.
Share on Facebook0Tweet about this on TwitterShare on Google+0

Deja un comentario

Los campos marcados con * son obligatorios.

Borrar formularioEnviar Comentario