content-visibility: la nueva propiedad de CSS que mejora el rendimiento de su renderización

Omite la renderización del contenido fuera de pantalla para mejorar el tiempo de carga inicial.

Una Kravets

Jeremy Wagner

Vladimir Levin

El content-visibility de Google, que se lanza en Chromium 85, podría ser uno de los nuevos CSS para mejorar el rendimiento de carga de página. content-visibility permite que el agente de usuario omita el trabajo de renderización de un elemento, incluido el diseño y la pintura, hasta que sea necesario. Debido a que se omite la renderización, si una gran parte de tu el contenido está fuera de la pantalla, cuando se aprovecha la propiedad content-visibility, se hace que la la carga inicial del usuario mucho más rápido. También permite interacciones más rápidas con los el contenido en pantalla. Muy bien.

Navegadores compatibles

content-visibility se basa en primitivas dentro de la contención de CSS Especificación. Si bien content-visibility es solo compatible con Chromium 85 por ahora (y se considera " prototipado” para Firefox), las especificaciones de contención son compatibles con las versiones más del navegador.

Contención de CSS

El objetivo clave y general de la contención de CSS es habilitar la renderización mejoran el rendimiento del contenido web al ofrecer un aislamiento predecible de un subárbol del DOM del resto de la página.

Básicamente, un desarrollador puede indicarle a un navegador qué partes de la página están encapsuladas como un conjunto de contenido, lo que permite a los navegadores razonar sobre el contenido sin la necesidad de considerar el estado fuera del subárbol. Saber qué fragmentos de contenido (subárboles) contienen contenido aislado significa que el navegador puede tomar decisiones de optimización para la renderización de páginas.

Existen cuatro tipos de CSS contención, cada uno un valor potencial para la propiedad contain de CSS, que se puede combinar en una lista de valores separados por espacios:

• size: La contención del tamaño en un elemento garantiza que el cuadro del elemento se pueda sin tener que examinar sus elementos subordinados. Esto significa que podemos y es posible omitir el diseño de los elementos subordinados si todo lo que necesitamos es el tamaño de la .
• layout: La contención del diseño implica que los elementos subordinados no afectan el el diseño externo de otros cuadros de la página. Esto nos permite omitir de los elementos subordinados si solo queremos diseñar otros cuadros.
• style: La contención del diseño garantiza que las propiedades que puedan tener efectos en más que solo sus elementos subordinados no escapan del elemento (p.ej., contadores). Esta nos permite omitir potencialmente el cálculo de estilo para los elementos subordinados si todo lo que queremos es procesar los estilos de otros elementos.
• paint: La contención de la pintura garantiza que los elementos subordinados del cuadro contenedor no se muestren fuera de sus límites. Nada puede desbordar visiblemente el elemento, y, si un elemento está fuera de la pantalla o no es visible, sus elementos subordinados tampoco estarán visibles. Esto nos permite omitir potencialmente la pintura y subordinados si el elemento está fuera de pantalla.

Cómo omitir el trabajo de renderización con content-visibility

Puede ser difícil determinar qué valores de contención usar, ya que las optimizaciones del navegador solo pueden activarse cuando se especifica un conjunto adecuado. Puedes jugar con los valores para ver qué funciona mejor o puedes usar otra propiedad de CSS llamada content-visibility para aplicar la para la contención y eliminación automáticamente. content-visibility garantiza que obtengas el mayor de rendimiento que el navegador puede proporcionar con un mínimo esfuerzo de tu parte como desarrollador.

La propiedad de visibilidad del contenido acepta varios valores, pero es auto. que mejora el rendimiento de forma inmediata. Un elemento que tiene content-visibility: auto obtiene la contención de layout, style y paint. Si el elemento está fuera de la pantalla (y no es relevante para el usuario, son los que tienen enfoque o selección en su subárbol), también obtiene la contención de size (y deja de pintura y pruebas de posicionamiento su contenido).

¿Qué significa esto? En resumen, si el elemento está fuera de la pantalla, sus elementos subordinados sin renderizar. El navegador determina el tamaño del elemento sin considerar cualquiera de sus contenidos, y se detiene allí. La mayor parte de la renderización, como los estilos y se omitirá el diseño del subárbol del elemento.

A medida que el elemento se acerca al viewport, el navegador ya no agrega el size contención y comienza a pintar y a realizar pruebas de posicionamiento del contenido del elemento. Esta permite realizar el trabajo de renderización justo a tiempo para que el usuario lo vea.

Nota sobre la accesibilidad

Una de las características de content-visibility: auto es que el contenido fuera de la pantalla permanece disponible en el modelo de objetos del documento y, por lo tanto, en el árbol de accesibilidad (a diferencia de visibility: hidden). Esto significa que se puede buscar contenido en la página y navegar a él sin esperar a que se cargue ni sacrificar el rendimiento de renderización.

La otra cara de esto, sin embargo, es que los elementos landmark con características de estilo como display: none o visibility: hidden también aparecerán en el árbol de accesibilidad cuando estén fuera de la pantalla, ya que el navegador no renderizará estos estilos hasta que ingresen al viewport. Para evitar que sean visibles en el árbol de accesibilidad y puedan causar desorden, asegúrate de agregar también aria-hidden="true".

Ejemplo: un blog de viajes

Por lo general, un blog de viajes contiene un conjunto de historias con algunas imágenes y un texto descriptivo. Esto es lo que sucede en un navegador típico cuando navega a un blog de viajes:

1. Una parte de la página se descarga de la red, junto con cualquier elemento de Google Cloud.
2. El navegador diseña y presenta todos los contenidos de la página, sin y considerar si el contenido es visible para el usuario.
3. El navegador vuelve al paso 1 hasta que se descargan todos los recursos y la página.

En el paso 2, el navegador procesa todo el contenido en busca de elementos cambiaron. Actualiza el estilo y el diseño de los elementos nuevos, junto con los elementos que pueden haber cambiado como resultado de las actualizaciones nuevas. Se está renderizando el trabajo. Esto lleva tiempo.

Ahora, considera lo que sucede si colocas content-visibility: auto en cada uno de los historias individuales en el blog. El bucle general es el mismo: el navegador descarga y renderiza fragmentos de la página. Sin embargo, la diferencia está en cantidad de trabajo que realiza en el paso 2.

Gracias a la visibilidad del contenido, le darás estilo y diseñará todos los contenidos que se visibles actualmente para el usuario (están en pantalla). Sin embargo, cuando se procesa el que esté completamente fuera de la pantalla, el navegador omitirá el trabajo de renderización y solo dar estilo y diseñar el cuadro de los elementos.

El rendimiento de cargar esta página sería como si estuviera en pantalla completa. y cuadros vacíos para cada una de las historias fuera de la pantalla. Esto tiene un gran rendimiento mejor, ya que se prevé una reducción del 50% o más del costo de renderización de cargando. En nuestro ejemplo, vemos un aumento de un tiempo de renderización de 232 ms hasta un Tiempo de renderización de 30 ms. lo que representa un aumento de 7 veces en el rendimiento.

¿Qué trabajo debes hacer para cosechar estos beneficios? Primero, fragmenta el contenido en secciones:

A continuación, aplicamos la siguiente regla de estilo a las secciones:

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

Especifica el tamaño natural de un elemento con contain-intrinsic-size

Para aprovechar los beneficios potenciales de content-visibility, el navegador debe aplicar la contención del tamaño para garantizar que los resultados de procesamiento del contenido no afectan el tamaño del elemento de ninguna manera. Esto significa que el elemento se expondrá como si estuviera vacía. Si el elemento no tiene una altura especificada en un diseño de bloque normal, su altura será de 0.

Esto puede no ser ideal, ya que el tamaño de la barra de desplazamiento cambiará y se verá dependemos de que cada historia tenga una altura distinta de cero.

Afortunadamente, CSS proporciona otra propiedad, contain-intrinsic-size, que especifica de manera efectiva el tamaño natural del elemento si este se por la contención de tamaño. En nuestro ejemplo, lo configuramos como 1000px. una estimación de la altura y el ancho de las secciones.

Esto significa que se presentará como si tuviera un solo elemento secundario de "tamaño intrínseco". dimensiones, lo que garantiza que los elementos div sin tamaño aún ocupen espacio. contain-intrinsic-size actúa como un tamaño de marcador de posición en lugar del contenido renderizado.

En Chromium 98 y versiones posteriores, hay una nueva palabra clave auto para contain-intrinsic-size. Cuando se especifica, el navegador recordará el último tamaño renderizado, si corresponde, y usarlo en lugar del marcador de posición proporcionado por el desarrollador de tamaño del ensamble. Por ejemplo, si especificaste contain-intrinsic-size: auto 300px, comenzará con un tamaño intrínseco 300px en cada dimensión, pero una vez cuando se renderiza el contenido del elemento, este conservará el tamaño intrínseco renderizado. También se recordarán todos los cambios posteriores en el tamaño de renderización. En la práctica, esto significa que, si desplazas un elemento con content-visibility: auto aplicado y, luego, lo vuelves a desplazar fuera de la pantalla, retendrá automáticamente su ancho y altura ideales, y no volverá al tamaño del marcador de posición. Esta función es especialmente útil para los usuarios con desplazamiento infinito lo que ahora puede mejorar automáticamente la estimación del tamaño a lo largo del tiempo a medida que el usuario explora la página.

Ocultando contenido con content-visibility: hidden

¿Qué sucede si quieres que el contenido no se renderice, independientemente de si está en pantalla y aprovecha los beneficios del estado de renderización en caché? Ingresa lo siguiente: content-visibility: hidden

La propiedad content-visibility: hidden te brinda todos los mismos beneficios del contenido sin renderizar y el estado de renderización almacenado en caché que content-visibility: auto hace fuera de la pantalla. Sin embargo, a diferencia de auto, no comienza a renderizarse automáticamente en la pantalla.

Esto te da más control, ya que te permite ocultar el contenido de un elemento y y luego mostrarlos rápidamente.

Compáralo con otras formas comunes de ocultar el contenido de los elementos:

• display: none: Oculta el elemento y destruye su estado de renderización. Esta significa que mostrar el elemento es tan costoso como renderizar un nuevo elemento con el el mismo contenido.
• visibility: hidden: Oculta el elemento y mantiene su estado de renderización. Esta no quita realmente el elemento del documento como (y es un subárbol) sigue ocupando espacio geométrico en la página y aún se puede hacer clic en él. Integra también actualiza el estado de renderización cada vez que se necesita, incluso cuando está oculto.

content-visibility: hidden, por otro lado, oculta el elemento mientras conserva su estado de renderización, por lo que, si hay algún cambio que se deba realizar, solo se produce cuando se vuelve a mostrar el elemento (es decir, se quita la propiedad content-visibility: hidden).

Algunos buenos casos de uso de content-visibility: hidden son cuando se implementa manuscritos virtuales avanzados y medición del diseño. También son ideales para de una sola página (SPA). Las vistas de apps inactivas pueden quedar en el DOM con lo siguiente: Se aplicó content-visibility: hidden para evitar su visualización, pero mantener su el estado almacenado en caché. Esto hace que la vista se renderice rápidamente cuando se vuelve a activar.

Efectos en la interacción con la siguiente pintura (INP)

INP es una métrica que evalúa la capacidad de una página para responder de forma confiable a las entradas del usuario. La capacidad de respuesta puede verse afectada por cualquier cantidad excesiva de trabajo que se produzca en el subproceso principal, incluida la renderización.

Siempre que puedas reducir el trabajo de renderización en una página determinada, le das al subproceso principal la oportunidad de responder con mayor rapidez a las entradas del usuario. Esto incluye el trabajo de renderización, y el uso de la propiedad content-visiblity de CSS cuando corresponda puede reducir el trabajo de renderización, especialmente durante el inicio, cuando se realiza la mayor parte del trabajo de renderización y diseño.

La reducción del trabajo de renderización tiene un efecto directo en el INP. Cuando los usuarios intentan interactuar con una página que usa la propiedad content-visibility correctamente para aplazar el diseño y la renderización de elementos fuera de la pantalla, le das al subproceso principal la oportunidad de responder a un trabajo crítico visible para el usuario. Esto puede mejorar el INP de tu página en algunas situaciones.

Conclusión

content-visibility y las especificaciones de contención de CSS ofrecen un rendimiento interesante los potenciadores llegarán directamente a tu archivo CSS. Para obtener más información propiedades, consulta lo siguiente:

• Especificación de contención de CSS
• Documentos de MDN sobre CSS Contención
• Borradores del CSSWG