Plugin TOC en WordPress da errores CLS

Errores cumulative layout shift (CLS) con plugin toc wordpress

¿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.

¿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:

  1. 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.
  2. 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?

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:

Solucionar errores CLS en Table of contents plus
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;
}

Si tienes alguna pregunta, sugerencia o simplemente quieres dar tu opinión no lo dudes y deja tu comentario

Aviso Legal

Política de Privacidad

Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo