Quita JavaScript que bloquea la renderización

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

Descripción general

Para 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. antes de que pueda continuar analizando el HTML. En el caso de una secuencia de comandos externa, el analizador también es obligados a esperar la descarga del recurso, lo que puede generar uno o más recorridos de red y retrasar el tiempo en la primera renderización de la página Consulta Agregar interactividad con JavaScript para obtener más información sobre cómo JavaScript afecta a los elementos la ruta de acceso de renderización.

Recomendaciones

Debes evitar y minimizar el uso de bloqueo de JavaScript, especialmente las secuencias de comandos externas que se deben recuperar antes de que se ejecuten. Secuencias de comandos necesarias para renderizar el contenido de la página se puede integrar para evitar solicitudes de red adicionales; sin embargo, el contenido intercalado debe ser pequeño y deben ejecutarse rápido para ofrecer un buen rendimiento. Secuencias de comandos que no son fundamentales para la ejecución la renderización debe ser asíncrona o postergar hasta después de la primera renderización. Recuerda que, para que esto mejore el tiempo de carga, también debes optimizar la entrega del CSS.

JavaScript intercalado

Las secuencias de comandos de bloqueo externas obligan al navegador a esperar a que se recupere JavaScript. lo que puede sumar uno o más recorridos de la red antes de que se pueda renderizar la página. Si el servidor de son pequeñas, puede insertar el contenido directamente en el documento HTML y evitar las latencia de solicitud de red. Por ejemplo, si el documento HTML se ve 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 */
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>
Intercalar el contenido de la secuencia de comandos elimina la solicitud externa de small.js y permite el navegador para acelerar el tiempo de la primera representación. Sin embargo, ten en cuenta que la incorporación también aumenta el tamaño del documento HTML y que quizás sea necesario intercalar el mismo contenido de la secuencia de comandos 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 Evita que JavaScript bloquee el analizador. Te recomendamos que uses HTML async. en secuencias de comandos externas. Por ejemplo: 
<script async src="my.js">
Consulta Bloqueo del analizador frente a 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 un orden especificado y que no deben usar document.write Secuencias de comandos que dependen del orden de ejecución o que necesitan acceder o modificar Es posible que sea necesario reescribir el DOM o el CSSOM de la página para tener en cuenta estas restricciones.

Cómo posponer la carga de JavaScript

Es posible que la carga y ejecución de secuencias de comandos que no sean necesarias para la renderización inicial de la página se posponen hasta que finalizan la renderización inicial u otras partes críticas de la página. cargando. 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 para agregar interactividad adicional, animaciones y otros efectos. Sin embargo, muchas de estas se pueden agregar de forma segura después de que se renderiza el contenido de la mitad superior de la página. Investiga el funcionamiento de este JavaScript para que 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 está construido con JavaScript del cliente, deberías investigar la integración de los módulos de JavaScript relevantes para evitar de ida y vuelta por la red. Del mismo modo, aprovechar la renderización del servidor puede Mejorar el rendimiento de carga de la primera página: Renderizar plantillas de JavaScript en el servidor para entregar realizar una renderización rápida primero y, luego, usar plantillas del cliente una vez que se cargue la página. Para ver más información sobre el procesamiento del servidor, consulta http://youtu.be/VKTWdaupft0?t=14m28s.

Comentarios

¿Te sirvió esta página?