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.
¿Cómo medir el DOM de WordPress?
Puedes medir el DOM con SpeedWP y lo verás en el apartado PageSpeed o directamente en la herramienta 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:
- Menos de 818 nodos o componentes en total.
- Máximo 32 nodos de profundidad.
- No tener nodos con más de 60 nodos secundarios.
Cómo optimizar el DOM de 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, como puedes ver en mi guía de los temas más rápidos para WordPress.
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.
Puedes ver mi guía de los mejores builders para WordPress.
Reduce los nodos de profundidad
Los nodos de profundidad son los nodos principales de la web.
Imagina una caja grande (Tu web) con muchas cajas dentro (Nodos de profundidad).
Pero recuerda que puedes tener como máximo 32 nodos de profundidad.
Un error muy común en el editor antiguo de WordPress, es tener muchos nodos de profundidad, puesto que este no tiene secciones y lo mete todo dentro del nodo principal, o sea de la web.
Usar contenedores o secciones está muy bien para separar partes de una página, pero limita el uso.
Puedes por ejemplo usar un título y varias secciones que hagan de nodos secundarios.
Recuerda que tanto la cabecera de la web, como el pie de página, cuentan como nodos.
Limita los nodos secundarios
Los nodos secundarios son aquellos que están dentro de un nodo.
Imagina que dentro de la caja grande (Tu web), cada caja secundaria (Nodos de profundad), tiene dentro 60 cajas (Nodos secundarios).
Por ejemplo, puedes tener una sección que dentro tenga varias imágenes y 50 párrafos de texto, que ojo, se cuenta un nodo por cada uno de estos párrafos.
Aquí debes de jugar y dividir el contenido en diferentes nodos de profundidad, para no tener un nodo secundario demasiado grande.
Si sueles tener post muy grandes tendrás problemas de este tipo.
Lo recomendable es que uses un builder ligero como Gutenberg para separar el contenido en diferentes nodos secundarios.
Limita el número de post
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
Limita el número de productos
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.
Limita el número de comentarios
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.
Limita el número de párrafos
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.
Activa Lazy Load
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.
Te recomiendo mi guía de activar Lazy Load en WordPress.
Conclusión
Como has podido ver, se pueden hacer muchas cosas para optimizar el DOM de WordPress.
Al reducirlo, acelerarás mucho tu web.
Espero que esta guía te sea de utilidad.
