Esta regla se activa cuando PageSpeed Insights detecta que en tu código HTML se hace referencia a un archivo JavaScript externo que bloquea el renderizado del contenido de la mitad superior de tu página.
Descripción
Para que los navegadores puedan renderizar páginas, antes de nada tienen que analizar las etiquetas HTML con el objetivo de generar el árbol DOM.
Durante este proceso, siempre que el analizador se encuentra con una secuencia de comandos, debe detenerse y ejecutarla para poder continuar analizando el código HTML. En el caso de que detecte una secuencia de comandos externa, se ve obligado a esperar a que se descargue el recurso correspondiente, lo que puede generar ciclos de ida y vuelta de red y retrasar el primer renderizado de la página en cuestión.
Para obtener más información sobre el modo en que JavaScript afecta a la ruta de renderizado crítica, consulta el artículo
Agregar interactividad con JavaScript.
Recomendaciones
Evita o minimiza el uso de JavaScript que bloquee el renderizado de contenido, sobre todo el de secuencias de comandos externas que tienen que obtenerse para ejecutarse. Para evitar que se produzcan solicitudes de red adicionales, puedes insertar las secuencias de comandos necesarias para renderizar el contenido en el código HTML de las páginas. No obstante, para tener un buen rendimiento, asegúrate de que el contenido que insertes sea pequeño y pueda ejecutarse rápidamente. En el caso de las secuencias de comandos que no sean necesarias para hacer el renderizado inicial, haz que se procesen de manera asíncrona o que se ejecuten después del primer renderizado. Para que estos cambios mejoren los tiempos de carga, también debes
optimizar la entrega de CSS.
JavaScript insertado
Las secuencias de comando externas que bloquean el renderizado de contenido obligan a los navegadores a esperar a que se obtenga el código JavaScript correspondiente, lo que puede añadir ciclos de ida y vuelta de red antes de que puedan renderizarse las páginas. 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>
Hello, world!
</div>
</body>
</html>
Y el recurso
small.js es así:
/* contents of a small JavaScript file */
Puedes insertar la secuencia de comandos de la siguiente manera:
<html>
<head>
<script type="text/javascript">
/* contents of a small JavaScript file */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
Al insertar esta secuencia en el código, se elimina la solicitud externa de
small.js, por lo que los navegadores renderizarán esta página por primera vez más rápido. No obstante, ten en cuenta que, al insertar secuencias de comandos, aumenta el tamaño de los documentos HTML, y también es posible que tengas que insertarlas en varias páginas. Por estos motivos, te recomendamos que, para obtener el mejor rendimiento, solo insertes secuencias de comandos pequeñas.
Procesar el código JavaScript de manera asíncrona
De forma predeterminada, el código JavaScript bloquea la generación de DOM, lo que retrasa el primer renderizado. Por tanto, para que el código JavaScript no bloquee los analizadores, te recomendamos que introduzcas secuencias de comandos externas con el atributo HTML
async. Por ejemplo:
<script async src="my.js">
Para obtener más información sobre las secuencias de comandos asíncronas, consulta la sección
Diferencias entre bloquear analizadores y usar código JavaScript asíncrono.
No se garantiza que las secuencias de comandos asíncronas se ejecuten en el orden especificado; además, no se debería usar
document.write en ellas. Por tanto, es posible que se tengan que volver a programar aquellas que dependen del orden de ejecución o que necesitan modificar o acceder al DOM o el CSSOM de las páginas.
Retrasar la carga de JavaScript
Las secuencias de comandos que no sean necesarias para renderizar 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.
Preguntas frecuentes
- ¿Qué pasa si uso una biblioteca JavaScript como jQuery?
- Muchas bibliotecas JavaScript, como jQuery, se utilizan para mejorar las páginas y, así, hacerlas más interactivas y añadirles animaciones y otros efectos. Sin embargo, muchos de estos comportamientos pueden añadirse sin problemas una vez que se haya renderizado el contenido de la mitad superior de las páginas.
Prueba a renderizar este código JavaScript de manera asíncrona o a retrasar su carga.
- ¿Qué pasa si creo páginas con frameworks JavaScript?
- Si generas el contenido de páginas mediante JavaScript de cliente, prueba a insertar los módulos de JavaScript correspondientes en el código HTML para evitar que se produzcan ciclos de ida y vuelta de red adicionales. Del mismo modo, si aprovechas el renderizado por parte de servidores, es posible que se mejore significativamente el rendimiento de la primera carga de página. Para hacerlo, procesa las plantillas de JavaScript en el servidor con el objetivo de renderizar rápidamente tu página por primera vez y, cuando se haya cargado, usa las plantillas de cliente. Para obtener más información sobre el renderizado de servidores, echa un vistazo a este vídeo: http://youtu.be/VKTWdaupft0?t=14m28s.