Saltar al contenido principal

Mejore el tiempo de carga inicial omitiendo la representación de contenido fuera de la pantalla.

los
content-visibility

, lanzada en Chromium 85, podría ser una de las nuevas propiedades CSS más impactantes para mejorar el rendimiento de carga de la página. content-visibility permite al agente de usuario omitir el trabajo de renderizado de un elemento, incluido el diseño y la pintura, hasta que sea necesario. Debido a que se omite el procesamiento, si una gran parte de su contenido está fuera de la pantalla, aprovechar la content-visibility hace que la carga inicial del usuario sea mucho más rápida. También permite interacciones más rápidas con el contenido en pantalla. Con buena pinta.

demo-9654979

En nuestro artículo de demostración, aplicando content-visibility: auto a áreas de contenido fragmentadas da una 7 veces aumento del rendimiento de renderizado en la carga inicial. Siga leyendo para obtener más información.

Soporte de navegador

content-visibility se basa en primitivas dentro del la especificación de contención de CSS. Mientras content-visibility solo es compatible con Chromium 85 por ahora (y se considera «vale la pena hacer un prototipo» para Firefox), la especificación de contención se admite en la mayoría de los navegadores modernos.

Contención CSS

El objetivo clave y general de la contención de CSS es permitir mejoras en el rendimiento de la representación del contenido web al proporcionar aislamiento predecible de un subárbol DOM del resto de la página.

Básicamente, un desarrollador puede decirle 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 necesidad de considerar el estado fuera del subárbol. Saber qué partes de contenido (subárboles) contienen contenido aislado significa que el navegador puede tomar decisiones de optimización para la representación de la página.

Hay cuatro tipos de Contención CSS, cada uno un valor potencial para el contain Propiedad CSS, que se puede combinar en una lista de valores separados por espacios:

  • size: La contención de tamaño en un elemento asegura que la caja del elemento se pueda colocar sin necesidad de examinar sus descendientes. Esto significa que potencialmente podemos omitir el diseño de los descendientes si todo lo que necesitamos es el tamaño del elemento.
  • layout: Contención de diseño significa que los descendientes no afectan el diseño externo de otros cuadros de la página. Esto nos permite omitir potencialmente el diseño de los descendientes si todo lo que queremos hacer es diseñar otros cuadros.
  • style: La contención de estilo asegura que las propiedades que pueden tener efectos sobre más que sus descendientes no escapen del elemento (por ejemplo, contadores). Esto nos permite omitir potencialmente el cálculo de estilo para los descendientes si todo lo que queremos es calcular estilos en otros elementos.
  • paint: La contención de pintura garantiza que los descendientes 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 descendientes tampoco serán visibles. Esto nos permite omitir potencialmente pintar los descendientes si el elemento está fuera de la pantalla.

Omitir el trabajo de renderizado 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 apropiado. Puedes jugar con los valores para ver lo que funciona mejor, o puede usar otra propiedad CSS llamada content-visibility para aplicar la contención necesaria automáticamente. content-visibility garantiza que obtenga las mayores ganancias de rendimiento que el navegador puede proporcionar con un esfuerzo mínimo de su parte como desarrollador.

La propiedad de visibilidad de contenido acepta varios valores, pero auto es el que proporciona mejoras de rendimiento inmediatas. Un elemento que tiene
content-visibility: auto ganancias layout, style y paint contención. Si el elemento está fuera de la pantalla (y no es relevante para el usuario, los elementos relevantes serían los que tienen foco o selección en su subárbol), también gana size contención (y se detiene
pintura
y
prueba de acierto
su contenido).

¿Qué significa esto? En resumen, si el elemento está fuera de la pantalla, sus descendientes no se renderizan. El navegador determina el tamaño del elemento sin considerar ninguno de sus contenidos, y se detiene allí. Se omite la mayor parte de la representación, como el estilo y el diseño del subárbol del elemento.

A medida que el elemento se acerca a la ventana gráfica, el navegador ya no agrega el size
contención y comienza a pintar y probar el contenido del elemento. Esto permite que el trabajo de renderizado se realice justo a tiempo para que el usuario lo vea.

Ejemplo: un blog de viajes

En este ejemplo, basamos nuestro blog de viajes a la derecha y aplicamos content-visibility: auto a áreas fragmentadas a la izquierda. Los resultados muestran tiempos de renderizado que van desde 232 ms a 30 ms en la carga de la página inicial.

Un blog de viajes generalmente contiene un conjunto de historias con algunas imágenes y 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 los recursos necesarios.
  2. El navegador diseña y distribuye todo el contenido de la página, sin considerar si el contenido es visible para el usuario.
  3. El navegador vuelve al paso 1 hasta que se descargan toda la página y los recursos.

En el paso 2, el navegador procesa todos los contenidos en busca de cosas que pueden haber cambiado. Actualiza el estilo y el diseño de cualquier elemento nuevo, junto con los elementos que pueden haber cambiado como resultado de nuevas actualizaciones. Esto es trabajo de renderizado. Esto lleva tiempo.

travelblog-9968669

Un ejemplo de blog de viajes. Ver Demostración en Codepen

Ahora considera lo que pasa si pones content-visibility: auto en cada una de las historias individuales del blog. El ciclo general es el mismo: el navegador descarga y muestra fragmentos de la página. Sin embargo, la diferencia está en la cantidad de trabajo que realiza en el paso 2.

Con visibilidad de contenido, aplicará estilo y diseño a todos los contenidos que están actualmente visibles para el usuario (están en pantalla). Sin embargo, al procesar la historia que está completamente fuera de la pantalla, el navegador omitirá el trabajo de renderizado y solo aplicará estilo y diseño al cuadro del elemento.

El rendimiento de cargar esta página sería como si contuviera historias completas en pantalla y casillas vacías para cada una de las historias fuera de la pantalla. Esto funciona mucho mejor, con reducción esperada del 50% o más del costo de renderizado de carga. En nuestro ejemplo, vemos un impulso de un 232 ms dando tiempo a un
30 ms tiempo de renderizado. Eso es un 7 veces aumento del rendimiento.

¿Cuál es el trabajo que necesita hacer para obtener estos beneficios? Primero, dividimos el contenido en secciones:

travelblog-chunked-2397894

Ejemplo de fragmentación de contenido en secciones con la story clase aplicada, recibir content-visibility: auto. Ver Demostración en Codepen

Luego, aplicamos la siguiente regla de estilo a las secciones:

.story {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}

Tenga en cuenta que a medida que el contenido entra y sale de la visibilidad, comenzará y dejará de representarse según sea necesario. Sin embargo, esto no significa que el navegador tendrá que renderizar y volver a renderizar el mismo contenido una y otra vez, ya que el trabajo de renderizado se guarda cuando es posible.

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

Para realizar los beneficios potenciales de content-visibility, el navegador debe aplicar la contención de tamaño para asegurarse de que los resultados de la representación de los contenidos no afecten el tamaño del elemento de ninguna manera. Esto significa que el elemento se presentará como si estuviera vacío. Si el elemento no tiene una altura especificada en un diseño de bloque regular, entonces tendrá una altura de 0.

Esto podría no ser ideal, ya que el tamaño de la barra de desplazamiento cambiará, dependiendo de que cada piso tenga una altura distinta de cero.

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

Esto significa que se presentará como si tuviera un solo hijo de dimensiones de «tamaño intrínseco», asegurando que sus divs sin tamaño aún ocupen espacio.
contain-intrinsic-size actúa como un tamaño de marcador de posición en lugar de contenido renderizado.

Ocultar contenido con content-visibility: hidden

¿Qué sucede si desea mantener el contenido sin procesar independientemente de si está o no en pantalla, mientras aprovecha los beneficios del estado de procesamiento en caché? Entrar:
content-visibility: hidden.

los content-visibility: hidden La propiedad le ofrece los mismos beneficios de contenido sin procesar y estado de procesamiento en caché que content-visibility: auto hace fuera de la pantalla. Sin embargo, a diferencia de auto, no comienza a renderizarse automáticamente en pantalla.

Esto le da más control, lo que le permite ocultar el contenido de un elemento y luego mostrarlo rápidamente.

Compárelo con otras formas comunes de ocultar el contenido del elemento:

  • display: none: oculta el elemento y destruye su estado de representación. Esto significa que mostrar el elemento es tan caro como renderizar un nuevo elemento con el mismo contenido.
  • visibility: hidden: oculta el elemento y mantiene su estado de representación. Esto no elimina realmente el elemento del documento, ya que (y su subárbol) aún ocupa espacio geométrico en la página y aún se puede hacer clic en él. También actualiza el estado de representación en cualquier momento que sea necesario, incluso cuando está oculto.

content-visibility: hidden, por otro lado, oculta el elemento mientras conserva su estado de representación, por lo que, si hay algún cambio que deba ocurrir, solo ocurre cuando el elemento se muestra nuevamente (es decir, el
content-visibility: hidden propiedad se elimina).

Algunos grandes casos de uso para content-visibility: hidden son cuando se implementan desplazadores virtuales avanzados y se mide el diseño.

Conclusión

content-visibility y la especificación de contención de CSS significan que algunos aumentos de rendimiento interesantes llegarán directamente a su archivo CSS. Para obtener más información sobre estas propiedades, consulte:

R Marketing Digital