javascript - minimizar - minify js
¿Qué es el "contenido de la mitad superior de la página" en Google Pagespeed? (3)
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 contento con esto ya que esto 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% de Page Speed y obtengo esta sugerencia:
- Elimina JavaScript y CSS de bloqueo de representación externo en el contenido de la mitad superior de la página.
La sugerencia de arreglar esto parece implicar el trolling a través 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 tanto JS como CSS fuera del HTML como sea posible.
¿Qué es exactamente el contenido "por encima del doblez"? Si se trata de algunos estilos, como fuente, color de fondo, etc. entonces puedo ver que podría no ser un gran problema para incluir en línea. No he podido encontrar una lista de exactamente qué es esto.
Esto se debe a que Google cambió recientemente la herramienta de velocidad de página para reflejar mejor una red móvil cada vez más. Las redes de datos móviles tienen diferentes características de rendimiento que las conexiones por cable o wifi, por lo que debe hacer diferentes cosas para optimizarlas.
Por encima de la mitad (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 tenga que generalizar y quizás encontrar algunas opciones comunes viables, tal vez una dirigida a teléfonos inteligentes, una para tabletas y una para escritorios más grandes.
En cuanto a los CSS de los que están hablando, realmente pretenden todo el CSS necesario para personalizar completamente el contenido que se muestra 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 mientras se carga y, cuando sea lo suficientemente parecida, considerarán ese punto donde el contenido de 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 dentro del primer segundo. El razonamiento detrás de poner el CSS para el contenido de ATF directamente en el HTML refleja su investigación sobre el rendimiento de 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 ni a YMMV.
Las estadísticas de la página de google le indicarán claramente cuántos% de los css que envían el contenido que está arriba del doblez se están cargando demasiado tarde y la página se pudo haber rendido antes. Entonces podrías mover partes de CSS para lograr un resultado verde. Puedo hacerlo por ti: goo.gl/GsRxNc
un enlace de Google que describe ''arriba de la página'' https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
Se refieren a js que bloquean el renderizado, como análisis o código de seguimiento, por lo que sugieren colocar esos scripts "cargarme antes que 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 pantalla.