Optimizar la entrega de CSS: una sugerencia de Google

Google sugiere usar CSS muy importantes en línea en el encabezado y otros CSS dentro de .

Esto plantea algunas preguntas en mi mente:

  • Cómo priorizar CSS en dos archivos. Todo para esa página parece importante. Pantalla, fuente, etc. Si lo muevo al fondo, entonces, ¿cómo ayuda a que la página se renderice? ¿No causará que vuelva a pintar, etc.?
  • ¿Se requiere CSS después de un evento listo para el documento? Lo tengo desde aquí .
  • ¿Cómo ‘CSS puede’ entrar en , que es para script? ¿Funcionará cuando JavaScript esté habilitado? ¿Es navegadores compatibles?

Referencia

Basado en mi lectura del enlace dado en la pregunta:

  1. Elija qué declaraciones de CSS están alineadas en función de la eliminación del efecto de Flash-of-Unstyled-Content. Por lo tanto, asegúrese de que todos los elementos de página tengan el tamaño y el color correctos. (Por supuesto, esto será imposible si usa web-fonts.)
  2. Como el CSS que no está en línea es diferible, puede cargarlo siempre que tenga sentido. DOMContentReady en DOMContentReady , en mi opinión, va en contra de esta optimización: lanzar nuevas solicitudes HTTP antes de que el documento esté completamente cargado ralentizará el rest de la carga de la página. Además, mira mi siguiente punto:
  3. El ejemplo muestra el CSS en una etiqueta noscript como una alternativa. Debajo del ejemplo, los estados de la página

El archivo small.css original se carga después de la carga de la página. es decir, usando javascript.

Si pudiera agregar mi propia opinión personal a esta pieza:

  • esta optimización parece especialmente perjudicial para la legibilidad del código: las hojas de estilo no pertenecen a noscript tags noscript y, como se señala en los comentarios, no pasa la validación.
  • Rompe cualquier posible mejora futura de las solicitudes HTTP (u otro protocolo), ya que la transacción de red está codificada de forma rígida a través de javascript.
  • Finalmente, ¿bajo qué circunstancias obtendría un aumento en el rendimiento? Tal vez si su página carga mucho contenido inicialmente oculto; Sin embargo, espero que el navegador en sí sea capaz de optimizar la carga de la página mejor que este truco.

Sin embargo, tome esto con un grano de sal. Yo dudaría en decir que Google no sabe lo que están haciendo.


Editar: nota sobre el contenido flash-of-unstyled (FOUC abreviado)

Digamos que es un bloque de texto que abarca varias líneas e incluye texto con un estilo personalizado, digamos . Ahora, diga que su CSS establecerá .my-class { font-weight:bold } . Si ese CSS no es parte de la hoja de estilo en línea, .my-class aparecerá de repente en negrita después de que la carga diferida haya finalizado . El bloque de texto puede volver a fluir, y también puede cambiar de tamaño si requiere una línea adicional.

Por lo tanto, en lugar de un flash de contenido totalmente sin estilo , tiene un destello de contenido de estilo parcial .

Por esta razón, debe tener cuidado al considerar qué CSS se difiere. Un enfoque seguro sería solo diferir el CSS que se usa para mostrar el contenido que se difiere, por ejemplo, los elementos ocultos que se muestran después de la interacción del usuario.