He estado utilizando la información de Google PageSpeed ​​para tratar de mejorar el rendimiento de mi sitio, y hasta ahora ha demostrado ser extremadamente exitoso. Cosas como diferir los scripts funcionaron maravillosamente, ya que ya tenía una versión interna de jQuery's .ready()para diferir los scripts hasta que la página se hubiera cargado por completo, todo lo que tenía que hacer era alinear esa función en particular y mover los scripts completos al final de la página. Eso funcionó muy bien.

Pero ahora me encuentro mirando el único punto amarillo que queda en la lista de verificación: "Eliminar CSS de bloqueo de renderizado en el contenido de la mitad superior de la página".

La forma en que se configura mi CSS es tener un _.cssarchivo global que contenga estilos que se apliquen a la estructura de la página en general, o que se usen en más de uno o dos lugares en todo el sitio. La mayoría de las páginas tienen un archivo CSS asociado (por ejemplo, party.phptiene party.css) que contiene estilos específicos de esa página en particular. Todos los archivos CSS se almacenan en caché indefinidamente, ya que agrego /t=FILEMTIMEnombres de archivo (y luego los elimino con .htaccess) para garantizar que los archivos se actualicen cuando se cambien.

De todos modos, Google recomienda incluir estilos críticos necesarios para el contenido de la mitad superior de la página. El problema es ... bueno, eche un vistazo a esta captura de pantalla: http://prntscr.com/1qt49e

Como puede ver ... ¡ TODO el contenido está en la mitad superior de la página! La gente odia el desplazamiento, especialmente en un juego que implica cargar muchas páginas. Así que diseñé el sitio para que quepa en una pantalla (suponiendo una resolución suficientemente buena). Eso significa que ... ¡ TODOS los estilos se aplican al contenido de la mitad superior de la página! Entonces ... ¿hay alguna solución? ¿O estoy atrapado con esa marca amarilla en una puntuación casi perfecta?

Ya se ha hecho una pregunta relacionada: ¿Qué es el "contenido de la mitad superior de la página" en Google Pagespeed?

En primer lugar, debe tener en cuenta que esto se trata de ' páginas móviles '.
Entonces, cuando interpreté su pregunta y captura de pantalla correctamente, ¡esto no es para su sitio!

Por el contrario, si hace algunas de las cosas recomendadas por Google en sus directrices, las cosas empeorarán aún más para los sitios web "normales".
Y no todo lo que proviene de Google es el "santo grial" solo porque proviene de Google. Y ellos mismos no son un buen modelo a seguir si echas un vistazo a su marcado HTML.

El mejor consejo que podría darte es:

• ¡Establezca el ancho y la altura de los elementos reemplazados en su CSS, de modo que el navegador pueda diseñar los elementos y no tenga que esperar el contenido reemplazado!

Además, ¿por qué utiliza diferentes archivos CSS, en lugar de solo uno?
La solicitud adicional es peor que la pequeña cantidad de volumen de datos. Y después de la primera solicitud, el archivo CSS se almacena en caché de todos modos.

Las cosas que uno siempre debe cuidar son:

• reducir la cantidad de solicitudes tanto como sea posible
• mantenga el peso total de su página lo más bajo posible

¡Y no se preocupe por saber cómo obtener el 100% de la herramienta PageSpeed ​​Insights de Google ...! ;-)

Adición 1: Aquí está la página en la que Google nos muestra, lo que recomiendan para Optimizar la entrega de CSS .

Como dije antes, ¡no creo que esto no sea realista ni tenga sentido para un sitio web "normal"! Porque principalmente cuando tiene un diseño web receptivo, lo más seguro es que use consultas de medios y otros estilos de diseño. Entonces, si no va a cargar su CSS primero y de manera bloqueante, obtendrá un FOUT ( Flash Of Unstyled Text ). ¡Realmente no creo que esto sea "mejor" que al menos algunos milisegundos más para renderizar la página!

¡Imho Google está comenzando un nuevo "bombo" (cuando eche un vistazo a todas las preguntas al respecto aquí en Stackoverflow) ...!

Cómo obtuve un 99/100 en Google Page Speed ​​(para dispositivos móviles)

TLDR: comprime e incrusta todo tu script css entre tus <style></style>etiquetas.

He estado persiguiendo esa esquiva puntuación de 100/100 durante aproximadamente una semana. Al igual que usted, el último elemento restante fue eliminar "CSS de bloqueo de renderizado para el contenido de la mitad superior de la página".

Seguramente hay una solución fácil? No Probé loadCSS de grupos de filamentos solución. Demasiado .js para mi gusto.

¿Qué pasa con los asyncatributos de css (como js)? No existen

Estaba listo para rendirme. Entonces me di cuenta. Si vincular el script estaba bloqueando el render, ¿qué pasaría si en su lugar incrustara todo mi CSS en la cabeza? De esa manera no había nada que bloquear.

Parecía totalmente INCORRECTO incorporar 1263 líneas de CSS en mi etiqueta de estilo. Pero le di un giro. Lo comprimí (y lo prefijé) primero usando:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ Vea el paquete postcss de NPM .

Ahora era solo una larga línea de CSS sin espacio. Coloqué el CSS en las <style>your;great-wall-of-china-long;css;here</style>etiquetas de mi página de inicio. Luego volví a analizar con información sobre la velocidad de la página.

¡Pasé de 90/100 a 99/100 en el móvil!

Esto va en contra de todo en mí (y probablemente en usted). Pero resolvió el problema. Solo lo estoy usando en mi página de inicio por ahora e incluyo el css comprimido mediante programación a través de un PHP incluido.

YMMV (su millaje puede variar) pendiente de la duración de su css. Es posible que Google te diga demasiado por encima del contenido del pliegue. Pero no asumas; ¡prueba!

Notas

1. Solo estoy haciendo esto en mi página de inicio por ahora para que la gente obtenga un render RÁPIDO en mi página más importante.

2. Su CSS no se almacenará en caché. Sin embargo, no estoy demasiado preocupado. En el momento en que lleguen a otra página en mi sitio, el .css se almacenará en caché (ver Nota 1).

Pocos consejos que pueden ayudar:

• Ayer me encontré con este artículo sobre optimización de CSS: perfiles de CSS para ... optimización
  Mucha información útil sobre CSS y qué CSS causa la mayor pérdida de rendimiento.

• Vi la siguiente presentación en jQueryUK sobre "secretos ocultos" en Googe Chrome (Canary) Dev Tools: DevTools puede hacer eso . Consulte las secciones sobre Tiempo para la primera pintura , repintado y costoso CSS.

• Además, si está utilizando un cargador como requireJS , podría echar un vistazo a uno de los complementos del cargador CSS, llamado require-CSS , que usa CSSO , un optimizador que también hace optimización estructural, por ejemplo. fusionando bloques con propiedades idénticas. Lo usé varias veces y puede ahorrar bastante CSS de un caso a otro.

Fuera de la cuestión: segundo @Enzino en la creación de un sprite para todos los pequeños iconos que está cargando. El tamaño de los archivos es tan pequeño que realmente no garantiza un viaje de ida y vuelta al servidor para cada ícono. También tenga en cuenta el número total de solicitudes http simultáneas que puede hacer el navegador. Por lo tanto, las solicitudes de un mayor número de iconos pequeños también están "bloqueando el renderizado". Aunque una página vacía se compara con la tuya, me gusta cómo se carga duckduckgo, por ejemplo.

Eche un vistazo a la siguiente página https://varvy.com/pagespeed/render-blocking-css.html . Esto me ayudó a deshacerme de "Render Blocking CSS" . Usé el siguiente código para eliminar " Render Blocking CSS ". Ahora en la página de google speed insight no obtengo problemas relacionados con el bloqueo de renderizado css.

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

Yo también he luchado con esta nueva métrica de velocidad de página.

Aunque no he encontrado una forma práctica de recuperar mi puntaje de hasta 100%, hay algunas cosas que he encontrado útiles.

La combinación de todos los CSS en un archivo ayudó mucho. Todos mis sitios tienen una copia de seguridad de% 95 -% 98.

Lo único que se me ocurrió fue incluir todos los css necesarios (que parecen ser la mayoría, al menos para mis páginas) en la primera página para obtener la mejor puntuación. Aunque puede ayudar a su puntaje de velocidad, esto probablemente hará que su página se cargue más lentamente.

La solución óptima para 2019 para esto es HTTP / 2 Server Push .

No necesita soluciones jacky de jacky o estilos en línea. Sin embargo, necesita un servidor que admita HTTP 2.0 (cualquier versión de servidor moderna lo hará), que a su vez requiere que su servidor ejecute SSL. Sin embargo, con Let's Encrypt no hay razón para no usar SSL de todos modos.

Mi sitio https://r.je/ tiene un puntaje de 100/100 para dispositivos móviles y de escritorio.

La razón de estos errores es que el navegador obtiene el HTML, luego tiene que esperar a que se descargue el CSS antes de que la página se pueda procesar. Usando HTTP2 puede enviar tanto el HTML como el CSS al mismo tiempo.

Puede usar HTTP / 2 push configurando el encabezado Link.

Ejemplo de Apache (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

Para NGINX, puede agregar el encabezado a su etiqueta de ubicación en la configuración del servidor:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

Con este conjunto de encabezados, el navegador recibe el HTML y CSS al mismo tiempo, lo que impide que CSS bloquee la representación.

Deberá ajustarlo para que el CSS solo se envíe en la primera solicitud, pero el encabezado del enlace es la solución más completa y menos hacky para "Eliminar el bloqueo de renderizado Javascript y CSS"

Para una discusión detallada, eche un vistazo a mi publicación aquí: elimine el bloqueo de renderizado CSS utilizando HTTP / 2 Push

Considere usar un paquete para generar automáticamente estilos en línea a partir de sus archivos CSS. Una buena es Grunt Critical o Critical css para Laravel .

Hola para jQuery Solo puedes usarlo así

Use async y type = "text / javascript" solamente