Mejora la velocidad de carga de WordPress con la propiedad CSS content-visibility

¿Sabías que hay una nueva y potente propiedad CSS que mejora la carga de tus páginas? ¿Ah no? Pues entonces te presento a content-visibility .

Esta propiedad CSS le dice al navegador que omita los estilos, diseño y el pintado de la página hasta que lo necesite.

Qué hace content-visibility

Normalmente, el navegador muestra la página completa al cargar, es decir, todos los elementos se pintan en la pantalla y se les aplica el diseño para que se vean exactamente como cabría esperar.

La propiedad content-visibility lo hace de manera diferente. La visibilidad del contenido hace que todos los elementos con el estilo content-visibllity:auto; se procesen solo cuando se necesiten.

Se muestran a medida que el visitante se desplaza por la página, justo antes de que el elemento sea visible en la página. Hasta entonces, solo se calculan las dimensiones del elemento y se omiten el diseño y el estilo del elemento, incluidos todos los elementos secundarios.

Es una especie de carga diferida (lazy loading) no solo de imágenes, sino de bloques completos de contenido.

Tiene buena pinta, ¿no? Echemos un vistazo a las ventajas de content-visibility.

Cómo aplicar la propiedad content-visibility

Pues content-visibility es una propiedad de CSS. Una simple declaración de CSS que te permite establecer la visibilidad del contenido de un elemento del HTML de tus páginas.

Básicamente se basa en añadir un código como este:

.mielemento {
content-visibility: auto;
}

La propiedad content-visibility tiene varios posibles valores:

  • hidden: El elemento omite sus contenidos (parecido a aplicar display: none;).
  • visible: No se aplica ningún efecto y el elemento se procesa y visualiza normalmente.
  • auto: El elemento tiene diseño, estilo y contenido que mostrar. El navegador determina si el contenido es relevante para el usuario, y si no lo fuera, entonces el navegador lo omite. Al mismo tiempo, el elemento sigue estando disponible para verlo, seleccionarlo y es totalmente accesible, pudiendo navegar a él con tabuladores o buscando en la página.

Como creo que tendrás ya claro, el valor más adecuado a utilizar es auto, pues aúna al mismo tiempo características de rendimiento y accesibilidad.

Así que, como te decía antes, puedes pensar en content-visibility: auto; como una especie de carga diferida de todas las partes del documento HTML (DOM).

Si un elemento está por debajo de la parte inicialmente visible y tiene la regla content-visibility: auto; como el navegador no tiene en cuenta su contenido y se salta el procesamiento de ese elemento

A medida que el usuario navegue hacia el elemento el navegador pintará su contenido y se procesará rápidamente para que esté disponible

La propiedad contain-intrinsic-size

Cuando un navegador muestra todo el contenido de una página sabe la altura necesaria para mostrarlo todo (sumando las alturas individuales de cada sección de la página) y el desplazamiento será natural y fluido para el usuario.

Ahora bien, cuando aplicas content-visibility: auto; a un elemento de la página lo trata como si tuviese una altura de 0 (asumiendo que la propiedad height no esté definida previamente).

Así que, cuando el usuario se desplaza y el elemento aparece visible,  y el navegador comienza a mostrarlo, se calcula la altura real y esto provoca un cambio de diseño en la página.

Este desplazamiento también puede hacer que la página sea un poco como a saltos, algo conocido como Cambio de diseño acumulativo (CLS), algo que se considera un gran problema para la optimización en los motores de búsqueda, ya que Google ahora lo incluye en sus métricas de Core Web Vitals. para medir el rendimiento de una web.

La solución a estos saltos de diseño está compaginando content-visibility: auto; con contain-intrinsic-size, dando al navegador una altura predecible para que la use como un marcador de posición cuando se visualice el elemento.

.mielemento {
content-visibility: auto;
contain-intrinsic-size: 877px; /* la altura prevista del elemento */
}

Lo que hace contain-intrinsic-size es actuar como un marcador de posición para el contenido aún no procesado.

De este modo se reducen los problemas de desplazamiento y de saltos de diseño.

Así que, si conoces la altura exacta, puedes usarla como valor. En caso contrario haz una estimación.

Cuando se procese la sección a la que hayas aplicado content-visibility: auto; , si la altura que definiste no es la altura real, habrá un pequeño salto de diseño, pero no será tan pronunciado como sin la propiedad contain-intrinsic-size.

Cómo saber a qué elemento aplicar la propiedad content-visibility

Si has entendido lo anterior ya solo queda determinar a qué elemento vamos a aplicar la propiedad content-visibility: auto; y cómo hacerlo ¿no?

Para saber la clase CSS del elemento de tu página al que aplicar content-visibility: auto; tienes que abrir la consola de desarrollo del navegador (ya sabes, clic derecho en cualquier parte + inspeccionar) y seleccionar el bloque de contenido base de la página.

Por ejemplo, aquí en el blog, usando el tema Astra, el elemento sería article, como puedes ver en la siguiente captura:

En la portada del blog los bloques de cada entrada tienen la clase CSS article. Así que mi código a aplicar sería este:

.article {
 content-visibility: auto; 
}

¿Y cómo se qué altura aplicar a la propiedad contain-intrinsic-size

Como puedes ver también en la captura anterior, además de la clase CSS, el mismo inspector del navegador ya te está mostrando que la página principal del blog se «rompe» en bloques uniformes de una altura de 876.39 píxeles, así que también tenemos ya la propiedad contain-intrinsic-size.

Dicho esto, ya tengo el código CSS completo a aplicar en mi caso, este:

.article {
content-visibility: auto;
contain-intrinsic-size: 876.39px;
}

Dónde añadir las propiedades content-visibility y contain-intrinsic-size

Fácil, en la sección «CSS adicional» del personalizador de WordPress, desde Apariencia → Personalizar → CSS adicional.

Eso sí, no uses los códigos de ejemplo que te he puesto, debes encontrar tus elementos a los que aplicar content-visibility: auto; y contain-intrinsic-size en tu web.

Aquí tienes otros dos ejemplos de cómo habría que aplicar estas propiedades a las entradas individuales de un blog (este) y a una página de inicio creada con una sección de ancho completo con el tema Divi.

Igual que antes, es bastante fácil adivinar a qué elemento aplicar las propiedades desde el inspector del navegador.

¿Reconocen estas propiedades CSS todos los navegadores?

Buena pregunta 🙂

Todavía no todos, pero casi…

Safari  – como siempre – va rezagado y aún no reconoce estas propiedades CSS pero Chrome, Firefox y Edge reconocen y aplican perfectamente en sus últimas versiones, y aprovecharán estas optimizaciones.

¿Merece la pena aplicar la propiedad content-visibility? ¿mejorará la velocidad de mi web?

Pues sí, y menos mal. Imagina que me tiro más de una semana documentándome para crear esta guía, haciendo pruebas, capturas, escribiendo este pedazo de tocho y luego resulta que no sirve para nada, que aplicar la propiedad content-visibility: auto; no sirve de nada, no mejora los tiempos de carga ni optimiza las páginas.

A ver, lo habría escrito igualmente, pero la cara que se te queda no es la misma 😀

Repito, sí, aplicar la propiedad content-visibility: auto; y la propiedad contain-intrinsic-size adecuada a cada tipo de página mejora los tiempos de carga de las páginas, y bastante.

Aquí tienes el antes y el después de aplicarlo aquí mismo en el blog de ayuda WordPress:

La diferencia es interesante. Haciendo el cálculo con una conexión 3G desde la herramienta de Performance de la consola del navegador los valores relevantes quedan así:

La diferencia es brutal tanto en renderizado como en el pintado de la página.

Así que sí, merece mucho la pena aplicar la propiedad content-visibility: auto; a tu WordPress, mejora mucho la velocidad de carga de tus páginas y las métricas web principales en PageSpeed Insights.

(14 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

8 comentarios en “Mejora la velocidad de carga de WordPress con la propiedad CSS content-visibility”

  1. Excelente como siempre Fernando; cuando piensas que ya casi conoces la mayoría de las propiedades CSS, viene Fernando y te presenta una tan necesaria como content-visibility junto a contain-intrinsic-size. Creo que ya la voy a aplicar estos días a la web de un cliente.

    Gracias por compartir tanto Fernando.

  2. Hola Fernando,

    ¿Con esto podriamos solucionar el error del CSS que bloquea la carga? Y además entiendo que mejoraríamos el CLS. ¿Estoy en lo cierto?

  3. El equipo de elementor ya tiene esto en la lista de tareas y los de Woocommerce también lo han incluido
    Aunque sería interesante hacer un plugin para elementor que obtuviera la altura de la sección y aplicará el css

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido