Eliminar JavaScript que bloquea el procesamiento

Esta regla se activa cuando PageSpeed ​​​​Insights detecta que sus referencias HTML bloquearon archivos JavaScript externos (ubicados en la parte superior de la página).

descripción general

El navegador debe analizar una página web antes de poder presentarla al usuario. Si el navegador encuentra un script externo bloqueado por el sistema durante el análisis, debe detener el análisis y descargar JavaScript. Cada vez que esto sucede, el navegador agrega un viaje de ida y vuelta a la red, lo que introduce un retraso en el tiempo que lleva renderizar la página por primera vez.

sugerencia

Se recomienda incluir el JavaScript necesario para representar el área de la mitad superior de la página y retrasar la carga del JavaScript necesario para agregar funcionalidad adicional a la página hasta que se haya enviado el contenido de la mitad superior de la página. Tenga en cuenta que para mejorar los tiempos de carga de esta manera, también debeOptimizar el proceso de envío de CSS.

JavaScript pequeño en línea

Si los scripts externos son pequeños, puede agregarlos directamente al documento HTML. Incrustar archivos más pequeños de esta manera permite que el navegador continúe mostrando la página. Por ejemplo, si el documento HTML tiene este aspecto:

recursopequeño.jsComo sigue:

Luego puede insertar el script de la siguiente manera:

De esta manera, puedes utilizar elpequeño.jsIncrustado en el documento HTML, eliminando así solicitudes externas del mismo.

Carga diferida de JavaScript

Para evitar que JavaScript bloquee la carga de la página, se recomienda utilizar el atributo asincrónico HTML al cargar JavaScript. Por ejemplo:

Si su recurso de JavaScript utiliza document.write, no es seguro utilizar la carga asincrónica. Le recomendamos que reescriba los scripts que utilizan document.write para utilizar otras técnicas.

Además, al cargar JavaScript de forma asincrónica, si su página carga secuencias de comandos que dependen entre sí, tenga cuidado de asegurarse de que su aplicación cargue las secuencias de comandos en el orden correcto de dependencias.

Preguntas frecuentes

¿Qué pasa si estoy usando una biblioteca de JavaScript como jQuery?

Muchas bibliotecas de JavaScript, como jQuery, se pueden utilizar para mejorar las páginas web, agregando interactividad adicional, animaciones y otros efectos a las páginas web. Sin embargo, la mayoría de estos comportamientos se pueden agregar de forma segura después de que se haya renderizado el contenido de la mitad superior de la página. Considere si es posible retrasar la ejecución y carga de dicho JavaScript hasta que se cargue la página.

¿Qué pasa si uso un marco de JavaScript para construir mi página web?

Si el contenido de su página está construido con JavaScript del lado del cliente, debe considerar si puede incrustar los módulos de JavaScript asociados para evitar un viaje de ida y vuelta adicional en la red. Del mismo modo, utilizar la representación del lado del servidor puede mejorar significativamente el rendimiento de carga de la primera página al representar plantillas JS en el servidor e incrustar los resultados en HTML y luego usar plantillas del lado del cliente después de que se cargue la aplicación. Para obtener más información sobre la representación del lado del servidor, consultehttp://youtu.be/VKTWdaupft0?t=14m28s.

 

Salvo que se indique lo contrario, el contenido de esta página tiene licencia bajo laLicencia Creative Commons Atribución 3.0y los ejemplos de código tienen licencia bajo laLicencia Apache 2.0Para más detalles, consulte nuestraPolíticas del sitio.