Reducir el tamaño del contenido de la mitad superior de la página

Esta regla se activa cuando PageSpeed ​​​​Insights detecta que se requieren viajes de ida y vuelta de red adicionales para representar el contenido de la mitad superior de la página.

descripción general

Si la cantidad de datos requerida excede el límite de la ventana de congestión inicial, el sistema necesita realizar más viajes de ida y vuelta entre el servidor y el navegador del usuario. Este problema puede retrasar significativamente la carga de páginas para los usuarios en redes con alta latencia (por ejemplo, redes móviles).

sugerencia

Para mejorar la velocidad de carga de la página, limite el tamaño de los datos (marcado HTML, imágenes, CSS y JavaScript) necesarios para representar la página en la mitad superior de la página. Para hacer esto, puedes probar los siguientes métodos:

• Estructurar HTML para que el contenido crítico de la mitad superior de la página se cargue primero
• Reducir la cantidad de datos utilizados por los recursos.

Estructurar HTML para que el contenido crítico de la mitad superior de la página se cargue primero

Cargue primero el contenido principal de la página. Estructura la página para que la respuesta inicial del servidor envíe los datos necesarios para representar rápidamente las partes críticas de la página y retrasar la representación del resto. Esto probablemente significa que tienes que dividir tu CSS en dos partes: una parte en línea que formatea la parte ATF del contenido y una parte que difiere la renderización.

Utilice los siguientes ejemplos para aprender cómo estructurar su sitio para una carga más rápida:

• Si su HTML carga widgets de terceros antes del contenido principal, primero cambie ese orden de carga al contenido principal.
• Si su sitio web utiliza un diseño de dos columnas (es decir, barra lateral de navegación más artículos) y el HTML carga primero la barra lateral y luego los artículos, considere cargar los artículos primero.

Reducir la cantidad de datos utilizados por los recursos.

Si su sitio rediseñado funciona bien en varios dispositivos y carga contenido crítico primero, utilice las siguientes técnicas para reducir la cantidad de datos necesarios para representar la página:

• Reducir el tamaño de los recursos.: Reduce el tamaño de HTML, CSS y JavaScript eliminando espacios en blanco y comentarios innecesarios. Se logra una mayor optimización mediante el uso de una herramienta que cambia el nombre de las variables en los recursos.
• considerar tanto como sea posibleUtilice CSS, no imágenes.
• habilitar la compresión

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.