Omite la renderización del contenido fuera de pantalla para mejorar el tiempo de carga inicial.
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 habilita la
que el usuario-agente omita el trabajo de renderización de un elemento, incluidos 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.
content-visibility: auto a áreas de contenido fragmentado proporciona un aumento del rendimiento de renderización de 7 veces en la carga inicial. Continúa leyendo para obtener más información.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, lo que significa que el navegador puede realizar optimizaciones 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 utilizar, ya que el navegador
las optimizaciones solo se pueden implementar cuando se especifica un conjunto apropiado. 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
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
content-visibility: auto a las áreas fragmentadas de la izquierda. Los resultados muestran tiempos de renderización que van de 232 ms a 30 ms en la carga inicial de la página.Un blog de viajes suele tener un conjunto de historias con algunas fotos texto descriptivo. Esto es lo que sucede en un navegador típico cuando navega a un blog de viajes:
- Una parte de la página se descarga de la red, junto con cualquier elemento de Google Cloud.
- El navegador diseña y presenta todos los contenidos de la página, sin y considerar si el contenido es visible para el usuario.
- El navegador regresa al paso 1 hasta que la página y los recursos estén descargado.
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:
story aplicada para recibir content-visibility: auto. Consulta la demostración en CodePen.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 auto
palabra clave 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
desplazar un elemento con content-visibility: auto aplicado y, luego, desplazarlo hacia atrás
fuera de la pantalla, conservará automáticamente su ancho y alto ideales y no lo revertirá
con el 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 ofrece los mismos beneficios de
contenido sin renderizar y estado de renderización almacenado en caché como content-visibility: auto
fuera de la pantalla. Sin embargo, a diferencia de auto, no comienza a
renderizar 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.
Por otro lado, content-visibility: hidden oculta el elemento mientras
preservando su estado de renderización, por lo que, si hay algún cambio que deba
solo ocurren cuando el elemento se vuelve a mostrar (es decir, cuando
Se quitó 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 manera confiable a las entradas del usuario. Cualquier cantidad excesiva de trabajo que ocurra en el subproceso principal, incluido el trabajo de renderización, puede afectar la capacidad de respuesta.
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 de forma correcta para diferir el diseño y la renderización de los elementos fuera de pantalla, le das al subproceso principal la oportunidad de responder a trabajos críticos visibles 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: