CSS que bloquea la representación

De forma predeterminada, CSS se trata como un recurso que bloquea la renderización, lo que significa que el navegador no renderizará ningún contenido procesado hasta que se construya el CSSOM. Asegúrate de mantener tu CSS simple, publícalo lo más rápido posible y usa tipos y consultas de medios para desbloquear la renderización.

En la construcción del árbol de renderización, vimos que la ruta de representación crítica requiere el DOM y el CSSOM para construir el árbol de renderización. Esto genera una importante consecuencia para el rendimiento: tanto HTML como CSS son recursos que bloquean la representación. El código HTML es evidente, ya que sin el DOM no tendríamos nada para representar, pero el requisito de CSS puede ser menos obvio. ¿Qué sucedería si intentáramos renderizar una página típica sin bloquear la representación en CSS?

Resumen

  • De forma predeterminada, la CSS se trata como un recurso que bloquea la representación.
  • Los tipos de medios y las consultas de medios nos permiten marcar algunos recursos CSS como no bloqueadores de la renderización.
  • El navegador descarga todos los recursos CSS, independientemente de su comportamiento de bloqueo o no bloqueo.
NYTimes con CSS
The New York Times con CSS
NYTimes sin CSS
The New York Times sin CSS (FOUC)

El ejemplo anterior, en el que se muestra el sitio web del NYTimes con y sin CSS, demuestra por qué se bloquea la representación hasta que CSS esté disponible; sin CSS, la página es relativamente inutilizable. La experiencia de la derecha a menudo se conoce como “destello de contenido sin estilo” (FOUC). El navegador bloquea la representación hasta que cuente con el DOM y el CSSOM.

CSS es un recurso que bloquea la renderización. Envíala al cliente lo antes posible para optimizar el tiempo del primer procesamiento.

Sin embargo, ¿qué sucede si hay algunos estilos de CSS que solo se usan en ciertas condiciones, por ejemplo, cuando la página se imprime o se proyecta en un monitor grande? Sería bueno no tener que bloquear la representación en estos recursos.

Los “tipos de medios” y las “consultas de medios” de CSS nos permiten abordar estos casos de uso:

<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />

Una consulta de contenido multimedia consta de un tipo de medio y cero o más expresiones que verifican las condiciones de funciones multimedia particulares. Por ejemplo, nuestra primera declaración de hoja de estilo no proporciona un tipo de medio o una consulta, de modo que se aplica en todos los casos; es decir, siempre bloquea la renderización. Por otro lado, la segunda declaración de la hoja de estilo se aplica solo cuando se imprime el contenido (tal vez quieras reorganizar el diseño, cambiar las fuentes, etc.), y, por lo tanto, esta declaración no necesita bloquear la representación de la página cuando se carga por primera vez. Por último, la última declaración de la hoja de estilo proporciona una "consulta de medios" que ejecuta el navegador: si las condiciones coinciden, el navegador bloquea la representación hasta que la hoja de estilo se descargue y procese.

Con las consultas de medios, podemos adaptar nuestra presentación a casos de uso específicos, como visualización frente a impresión, y también a condiciones dinámicas como cambios en la orientación de la pantalla, cambio de tamaño de eventos y más. Cuando declares los recursos de tu hoja de estilo, presta mucha atención al tipo de medio y a las consultas, ya que afectan significativamente el rendimiento de la ruta de renderización crítica.

Consideremos algunos ejemplos prácticos:

<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
  • La primera declaración bloquea la renderización y coincide en todas las condiciones.
  • La segunda declaración también bloquea la representación: “all” es el tipo predeterminado, por lo que, si no especificas ningún tipo, se establece implícitamente como “all”. Por lo tanto, la primera y la segunda declaración son, en realidad, equivalentes.
  • La tercera declaración tiene una consulta de medios dinámica, que se evalúa cuando se carga la página. Según la orientación del dispositivo mientras se carga la página, retrato.css puede o no bloquear la renderización.
  • La última declaración solo se aplica durante la impresión de la página, por lo que no bloquea la renderización cuando se carga la página por primera vez en el navegador.

Por último, ten en cuenta que “bloqueo de la renderización” solo hace referencia a si el navegador debe retener la renderización inicial de la página en ese recurso. En cualquier caso, el recurso CSS se descarga de todos modos al navegador, aunque con menor prioridad para los recursos que no bloqueen la representación.

Comentarios