¿Qué es el "contenido de la mitad superior de la página" en Google Pagespeed?

Hasta hace poco, mi sitio (www.heatexchangers.ca) obtuvo un 98% en Google Page Speed. Hubo un par de cosas sobre las que no pude hacer nada, como la cadena de consulta de las fuentes web. Estaba muy feliz con esto, ya que representaba todo lo que podía hacer.

Recientemente, Google agregó algo más que afecta el puntaje de velocidad de la página y ahora solo obtengo el 89% en Velocidad de página y recibo esta sugerencia:

• Elimine JavaScript y CSS de bloqueo de renderizado externo en el contenido de la mitad superior de la página.

La sugerencia para solucionar esto parece implicar la exploración de todos mis archivos .css y .js y separar algunas partes de ellos y agregarlos en línea a mi html. Esto me está causando cierta confusión, ya que tenía la impresión de que debemos mantener la mayor cantidad posible de JS y CSS fuera del HTML.

¿Qué es exactamente el contenido "Above the Fold"? Si se trata de algunos estilos, como la fuente, el color de fondo, etc. entonces puedo ver que podría no ser un gran problema incluir en línea. No he podido encontrar una lista de exactamente qué es esto.

Esto se debe a que Google recientemente cambió la herramienta de velocidad de la página para reflejar mejor una web cada vez más móvil. Las redes de datos móviles tienen características de rendimiento diferentes que las cableadas o wifi, por lo que debe hacer diferentes cosas para optimizarlas.

Above-the-fold (ATF) es simplemente el valor de la primera pantalla: cualquier cosa que no necesite desplazarse para ver. Obviamente, esto varía según el dispositivo y su orientación, por lo que es posible que deba generalizar y tal vez encontrar algunas opciones comunes viables, tal vez una dirigida a teléfonos inteligentes, una para tabletas y otra para computadoras de escritorio más grandes.

En cuanto a qué CSS están hablando, realmente tienen la intención de todo el CSS necesario para diseñar completamente cualquier contenido que se muestre ATF. Para determinar el tiempo de carga de su contenido ATF, tomarán una captura de pantalla de la versión final y la compararán visualmente con la página a medida que se carga y cuando sea lo suficientemente similar, considerarán que el punto donde el contenido ATF está cargado.

Esta es una presentación en video de Google sobre este tema:

http://www.youtube.com/watch?v=YV1nKLWoARQ

El énfasis está en hacer que los usuarios hagan algo en el primer segundo. El razonamiento detrás de poner el CSS para el contenido ATF directamente en el HTML refleja su investigación sobre el rendimiento de los datos móviles que muestra que si el CSS no está allí, no se cargará lo suficientemente pronto como para estar dentro del primer segundo.

También proporcionan enlaces a herramientas que pueden automatizar algo de esto. No los he probado y YMMV.

Las estadísticas de la página de Google le dirán claramente cuánto% de css que hace referencia al contenido sobre el pliegue se carga demasiado tarde y la página podría haberse procesado antes. De lo que podría mover partes de CSS para lograr un resultado verde. puedo hacerlo por ti: goo.gl/GsRxNc

un enlace de Google que describe "por encima del pliegue" https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

El contenido de la mitad superior de la página es la parte de la página web que es visible en una ventana del navegador cuando se carga la página por primera vez. Google quiere ver CSS en línea extraído de su archivo CSS principal e inyectado en la etiqueta principal, permitiendo que todo lo que ve primero se cargue primero.

fuente: https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first .

Se refieren a js de bloqueo de renderizado, como análisis o código de seguimiento, por lo que sugieren colocar esos scripts de "cargarme antes de todo lo demás" en el pie de página, ya que luego se cargarán una vez que el usuario tenga el sitio en la pantalla.