En esta entrada te enseñamos como optimizar la carga de tu sitio web cuando PageSpeed Insights detecta que en tu código HTML se hace referencia a un archivo JavaScript externo que bloquea el renderizado del contenido ubicado en la mitad superior de tu página.
¡El problema!
Los navegadores comienzan haciendo el barrido de nuestro sitio web analizando las etiquetas HTML con el objetivo de generar el árbol jerárquico del DOM (“Modelo de Objetos del Documento” en español) el cual es un modelo estándar sobre cómo pueden combinarse los objetos de nuestro sitio, además de ser una interfaz para acceder a ellos y manipularlos. Al hacer este proceso el analizador se encuentra con una secuencia de comando donde debe de detenerse y analizarlos. Cuando detecta una secuencia de comandos externa, tiene que esperar a que se descargue el recurso correspondiente para poder continuar, sin embargo esto puede retrasar el renderizado.
Consejos
Evitar el uso de: JavaScript de secuencias externas que tienen que descargarse para ejecutarse, con esto evitarás solicitudes de red innecesarias sin embargo puedes insertar las secuencias de comandos necesarias para tu sitio web.
Otro punto importante, es que te asegures que el contenido que insertes sea pequeño y pueda ejecutarse rápidamente con el fin de acelerar la carga.
Para las secuencias de comandos que no sean necesarias para la ejecución inicial, puedes hacer que se procesen de manera asíncrona.
Inserta los comandos de JavaScript
Como mencionamos anteriormente los conjuntos de comandos de JavaScript externos pueden retrasar o detener la carga de nuestro sitio web. Si son secuencias pequeñas, pueden insertarse directamente en los documentos HTML para evitar la latencia de las solicitudes de red. Por ejemplo, si tienes este documento HTML:
<html>
<head>
<script type="text/javascript"
src="small.js"></script>
</head>
<body>
<div>
Hola Mundo!
</div>
</body>
</html>
Puedes insertar la secuencia de comandos ubicados en small.js de la siguiente forma:
<html>
<head>
<script type="text/javascript">
escribe el código corto aquí
</script>
</head>
<body>
<div>
Hola Mundo!
</div>
</body>
</html>
Recuerda solo insertar las cadenas de comando más pequeñas, ya que en caso contrario aumentaría el tamaño de los documentos HTML y podría volverse más confuso, menos limpio a la vista y ser más propenso a errores humanos.
Procesar el código JavaScript de manera asíncrona
Para que el código JavaScript no bloquee la generación del DOM en el primer renderizado, se recomienda utilizar el atributo HTML async en los archivos que no tengan interacción con el primer renderizado, se usa de la siguiente forma:
<script async type="text/javascript"
src="small.js"></script>
Al utilizar este atributo no se garantiza que las secuencias de comandos asíncronas se ejecuten en un orden específico. También se recomienda no usar document.write en ellas, solo en las que si necesiten ejecutarse en un orden específico.
Retrasar la carga de JavaScript
Las secuencias de comandos JavaScript que no sean necesarias para renderizar o cargar páginas por primera vez, pueden cargarse y ejecutarse una vez que se haya completado el primer renderizado o se hayan cargado otras partes más importantes. De este modo, se pueden reducir conflictos de recursos y mejorar el rendimiento.
Si necesitas que tu sitio o página web sean optimizados, ¡contáctanos! Realizamos el análisis de tu sitio y te proporcionamos soluciones con presupuesto a tu medida.
Fuente, Google.¿Tienes alguna duda o comentario?