Quitar el JavaScript que bloquea la visualización de contenido

Esta regla se activa cuando PageSpeed Insights detecta que el código HTML hace referencia a algún archivo JavaScript externo que bloquea la visualización de contenido en la mitad superior de la página.

Información general

Para que un navegador pueda mostrar una página al usuario, antes debe analizarla. Si encuentra un script externo que bloquee la visualización del contenido durante el análisis, debe detenerse y descargar el archivo JavaScript. Cada vez que sucede esto, se crea un nuevo flujo de datos en la red que retrasa la carga de la página.

Recomendaciones

El JavaScript necesario para mostrar el contenido de la parte superior de la página debería incluirse en el código HTML, y el JavaScript necesario para añadir funciones adicionales a la página debería ejecutarse después de que este contenido se haya mostrado. Ten en cuenta que, para que esto mejore el tiempo de carga, también debes optimizar la entrega de CSS.

Inserta un pequeño fragmento de JavaScript en el código

Si los scripts externos son pequeños, puedes incluirlos directamente en el documento HTML. Al insertar archivos pequeños de esta forma, el navegador pasa directamente a mostrar la página. Por ejemplo, si el documento HTML es así:

<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 el script 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>

Esto evita las solicitudes externas a small.js insertando el recurso en el código HTML.

Aplaza la carga de JavaScript

Para evitar que JavaScript bloquee la carga de la página, recomendamos usar el atributo HTML async al cargar JavaScript. Por ejemplo:

<script async src="my.js">

Si los recursos JavaScript usan document.write, no es seguro utilizar la carga asíncrona. Recomendamos que los scripts que utilizan document.write se especifiquen de nuevo de otra forma.

Además, al cargar el JavaScript de forma asíncrona, si la página carga scripts que dependen el uno del otro, hay que procurar que la aplicación cargue los scripts en el orden de dependencia adecuado.

Preguntas frecuentes

¿Qué pasa si uso una biblioteca JavaScript como jQuery?
Muchas bibliotecas JavaScript, como jQuery, se utilizan para mejorar la página y añadir más interactividad, animaciones y otros efectos. Sin embargo, muchos de estos comportamientos se pueden añadir después de que el contenido de la mitad superior de la página se haya mostrado. Prueba a cambiar el momento de la ejecución y la carga del JavaScript correspondiente después de que cargue la página.
¿Qué pasa si uso un entorno de JavaScript para la construcción de la página?
Si el contenido de la página se construye mediante JavaScript en el equipo cliente, entonces deberías probar a insertar los módulos de JavaScript correspondientes en el código HTML para evitar flujos de datos adicionales en la red. Del mismo modo, si el procesamiento se realiza en el servidor, es posible que mejore significativamente el tiempo de la primera carga de la página. Para ello, procesa las plantillas de JS en el servidor, inserta los resultados en el código HTML y luego usa las plantillas del equipo cliente cuando se haya cargado la aplicación. Para obtener más información sobre el procesamiento en el servidor, puedes ver este vídeo: http://youtu.be/VKTWdaupft0?t=14m28s.