Difiere la renderización de contenido pesado

Las páginas web con contenido extenso, como desplazamientos infinitos, paneles complejos o artículos densos, pueden sufrir una renderización inicial lenta y retrasos en las interacciones. Las tecnologías web modernas te permiten diferir la carga de trabajo de renderización del contenido que no es visible de inmediato, lo que aumenta significativamente el rendimiento sin afectar la accesibilidad ni las expectativas de los usuarios.

Para optimizar la renderización, puedes usar la propiedad de CSS content-visibility y el atributo HTML hidden="until-found". Si bien ambos ayudan al rendimiento, se usan en casos distintos.

Cuándo usar cada opción

Cómo implementar content-visibility: auto

Cómo elegir contenido fuera de la pantalla

OBLIGATORIO: DEBES identificar con cuidado qué elementos reciben content-visibility: auto.

• SÍ segmentes bloques de diseño grandes y autónomos que estén estrictamente debajo del pliegue inicial (p.ej., elementos de tarjeta en un feed infinito, comentarios finales o secciones de diseño con mucho contenido en la parte inferior).
• NO apliques esta propiedad a los elementos que se encuentran dentro del viewport inicial, en la mitad superior de la página. Esto obliga al navegador a evaluar los límites de visibilidad antes de la renderización, lo que, paradójicamente, retrasa el rendimiento crítico de la carga de página.
• SÍ segmentes elementos con estructuras de DOM internas profundas o complejas para maximizar el ahorro de costos de renderización.

Pasos de implementación

1. OBLIGATORIO: Identifica las secciones pesadas que se confirman que están fuera de la pantalla en la carga inicial.
2. OBLIGATORIO: Aplica content-visibility: auto a cada uno de estos elementos fuera de la pantalla.
3. OBLIGATORIO: Proporciona un tamaño estimado de la estructura de diseño con contain-intrinsic-size en cada elemento.

Cómo usar contain-intrinsic-size

OBLIGATORIO: DEBES vincular content-visibility: auto con contain-intrinsic-size. De lo contrario, el navegador se verá obligado a contraer el elemento a una altura de 0 px cuando esté fuera de la pantalla, lo que provocará cambios de diseño graves y saltos de la barra de desplazamiento a medida que el usuario se desplace.

La propiedad abreviada de CSS contain-intrinsic-size actúa como una dimensión de marcador de posición. El uso de la palabra clave auto permite que el navegador "recuerde" el tamaño exacto una vez que el elemento se renderiza por completo, usando ese tamaño calculado sobre el marcador de posición si el elemento vuelve a salir de la pantalla.

Ejemplo de código

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

Cómo implementar content-visibility: hidden

1. Identifica las secciones pesadas: Ubica los bloques de diseño que están ocultos inicialmente (p.ej., filas adicionales en una tabla de datos grande).
2. Aplica CSS: Agrega content-visibility: hidden al elemento.
3. Revela el elemento: Cuando se deba revelar el elemento, cambia la propiedad content-visibility a visible o auto.

Ejemplo de código

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

Como content-visibility: hidden excluye el elemento y sus elementos secundarios del árbol de accesibilidad y de la búsqueda en la página, NO lo uses si el contenido debe permanecer visible mientras está oculto. Si necesitas que el contenido oculto se pueda buscar con la función nativa Buscar en la página, usa hidden="until-found" como se describe en Cómo buscar contenido oculto.

Prácticas recomendadas

• SÍ uses contain-intrinsic-size con content-visibility: auto. De lo contrario, se forzarán los cálculos de altura durante el desplazamiento, lo que provocará saltos en el diseño del viewport o fallas visuales.
• NO apliques content-visibility: auto a los elementos que se encuentran dentro del viewport de la mitad superior de la página, ya que esto retrasa la renderización de la página crítica.
• Verificación de accesibilidad OBLIGATORIA: Cuando apliques content-visibility: auto, DEBES verificar la accesibilidad secuencial del teclado. En ciertas configuraciones de tecnología de accesibilidad, los nodos fuera de la pantalla que usan content-visibility: auto pueden excluirse del árbol de accesibilidad o de las rutas de navegación secuenciales hasta que el enfoque se mueva de forma forzada dentro de ellos. Prueba la navegación lineal más allá de los límites de la pantalla solo con el teclado.

Estrategias de resguardo

Resguardo de content-visibility

Cuando el navegador no admita content-visibility, lo ignorará. En la mayoría de los casos, content-visibility: auto no necesitará un resguardo, aunque sin él se perderán las mejoras de rendimiento. Un navegador no compatible dejará los elementos content-visibility: hidden completamente visibles. Usa la detección de funciones para implementar un resguardo.

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}