Eliminar Elementos DOM que más Contribuyen al CLS de la página

En este artículo te explico los métodos que puedes aplicar para solucionar los problemas de Avoid Large Layout Shifts en WordPress.

Uno de los principales secretos del éxito de una página web es su velocidad de carga, tanto en su versión de escritorio como en su versión móvil.

Las páginas web lentas y que tardan mucho en cargar son normalmente penalizadas por el algoritmo de Google y tiene mucho más complicado posicionarse en el buscador.

Por este motivo, cualquier webmaster interesado en posicionar su página web y ganar visitantes debería tener en cuenta este aspecto tan importante.

Uno de los errores más llamativos que se pueden encontrar a la hora de analizar la velocidad de una web es el de Avoid Large Layout Shift que aparece en PageSpeed Insights.

Ahora, te voy a explicar los pasos que he seguido para eliminar los elementos DOM que más contribuyen al CLS de la página y hacer mi web mucho más rápida.

✅ Una web que carga rápida tiene más posibilidades de éxito
✅ Evitar cambios de diseño importante es fundamental para ganar velocidad
✅ Corrige los elementos DOM que influyen en el CLS de la página

En este Artículo vamos a hablar de:

Errores de PageSpeed Insights

La herramienta PageSpeed Insights de Google se ha convertido en el estándar de cualquier webmastes para comprobar y medir la velocidad de carga de una web.

Todos coincidimos que no es la mejor herramienta para realizar estas comprobaciones, pero es la que Google tiene en cuenta y a la que tenemos que prestar mucha atención.

Sobre todo para evitar errores de páginas webs demasiado lentas que te pueden penalizar y hacer perder posiciones en el buscador.

Google PageSpeed Insights analiza cualquier URL y muestra los resultados que influyen en sus tiempos de carga tanto para la versión móvil como para la versión escritorio.

De todos los errores que te puedes encontrar al analizar tu página web, hay uno que llama especialmente la atención: "Avoid Large Layout Shifts".

Un apartado de PageSpeed que te muestra los elementos DOM que más contribuyen al CLS de la página.

¿Qué son los DOM que contribuyen al CLS de la página?

Este es un error relacionado con el diseño de la página web, en concreto con aquellos elementos modificados o añadidos a ese diseño que contribuyen al CLS de la página.

Y seguramente te estés preguntando ¿qué es el CLS de la página?

Pues son las iniciales de Cumulative Layout Shifts que traducido al Español sería Cambios de Diseño Acumulativo.

Explicado de manera muy simple,el CLS sería todas aquellas modificaciones o elementos añadidos a un diseño web que provocan un cambio repentino de la misma.

Este error es visible durante la carga inicial de la web en la que de manera muy rápida se puede ver como el enmaquetado cambia hasta que adquiere su forma final después de cargar todos los elementos.

Esto provoca que puedan producirse clics o pulsaciones no deseadas mientras la plantilla carga debido a estos cambios.

Solucionar Avoid Large Layout Shifts

Estos son los pasos que yo he dado para minimizar al máximo todos los errores de Avoid Large Layout Shifts y evitar los elementos DOM que contribuyen a ellos.

Y es que tras realizar un analisis de mi página web utilizando PageSpeed Insights aparecen estos errores en Avoid Large Layout Shifts.

Como puedes ver en esta captura, la mayoría de elementos DOM que contribuyen al CLS de la página corresponden a modificaciones en el diseño de la web.

Estas modificaciones provocan cambios en el diseño de la página hasta que esta ha cargado completamente lo que es considerado por Google como un fallo.

La solución pasa por eliminar esos elementos DOM, lo que provocaría un cambio del diseño o de la perdida de funciones de tu web, o tomar alguna de estas medidas.

1️⃣ Elegir el mejor alojamiento web posible
2️⃣ Utilizar una plantilla rápida y optimizada para tu web
3️⃣ Usar un buen plugin caché para tu web
4️⃣ Utilizar un CDN para servir el contenido estático de la web

El mejor alojamiento para tu web

No hay discursión posible, si quieres triunfar con tu página web tendrás que invertir dinero en contratar un buen hosting para tu página web.

Huye de los alojamientos baratos o gratuitos y apuesta por un bue servicio que incluya los recursos necesarios para hacer que tu web esté segura y sea rápida.

Yo he confiado en el servicio de alojamiento web elastico de Webempresa y la verdad es que solo tengo palabras de agradecimiento.

A aparte de todas las opciones incluidas como servicio técnico y de atención al cliente, copias de seguridad automáticas y servicio de optimización de imágenes, está el Magic Cache.

Con Magic Caché de Webempresa, tu página web hace uso de la caché varnish a nivel del servidor loq ue hace que esta carge mucho más rápido.

Tan solo tienes que activar Magic Caché en tu Cpanel e instalar en tu WordPress el plugin Varnish Caché para activar todas sus opciones.

Plantilla Rápida y Optimizada para WordPress

Desde hace ya mucho tiempo vengo usando un tema para mi web como es GeneratePress y solo puedo decir que estoy encantando.

Es una tema muy rápido y optimizado para WordPress, ideal para aquellos que tienen pocos conocimientos ya que tiene un personalizador intuitivo y bastante simple.

Además, dispone de varias plantillas prediseñadas que puedes instalar y modificar a tu gusto para hacer tu web más atractiva.

El Plugin caché más recomendado

Entramos en la "chicha" del asunto para solucionar los problemas de Avoid Large Layout Shifts que te vas a encontrar en WordPress.

Como te he dicho, estos problemas tiene como origen los elementos DOM que contribuyen al CLS de la página.

Estos elementos modifican el diseño durante la carga de la web pudiendo provocar una mala experiencia para el usuario.

Por norma general, estos fallos vienen provocados por cadenas de archivos css criticos generados por los plugins caché a la hora de servir.

Es posible que hayas comprobado al utilizar una plugin caché que tu página comienza a cargar sin el diseño hasta que se completa la carga y aparece correctamente.

Ese segundo en el que aparece la web sin diseño alguno es lo que corresponde a los errores de Avoid Large Layout Shifts.

Para evitar las cadenas de archivos css crítico en tu web tendrás que configurar tu plugin caché para evitar que se optimice la entrega de archivos css.

Uno de los mejores plugin caché que puedes utilizar para tu WordPress es WP Rocket, una maravilla que hará que tu web vuele.

Aunque es un plugin caché de pago, 50€ al año para un sitio, incluye numerosas funciones que te evitarán instalar otros plugins adicionales.

Dentro de WP Rocket, tendrás que entrar en las opciones de optimizar archivos css&js y deshabilitar la opción de Optimizar la Entrega CSS.

Con esto, evitarás que el plugin cree un archivo css crítico que contribuye a la carga de CLS de tu web y evitarás errores en Avois Large Layout Shifts.

Si crees que tu web necesita tener activada esta opción, WP Rocket dispone de un plugin extra que te permite optimizar la entrega del css sin crear un archivo crítico.

CDN para WordPress

Por último, siempre es recomendable utilizar servicios CDN en instalaciones de WordPress cuando tu página tiene un número importante de visitas.

Con esta medida, podrás servir tu archivos estáticos como css, js o imágenes en servidores más cercanos geográficamente a tus visitantes.

Ganarás en velocidad y evitarás el consumo de recursos de tu hosting.

Uno de los mejores y servicios de CDN más utilizados por todos es Cloudflare que dispone de un plan básico y gratuito muy bueno.

Pero Cloudflare es un proxy inverso que te obligará a cambiar las DNS de tu domino para apuntar a los del CDN.

Como alternativa dispones de otro servicio CDN muy efectivo y barato como es BunnyCDN que dispone de planes bastante baratos para webs con muchas visitas.

Después de adoptar todas esta medidas, podrás comprobar como los errores de Avoid Large Layout Shifts han desaparecido en casi su totalidad y que tu web ha ganado en velocidad.