Inicio > WPO WordPress > Cómo evitar un tamaño excesivo de DOM en WordPress

Cómo evitar un tamaño excesivo de DOM en WordPress

Optimizar DOM WordPress

En esta guía de enseñaré a evitar un tamaño excesivo de DOM en WordPress.

Una técnica con la que puedes reducir mucho el peso de tu web.

¡Vamos!

¿Qué es el DOM de WordPress?

El Document Object Model o DOM de WordPress, son los componentes HTML que componen la web.

Desde DIVs, cabeceras, textos, imágenes, vídeos y demás.

Cada componente nuevo, es un nodo más en el DOM.

Pero debes saber que mejorar esta métrica no mejorará la velocidad de WordPress o si lo hace es en muy poco.

Para tener una web optimizada debes de optimizar WordPress, como explico paso a paso en mi libro WPO para WordPress o en WPOptimizers si también quieres tener soporte personalizado y aprender más sobre WordPress.

¿Cómo medir el DOM de WordPress?

Puedes medir el DOM con PageSpeed y si está mal, este te dará un error en rojo de "Evita un tamaño excesivo de DOM".

Evita un tamaño excesivo de DOM PageSpeed

¿Cuáles son las métricas DOM recomendadas?

Las métricas DOM recomendadas son siempre cuanto menos mejor, pero según PageSpeed, debería de tener:

  • Muestra un aviso cuando la web tiene más de 800 nodos.
  • Muestra un error cuando la web tiene más de 1.400 nodos.

Cómo evitar un tamaño excesivo de DOM en WordPress

Te voy a dar las claves para optimizar el DOM de WordPress.

Usa un tema ligero

Un tema ligero evitará tener montones de nodos dentro de otros nodos como DIVs, que no sirven para nada.

Yo siempre recomiendo Astra, aunque hay muy buenos temas.

Usa un builder ligero

Hay builders que meten montones de DIVs dentro de otros, que al final termina por sumar mucho más de lo recomendado.

Gutenberg es una buena opción, aunque Elementor ha optimizado su DOM en la versión 3.0.

Limita el contenido

Lo que más reduce el DOM de WordPress es limitar el contenido de la página.

Una gran idea es limitar el número de párrafos, pero ojo, no te recomiendo hacerlos muy grandes, puesto que en móvil se verán grandes textos.

Si has seguido el consejo de separar el contenido en secciones, seguramente el número habrá bajado.

Pero si usas párrafos de una línea en un texto muy extenso, puede que tengas que reducirlos a párrafos algo más grandes, para que haya menos nodos.

Te recomiendo limitar el número de post que muestras en el blog o en las páginas de categorías o etiquetas.

De esta forma no tendrás problemas con superar los límites recomendados para el DOM.

Intenta limitar el número de productos de WooCommerce que muestras en el home o en las páginas de categorías y etiquetas.

Según el tema o builder que uses, si es que usas alguno, podrás mostrar más o menos componentes.

Si tienes una web en la que dejen muchos comentarios, deberías de limitar el número de comentarios que se muestran.

Esto lo puedes hacer desde Ajustes - Comentarios - Separar los comentarios en páginas de...

Según el DOM que tengas, podrás mostrar más o menos comentarios, así que analiza la web con diferentes combinaciones.

Activa la carga diferida

Activar Lazy Load te permitirá no cargar las imágenes de la web, hasta que el usuario llegue a ellas.

Pero esto también reduce el número de nodos de la web, lo que la hará más ligera.

Echa un vistazo a mi guía de optimizar imágenes en WordPress.

Evita un tamaño excesivo de DOM en WordPress

Como has podido ver, se pueden hacer muchas cosas para optimizar el DOM de WordPress.

Al reducirlo, acelerarás mucho tu web, lo que te ayudará a optimizar las Core Web Vitals en WordPress.

Espero que esta guía te sea de utilidad.