Quita JavaScript que bloquea la renderización

Esta regla se activa cuando PageSpeed Insights detecta que tu código HTML hace referencia a un archivo JavaScript externo de bloqueo en la mitad superior de la página.

Descripción general

Antes de que el navegador pueda representar una página, debe compilar el árbol del DOM analizando el lenguaje de marcado HTML. Durante este proceso, cada vez que el analizador encuentra una secuencia de comandos, debe detenerla y ejecutarla para poder seguir analizando el código HTML. En el caso de una secuencia de comandos externa, el analizador también debe esperar a que se descargue el recurso, lo que puede generar uno o más recorridos de la red y demorar el primer procesamiento de la página. Consulta Cómo agregar interactividad con JavaScript para obtener más información sobre cómo JavaScript afecta la ruta de renderización crítica.

Recomendaciones

Debes evitar y minimizar el uso de JavaScript de bloqueo, especialmente las secuencias de comandos externas que se deben recuperar antes de que puedan ejecutarse. Las secuencias de comandos que son necesarias para renderizar el contenido de la página se pueden intercalar con el fin de evitar solicitudes de red adicionales. Sin embargo, el contenido intercalado debe ser pequeño y ejecutarse con rapidez para ofrecer un buen rendimiento. Las secuencias de comandos que no son fundamentales para la renderización inicial deben convertirse en asíncronas o aplazarse hasta después de la primera renderización. Ten en cuenta que, para mejorar el tiempo de carga, también debes optimizar la entrega de CSS.

JavaScript intercalado

Las secuencias de comandos de bloqueo externas obligan al navegador a esperar a que se recupere JavaScript, lo que puede agregar uno o más recorridos de la red antes de que se pueda renderizar la página. Si las secuencias de comandos externas son pequeñas, puedes intercalar su contenido directamente en el documento HTML y evitar la latencia de la solicitud de red. Por ejemplo, si el documento HTML tiene el siguiente aspecto: 
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
Y el recurso small.js es como el siguiente: 
  /* contents of a small JavaScript file */
Luego, puedes intercalar 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>
Si alineas el contenido de la secuencia de comandos, se eliminará la solicitud externa de small.js y permite que el navegador acelere el tiempo de primer procesamiento. Sin embargo, ten en cuenta que el intercalado también aumenta el tamaño del documento HTML y que es posible que el mismo contenido de la secuencia de comandos deba integrarse en varias páginas. Como resultado, solo debes intercalar secuencias de comandos pequeñas para ofrecer el mejor rendimiento.

Haz que JavaScript sea asíncrono

De forma predeterminada, JavaScript bloquea la construcción del DOM y, por lo tanto, retrasa el tiempo de la primera representación. Para evitar que JavaScript bloquee el analizador, recomendamos usar el atributo HTML async en secuencias de comandos externas. Por ejemplo: 
<script async src="my.js">
Consulta Bloqueo del analizador en comparación con JavaScript asíncrono para obtener más información sobre las secuencias de comandos asíncronas. Ten en cuenta que no se garantiza que las secuencias de comandos asíncronas se ejecuten en el orden especificado y no deben usar document.write. Es posible que las secuencias de comandos que dependen del orden de ejecución o que necesiten acceder o modificar el DOM o CSSOM de la página deban volver a escribirse para tener en cuenta estas restricciones.

Aplaza la carga de JavaScript

La carga y ejecución de secuencias de comandos que no son necesarias para la renderización inicial de la página puede diferirse hasta que haya terminado de cargarse la renderización inicial o cualquier otra parte crítica de la página. Esto puede ayudar a reducir la contención de recursos y mejorar el rendimiento.

Preguntas frecuentes

¿Qué sucede si uso una biblioteca de JavaScript como jQuery?
Muchas bibliotecas de JavaScript, como JQuery, se usan para mejorar la página y agregar interactividad, animaciones y otros efectos adicionales. Sin embargo, muchos de estos comportamientos se pueden agregar de forma segura después de renderizar el contenido de la mitad superior de la página. Investiga cómo hacer que ese lenguaje JavaScript sea asíncrono o aplaza su carga.
¿Qué sucede si uso un framework de JavaScript para construir la página?
Si el contenido de la página se construye con JavaScript del cliente, deberías investigar la incorporación de los módulos de JavaScript relevantes para evitar recorridos de red adicionales. De manera similar, aprovechar el procesamiento del servidor puede mejorar significativamente el rendimiento de carga de la primera página: renderiza plantillas de JavaScript en el servidor para entregar un primer procesamiento rápido y, luego, usa plantillas del cliente una vez que se carga la página. Para obtener más información sobre la renderización del servidor, consulta http://youtu.be/VKTWdaupft0?t=14m28s.

Comentarios

¿Te sirvió esta página?