¿Conoces la “Web Vitals Obsession”? No es un refresco, es la obsesión provocada por Google tras añadir estas métricas que señala como imprescindibles tener optimizadas para un buen posicionamiento.
Una de estas métricas es el CLS (Content Layout Shift), algo así como “movimiento de la distribución del contenido”. Lo podemos traducir en: “si los elementos de la web se mueven antes de estar colocados en su lugar definitivo después de la carga”.
Para ser una métrica tan importante me ha sorprendido encontrarme con que los plugins TOC de WordPress estén dando tantos problemas con esta métrica.
Índice de Contenido
¿Por qué los plugins “Table Of Content” (TOC) dan errores de CLS?
Normalmente, los errores CLS en este tipo de plugins de WordPress aparecen cuando, en un inicio, queremos que la caja aparezca cerrada. El problema viene de que esta “caja” no es más que un div que contiene un listado dentro (<ul>).
Al activar la opción para que aparezca cerrada en un inicio, lo que realmente estamos haciendo es que, mediante JavaScript se oculte el listado tras la carga completa de la página.
Entonces, al inicio de la carga aparecerá abierto y, cuando se cierre la caja, habrá un salto de los elementos situados por debajo del listado TOC. Hay dos factores que influyen de forma directa en el valor CLS:
- El tamaño de la tabla de contenido o índice TOC: Mientras más títulos aparezcan en el listado mayorproporción vertical tendrá. Esto quiere decir que al cerrarse habrá un mayor desplazamiento de los elementos situados por debajo.
- Donde posicionemos el listado TOC: Este es un factor determinante. Normalmente queremos que este listado aparezca al principio del artículo a modo de índice. Esta posición hará que, en el salto mencionado anteriormente, se muevan todos los elementos de la página.
Debido a la gran cantidad de incompatibilidades y problemas de carga que suelen dar los plugins «precocinados» desde WebHeroe siempre recomendamos el uso de plugins personalizados.
¿Qué plugins TOC están dando problemas CLS?
Existen muchos plugins TOC, ncluso hay maquetadores de WordPress que tienen TOC incorporado. Pero he podido encontrar errores de este tipo en easyTOC (Easy Table Of Contents) y Table Of Content plus (TOC plus) pero estoy seguro que no son los únicos.
Esto es debido a que casi todos los plugins de este tipo están usando código JavaScript cuando queremos que aparezcan cerrados al cargar la página.
A continuación os dejo las soluciones rápidas y sencillas para los plugins mencionados, aunque no son las recomendaciones que aconsejo. Más abajo descubrirás una solución bastante más efectiva.
Solucionar CLS en EasyTOC
Este tema ha sido motivo de discusión frecuente por parte de los usuarios de EasyTOC. La solución que han decidido proporcionar en este hilo es un tanto peculiar ya que piden modificar un archivo del plugin.
Sinceramente no recomiendo esa solución, sobre todo porque una vez que se actualice este plugin volveremos a encontrarnos con el mismo error. En su lugar podríamos colocar este código CSS en Apariencia/personalizar/CSS adicional o en el archivo styles de nuestro tema activo:
ul.ez-toc-list.ez-toc-list-level-1 {
display: none;
}Solucionar CLS en Table Of Content Plus
En este caso, para forzar el cerrado del listado TOC, antes siquiera de ser pintado, podremos incluir el siguiente código CSS en Apariencia/personalizar/CSS adicional o en archivo styles de nuestro tema activo:
.toc_list {
display: none;
}Te invito a visitar también el artículo de consejos para ahorrar al contratar un diseño web.
Y, si necesitas un plugin adaptado a tus necesidades, en WebHeroe también ofrecemos el servicio de desarrollo de plugins. Consúltanos.