Fecha de publicación: 30 de octubre de 2024
La introducción de Interaction to Next Paint (INP) como métrica de Métricas web esenciales a principios de 2024 generó más interés en el rendimiento de la renderización. Parte de la INP se enfoca en lo que tarda el navegador en pintar el siguiente fotograma después de que un usuario inicia una interacción con la página. Mantener bajo el INP de tu sitio web significa que los usuarios sentirán que responde a sus interacciones de la manera más rápida y fluida posible.
También es importante el trabajo de renderización que debe llevarse a cabo mientras se carga una página, lo que tiene el potencial de retrasar las interacciones incluso desde el principio. Vale la pena encontrar formas de reducir la cantidad de trabajo que se realiza durante esta parte crucial del ciclo de vida de la página. La propiedad content-visibility de CSS es una forma de lograrlo, y nos complace anunciar que ahora está disponible como Base de referencia a partir de septiembre de 2024.
content-visibility es una propiedad de CSS que le indica al usuario-agente que aplace la renderización de los elementos hasta que se acerquen al viewport. En el caso de las páginas con muchos elementos DOM, esto puede ser beneficioso, ya que significa que la carga inicial de una página iniciará menos trabajo de renderización. En cambio, el trabajo se realiza justo antes de que el usuario lo necesite ver.
content-visibility: auto a áreas de contenido fragmentado proporciona un aumento de rendimiento de renderización de 7 veces en la carga inicial. Sigue leyendo para obtener más información.
Para habilitar esta optimización para los elementos fuera de la pantalla, aplícales la regla content-visibility: auto en el CSS de tu sitio web:
.render-me-later {
content-visibility: auto;
}
content-visibility funciona con algunos de los comportamientos definidos para la propiedad contain en la contención de CSS. El objetivo de la contención de CSS es proporcionar aislamiento a partes del árbol del DOM. Esto permite que las operaciones de renderización se delimiten en una parte específica del árbol del DOM, de modo que el diseño se invalide y se rehaga solo para un subconjunto del árbol del DOM. Si bien se aplica para renderizar el rendimiento, requiere un poco de familiaridad con los diversos valores de la propiedad contain y cómo usarlos de manera eficaz.
Cuando se aplica content-visibility: auto a los elementos, este adquiere automáticamente algunas de las propiedades proporcionadas por la propiedad contain. El resultado es que los elementos afectados se renderizarán inicialmente con una altura de 0px, lo que significa que no se renderizarán.
Sin embargo, esto tiene algunos efectos secundarios. Por ejemplo, la barra de desplazamiento de la página puede cambiar de posición y altura a medida que el usuario se desplaza hacia elementos que no se renderizaron antes y que se renderizan justo a tiempo para que el usuario los vea. Para mitigar esto, aplica la propiedad contain-intrinsic-size.
Dado que content-visibility está disponible recientemente en Baseline, es posible que tengas algunas inquietudes sobre los usuarios con navegadores que aún no se actualizaron para usar la propiedad nueva. Dado que content-visibility es una propiedad CSS, no deberías preocuparte demasiado. Los navegadores que lo entiendan lo usarán, y los que no, no. Esto significa que, además de los beneficios de rendimiento que obtendrías de los navegadores que admiten content-visibility, puedes esperar que las páginas funcionen de la misma manera.
content-visibility proporciona un beneficio aditivo y, si hay casos en los que puedes usarlo para reducir el trabajo de renderización durante la carga de la página, deberías considerar usarlo para asegurarte de que tus páginas tengan la mayor potencia de procesamiento disponible cuando más la necesiten. Ahora que esta función útil está disponible en Baseline, no dudes en usarla para que los usuarios puedan beneficiarse del trabajo de renderización que evita hasta que sea necesario.