rocket - "Elimina el CSS que bloquea la visualización en el contenido de la mitad superior de la página"
quitar el javascript que bloquea el renderizado de contenido wordpress (6)
He estado usando las estadísticas de Google PageSpeed para intentar mejorar el rendimiento de mi sitio, y hasta ahora se ha demostrado que es extremadamente exitoso. Cosas como diferir guiones funcionó maravillosamente, ya que ya tenía una versión interna de .ready() de jQuery para aplazar los guiones hasta que la página se cargó por completo, todo lo que tenía que hacer era poner en línea esa función en particular y mover los guiones completos hasta el 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 el CSS que bloquea la visualización en el contenido de la mitad superior de la página".
La forma en que está configurado mi CSS es tener un archivo global _.css 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 del sitio. La mayoría de las páginas tienen un archivo CSS asociado (por ejemplo, party.php tiene party.css ) que contiene estilos específicos para esa página en particular. Todos los archivos CSS se almacenan en caché de forma indefinida, ya que /t=FILEMTIME a los nombres de los archivos (y luego los /t=FILEMTIME con .htaccess) para garantizar que los archivos se actualicen cuando se modifiquen.
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á arriba de la mitad! La gente odia el desplazamiento, especialmente en un juego que implica cargar muchas páginas. Así que diseñé el sitio para que quepase en una pantalla (suponiendo una resolución lo suficientemente buena). Entonces eso significa ... ¡ 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 un puntaje casi perfecto?
Cómo obtuve un 99/100 en Google Page Speed (para dispositivos móviles)
TLDR: comprima e incruste todo su script css entre sus etiquetas <style></style> .
He estado persiguiendo ese elusivo puntaje de 100/100 durante aproximadamente una semana. Al igual que usted, el último artículo restante fue eliminar "css con bloqueo de representación para el contenido por encima del pliegue".
Sin duda hay una solución fácil? Nop. Probé la solución loadCSS del grupo Filament . Demasiado .js para mi gusto.
¿Qué pasa con los atributos async para css (como js)? Ellos no existen.
Estaba listo para darme por vencido. Entonces me di cuenta. Si vincular el script estaba bloqueando el procesamiento, ¿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 absolutamente INCORRECTO incorporar 1263 líneas de CSS en mi etiqueta de estilo. Pero lo 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. Pellizqué el CSS en las etiquetas <style>your;great-wall-of-china-long;css;here</style> en 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 tú). Pero SOLUCIONÓ el problema. Solo lo estoy usando en mi página de inicio por ahora e incluido el CSS comprimido programáticamente a través de PHP include.
YMMV (su millaje puede variar) dependiendo de la duración de su css. Google puede tirar demasiado por encima del doble contenido. Pero no asumas; ¡prueba!
Notas
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.
Su css no se almacenará en caché. Aunque no estoy demasiado preocupado. En el segundo momento en que golpeen otra página de mi sitio, el archivo .css se almacenará en caché (ver Nota 1).
Algunos consejos que pueden ayudar:
Me encontré con este artículo en la optimización de CSS ayer: perfiles de CSS para ... optimización
Una gran cantidad de información útil sobre CSS y qué CSS causa el mayor drenaje de rendimiento.Vi la siguiente presentación en jQueryUK sobre "secretos ocultos" en Googe Chrome (Canary) Dev Tools: DevTools puede hacer eso . Eche un vistazo a las secciones sobre Tiempo para la primera pintura , repintados y CSS costosos.
Además, si está utilizando un cargador como requireJS , puede echar un vistazo a uno de los complementos del cargador de CSS, llamado require-CSS , que utiliza 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 caso en caso.
Desactivada la pregunta: en segundo lugar, @Enzino creó un sprite para todos los iconos pequeños que está cargando. Los tamaños de archivo son tan pequeños que en realidad no garantiza un servidor de ida y vuelta para cada icono. También tenga en cuenta que la cantidad total de solicitudes HTTP concurrentes que puede hacer el navegador. Por lo tanto, las solicitudes de un número mayor de íconos pequeños también son "bloqueadores". Aunque una página vacía se compara con la tuya, me gusta cómo se carga duckduckgo por ejemplo.
Considere usar un paquete para generar automáticamente estilos en línea desde sus archivos css. Una buena es Grund Critical o Critical css para Laravel .
Por favor, eche un vistazo en la siguiente página https://varvy.com/pagespeed/render-blocking-css.html . Esto me ayudó a deshacerme de "Render Blocking CSS" . Utilicé el siguiente código para eliminar " Renderizar bloqueo CSS ". Ahora, en la información de la velocidad de la página de google, no recibo problemas relacionados con el procesamiento de bloqueos 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>
Se ha realizado una pregunta relacionada anteriormente: ¿Qué es el "contenido de la mitad superior de la página" en la velocidad de la página de Google?
En primer lugar, debe tener en cuenta que todo esto se trata de " páginas móviles ".
Entonces, cuando interpreté tu pregunta y tu captura de pantalla correctamente, ¡esto no es para tu sitio!
Por el contrario, hacer algunas de las cosas aconsejadas por Google en sus directrices empeorarán las cosas 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 en los elementos reemplazados en su CSS, para que el navegador pueda diseñar los elementos y no tenga que esperar al contenido reemplazado!
Además, ¿por qué utilizas 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 de las que uno siempre debe ocuparse son:
- reducir la cantidad de solicitudes tanto como sea posible
- Mantenga su peso general de la página lo más bajo posible
¡Y no confunda su cerebro sobre 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 Optimize CSS Delivery .
Como dije antes, ¡no creo que esto no sea realista ni que tenga sentido para un sitio web "normal"! Debido principalmente a que tiene un diseño web receptivo , es muy cierto que utiliza consultas de medios y otros estilos de diseño. Entonces, si no vas a cargar tu CSS primero y de forma bloqueante obtendrás 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 una nueva "exageración" (cuando eche un vistazo a toda la pregunta al respecto aquí en ) ...!
Yo también he tenido problemas con esta nueva métrica de velocidad de página.
Aunque no he encontrado una forma práctica de recuperar mi puntaje hasta un 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.
La única otra cosa en la que podía pensar era enlistar todo el CSS necesario (que parece ser la mayor parte - al menos para mis páginas) en la primera página para obtener el dulce puntaje alto. Aunque puede ayudar a su puntaje de velocidad, esto probablemente hará que su página cargue más despacio.