Content-visibility: aumenta la velocidad de tu web

¿Quieres mejorar la velocidad de tu sitio web de manera sorprendente? El uso de la propiedad CSS content-visibility puede ser la solución que estás buscando. En este artículo, exploraremos cómo content-visibility puede optimizar la carga y el rendimiento de tu web, y te daremos consejos prácticos para implementarlo correctamente.

¿Qué es content-visibility?

La propiedad CSS content-visibility controla si el contenido de un elemento se renderiza o no, lo que permite a los navegadores omitir grandes cantidades de trabajo de diseño y renderizado hasta que sea necesario. Esto acelera significativamente la carga inicial de la página.

Valores de content-visibility

• visible: El contenido del elemento se renderiza y se diseña de forma normal.
• hidden: El contenido del elemento se omite, y no es accesible a las características del agente de usuario como la navegación por tabulación.
• auto: El elemento activa la contención de diseño, estilo y pintura. Si el contenido no es relevante para el usuario, se omite, pero sigue siendo accesible a las características del agente de usuario.

Ventajas de usar content-visibility

Implementar content visibility en tu web ofrece varios beneficios significativos:

1. Carga más rápida: Al omitir la renderización de elementos no visibles, se reduce el tiempo de carga inicial de la página.
2. Menor uso de recursos: Al evitar la renderización innecesaria, se conservan los recursos del navegador, lo que resulta en un mejor rendimiento general.
3. Mejora en la experiencia del usuario: Una página que carga más rápido y se siente más responsiva ofrece una mejor experiencia a tus visitantes.

Ejemplo práctico de content-visibility: auto

Supongamos que tienes una página larga con varias secciones. Usar content-visibility: auto puede ayudar a que las secciones fuera de la vista no se rendericen hasta que el usuario se desplace hacia ellas. Aquí tienes un ejemplo:

section {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

En este caso, cada sección tiene un tamaño intrínseco de 500px, lo que ayuda a mantener un tamaño constante cuando se desplazan fuera de la vista.

Implementación de content-visibility

Para implementar content visibility en tu proyecto, sigue estos pasos:

1. Identifica elementos que no necesitan renderizarse inicialmente: Piensa en elementos que no son visibles de inmediato para el usuario.
2. Aplica content-visibility: auto a estos elementos: Añade esta propiedad en tu CSS para omitir la renderización inicial.
3. Asegúrate de que los elementos sean accesibles: Recuerda que con content visibility: auto, los elementos todavía son accesibles para la navegación y otras funciones del agente de usuario.

Gestión de visibilidad con content-visibility: hidden

Puedes utilizar content-visibility: hidden para gestionar la visibilidad del contenido de una manera más eficiente que con display: none. Aquí tienes un ejemplo de cómo hacerlo con JavaScript:

<div class="hidden">
  <button class="toggle">Mostrar</button>
  <p>
    Este contenido está inicialmente oculto y se puede mostrar haciendo clic en el botón.
  </p>
</div>
<div class="visible">
  <button class="toggle">Ocultar</button>
  <p>
    Este contenido está inicialmente visible y se puede ocultar haciendo clic en el botón.
  </p>
</div>

p {
  contain-intrinsic-size: 0 1.1em;
  border: dotted 2px;
}

.hidden > p {
  content-visibility: hidden;
}

.visible > p {
  content-visibility: visible;
}

const handleClick = (event) => {
  const button = event.target;
  const div = button.parentElement;
  button.textContent = div.classList.contains("visible") ? "Mostrar" : "Ocultar";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

document.querySelectorAll("button.toggle").forEach((button) => {
  button.addEventListener("click", handleClick);
});

Consideraciones de compatibilidad y accesibilidad

Compatibilidad del navegador

content-visibility es una tecnología experimental y, como tal, no todos los navegadores la soportan de manera uniforme. Es crucial revisar la tabla de compatibilidad de los navegadores antes de implementarla en un entorno de producción. Los navegadores modernos como Chrome y Edge han empezado a ofrecer soporte para content visibility, pero otros navegadores pueden no tener esta funcionalidad o pueden implementarla de manera diferente.

Para asegurarte de que tu sitio web funcione correctamente en todos los navegadores, considera usar feature queries de CSS. Estas consultas te permiten aplicar content visibility solo si el navegador lo soporta:

@supports (content-visibility: auto) {
  .tu-clase {
    content-visibility: auto;
  }
}

Accesibilidad

Al implementar content visibility, es importante considerar cómo afectará la accesibilidad de tu sitio web. El contenido que se omite mediante content-visibility: auto sigue presente en el DOM y en el árbol de accesibilidad. Esto significa que las tecnologías de asistencia, como lectores de pantalla, aún podrán acceder a este contenido, lo cual es beneficioso para la experiencia del usuario.

Sin embargo, debes tener cuidado al usar content-visibility: hidden. Aunque esta propiedad mejora el rendimiento al omitir la renderización de contenido, también oculta el contenido de las tecnologías de asistencia, lo que podría hacer que algunos elementos sean inaccesibles para los usuarios con discapacidades.

Para elementos que necesitas ocultar completamente de todas las tecnologías de asistencia, utiliza aria-hidden="true". Esto asegura que el contenido no solo se omite del renderizado visual sino también del árbol de accesibilidad:

<div aria-hidden="true">
  Este contenido no será accesible para las tecnologías de asistencia.
</div>

Implementar content-visibility en tu sitio web puede mejorar significativamente la velocidad y el rendimiento de tu página, proporcionando una experiencia de usuario superior. Si te interesa aprender más sobre cómo optimizar tu sitio web y adquirir habilidades avanzadas en desarrollo web, ¡no dudes en apuntarte al Bootcamp en desarrollo web de KeepCoding! Este programa intensivo te proporcionará las herramientas y el conocimiento necesarios para sobresalir en la industria tecnológica, una de las más demandadas y mejor remuneradas del mundo.