El otro día veíamos cómo reducir el DOM en WordPress, e incluso el DOM con Elementor, pero claro, alguien tenía que preguntar eso de que ¿y qué pasa con Divi?, ¿se puede reducir el tamaño del DOM si usas el tema Divi” data-eafl-name=”Divi” data-eafl-shortcode=”%5Beafl%20id%3D%2280136%22%20name%3D%22Divi%22%20text%3D%22%3Ca%20href%3D”https://ayudawp.com/reducir-dom-divi/_wp_link_placeholder”%20data-wplink-edit%3D’true’%3Etema%20Divi%3C%2Fa%3E%22%5D”>tema Divi y te sale ese aviso en PageSpeed?
Pues sí, vamos a ver qué podemos hacer, verás qué fácil…
Divi y el DOM
Aunque hay mucha gente que piensa lo contrario, la realidad es que Divi hace muchas versiones que no entrega un DOM muy grande, pues redujo con mucho la cantidad de divs que usa para generar el contenido, aún siendo mayor que si creas la página solo con el editor de WordPress.
Por este motivo, no ha sido ni es tarea habitual de los usuarios de Divi pelearse con el DOM, pero hay ocasiones en que sí puede llegar a ser un problema, a pesar de que es mucho más fácil lograr una puntuación de rendimiento de 100/100 con Divi que con Elementor.
Pero antes de seguir, ¿has visto ya la guía general de cómo optimizar el DOM en WordPress, pues todo lo ahí explicado también se aplica a la hora de usar Divi.
Te resumo los puntos que encontrarás en la guía, no dejes de revisarla antes de seguir:
Todos estos puntos afectan al DOM, da igual si usas maquetador o no, da igual si usas Divi o no, así que antes de revisar ajustes y optimizaciones específicas del DOM para Divi, debes aplicar las optimizaciones genéricas de cualquier WordPress, sino estás haciendo las cosas a medias ¿entendido?
Seguimos, con lo que he comprobado que puede ayudar a reducir el DOM en concreto si usas el tema Divi…
Simplifica el diseño
Es cuestión de matemáticas simple: a más elementos en el diseño un DOM mayor, así que la manera más lógica de reducir el DOM es hacer que el documento sea más corto, con menos elementos.
Y no me refiero simplemente a poner menos contenido en la página, porque igual tiene que estar lo que tiene que estar, me refiero a que puedes reducir la cantidad de elementos en la jerarquía interna del HTML generado por Divi.
Lo vas a entender enseguida…
Lo que ves en la captura anterior es la estructura de una página creada con Divi en la visualización de wireframe, o clásico, donde puedes ver que hay secciones, que a su vez contienen filas, y dentro de cada fila hay módulos de Divi.
Normalmente en Divi se diseña así siempre: Sección → Filas → Módulos, en automático, porque es lógico, ordenado, e incluso nos ayuda a estructurar fácilmente la página, y comprenderla a simple vista. Pero esto no quiere decir que sea lo más óptimo, y me explico…
El hecho de separar las distintas partes del diseño en secciones y filas tiene sentido si vamos a aplicar un aspecto diferente a las distintas secciones o filas, si los módulos tienen que estar dentro de un contenedor que tenga un diseño diferente al del resto, pero no siempre es así.
En muchas ocasiones podría servirnos igual añadir todos los módulos en una única fila y sección, uno a continuación del siguiente, sin necesidad de repartirlos entre distintas filas y secciones.
De hacerlo así, el código resultante se reduce muchísimo, o sea, que reducimos el DOM.
Solo con reducir la cantidad de secciones, metiendo todas las filas en un par de secciones, por tema de diseño, se reduce en un 15% el tamaño del DOM.
Y si metemos todos los módulos en una única fila la reducción del DOM pasa a ser del 50%.
No siempre vas a poder, porque puede que una fila tenga que estar a 4 columnas y la siguiente solo a una columna, pero te animo a probar, y verás que son muchas las ocaciones en que añades secciones y filas por rutina, pero sin necesidad de ello.
Cómo configurar correctamente los ajustes de Divi para reducir el tamaño del DOM
Desde hace ya unos añitos que Divi incluye sus propios ajustes para mejorar el rendimiento y optimización de los recursos que utiliza, y una configuración adecuada de los mismos te ayudará a mejorar la velocidad de carga de tus diseños hechos con Divi y a reducir el DOM generado.
No generes CSS estático
Aunque uno piense que es una mejora de optimización, y normalmente lo es, el hecho de convertir el CSS de las páginas a contenido estático integrado (inline) en la página, de manera que también se pueda almacenar en caché, en lo que se refiere al tamaño del DOM es justo lo contrario.
El CSS integrado aumenta el DOM de tus páginas, al añadir todo el código CSS al código fuente, en vez de simplemente hacer una llamada al archivo necesario para generarlo.
Por supuesto, esto es algo que debes probar y experimentar, para comprobar qué le va mejor a tus diseños, pero en lo que se refiere al DOM, desactiva esta «optimización» de Divi.
Carga todo dinámicamente
En la página de ajustes generales de rendimiento hay algunas opciones muy interesantes, que ayudan a mejorar la velocidad de carga, a un consumo más eficaz de los recursos, y a reducir el DOM.
La siguiente captura sería la configuración óptima pensando en el DOM:
Te resumo lo que interesa y lo que no:
- Carga dinámicamente (si hace falta) todo lo posible: CSS, módulos, iconos, JavaScript.
- Aplaza la carga de cualquier script.
- Activa el CSS crítico con un umbral alto, para mejorar las lecturas de CLS en PageSpeed.
- Desactiva todo lo innecesario: emojis, Google Fonts, etc.
No uses Google Fonts
En la página de ajustes generales de Divi tienes la posibilidad de cargar Google Fonts, algo que debes evitar, por retrasos en la carga de páginas, además de por problemas de privacidad. Si, por cualquier motivo (siempre estéticos) quieres usarlas, alójalas localmente y no actives los subgrupos de fuentes, es innecesario.
No uses los ajustes de rendimiento de Divi
Pues bien, a pesar de lo que te he dicho justo arriba, lo ideal, si puedes, es que no uses las opciones de la pantalla de rendimiento de Divi, y es debido a que hay plugins que hacen de manera más eficiente las mismas optimizaciones que te ofrece esa pantalla.
Es mejor usar WP Rocket o Speed Optimizer para mejorar las optimizaciones normales de aplazamiento de scripts, CSS crítico, etc. Lo único que dejaría activo sería la carga dinámica de elementos de Divi, algo que no pueden gestionar los plugins de optimización de terceros, pero el resto lo hacen mejor los plugins especializados.
Los ajustes que sí podrías dejar activos en Divi serían los siguientes:
Para todo lo demás, repasa esta guía de cómo optimizar Divi con plugins.
Y nada más, espero que estos consejos te ayuden a reducir el tamaño del DOM si usas el tema Divi. Si te queda alguna duda abajo tienes los comentarios.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
