Divi vs Elementor: comparativa de rendimiento

Con el último lanzamiento de Divi 5, creo que es buena idea poner ya a prueba a dos de los maquetadores de páginas más famosos. Aunque, en general, no te recomiendo que uses ninguno de los dos, incluso cuando otros blogs te dicen lo bueno que es uno y cuántas cosas puedes hacer (y así se llevan su comisión…), siempre es interesante ver cuál de los dos se queda más cerca de decir la verdad.

En este artículo comparo una página hecha con Divi con una página hecha con Elementor. Como Divi también funciona como tema, al probar Elementor usaré su tema oficial, Hello Elementor.. Estas son las versiones utilizadas en la prueba:

Divi: v5.0.1
Elementor: v3.35.7
Elementor Pro: v3.35.1
WordPress: v6.9.1
Hello Elementor: v3.4.6

Condiciones de las pruebas

He utilizado un servidor Hetzner CX22 con 2 vCPU y 4 GB de RAM; nada impresionante, pero suficiente para las pruebas. Todos los tests se han hecho en las mismas condiciones:

El tema Hello Elementor activo al hacer las pruebas con la página creada con Elementor (Divi en sí mismo es un tema).
Elementor Pro activo al testear la página creada con Elementor.
Divi 5 instalado desde cero, no actualizado desde Divi 4.
Tanto Divi como Elementor ejecutándose con la configuración por defecto.
No se ha instalado ningún otro plugin, excepto Code Profiler Pro para medir el rendimiento.
Sin sistemas de caché.
Se ha creado una página de ejemplo con cada maquetador, utilizando únicamente widgets nativos de Elementor en Elementor y módulos nativos de Divi en Divi, con el siguiente contenido:
- Una sección de ancho completo con una imagen de fondo, texto y un botón.
- Una galería simple de 5 imágenes. Configuramos Elementor para cargar el tamaño de miniatura Medium. Divi no permite cambiar el tamaño de miniatura. En su lugar, crea muchos tamaños adicionales y decide dinámicamente cuál cargar.
- Un par de botones.
- Dos columnas con dos cadenas de texto.
- Un bucle con la lista de entradas, que contiene solo cuatro publicaciones.

Así es como se ve la página con Elementor y Hello Elementor:

Y así es como se ve la página con Divi:

Parámetros de rendimiento

El rendimiento de cada plugin se ha medido utilizando los siguientes parámetros:

Tiempo de ejecución de PHP (ms) total de los plugins y tema al visitar las páginas creadas en la vista pública.
Tiempo de ejecución de PHP (ms) total de los plugins y tema al visitar la pantalla de escritorio de WordPress.
Time To First Byte (TTFB) y evento Load (ms) del editor y de las páginas creadas en la vista pública. Medimos Load en lugar de DOMContentLoaded porque los editores son aplicaciones muy dependientes de JavaScript cuya interfaz y funcionalidad solo se inicializan después de que sus scripts y otros recursos se hayan cargado y ejecutado completamente, que es cuando se dispara el evento Load. TTFB y Load se calcularon automáticamente utilizando las herramientas de desarrollo del navegador junto con un fragmento de código que recarga la misma página 10 veces y calcula el promedio.
Tamaño total de CSS y JS y número de archivos (KB) de las páginas del frontend (vista pública). En el caso del CSS, también contamos el tamaño del CSS en línea (inline), que es tan importante para el rendimiento como el CSS en archivos separados.
Tamaño total de CSS y JS y número de archivos (KB) del editor.
Tamaño del HTML (KB) generado en el frontend.
Resultados de Lighthouse, emulando un Moto G Power con conexión Slow 4G y limitación de CPU de 4x, el mismo perfil que usa PageSpeed Insights.

Los tiempos de ejecución se han medido utilizando el plugin Code Profiler Pro. Cada test se ha ejecutado cinco veces y se ha calculado el promedio para asegurar resultados precisos.

Resultados

Tiempo de ejecución de PHP (ms)

Contexto	Divi	Elementor
Escritorio	0.200	0.453
Página pública	1.087	0.814

Resultado: En números absolutos, ambos maquetadores de páginas son prácticamente iguales en cuanto al tiempo de ejecución. Si bien Divi ofrece un mejor rendimiento en el panel de administración, Elementor lo hace en el frontend. Sin embargo, en términos relativos, cabe destacar que Elementor es el doble de lento que Divi al navegar por el panel de administración. Dado que estamos analizando la página de «Escritorio», es posible que los tiempos se vean afectados por el widget de «Conoce Elementor» que Elementor te obliga a usar (y que se puede eliminar con un pequeño truco).

TTFB del frontend y tiempo de carga completo (ms)

Contexto	Divi	Elementor
TTFB	904	804
Load	1405	1403

Resultado: Ambos maquetadores son prácticamente iguales en cuanto a TTFB y tiempo de carga completa. Resulta casi curioso que hayamos obtenido tiempos casi idénticos en el evento Load, que representa el tiempo necesario para cargar todos los recursos que están directamente referenciados por el documento HTML, no los recursos que se cargan posteriormente mediante scripts.

En general, comparados con Gutenberg, Divi y Elementor ofrecen muchos más módulos y opciones de personalización, pero eso tiene un coste que no desaparece cuando se visualiza la página en el frontend.

TTFB del editor y tiempo de carga completo (ms)

Contexto	Divi	Elementor
TTFB	856	977
Load	4692	4660

Resultado: De nuevo, ambos maquetadores son prácticamente iguales; Elementor produce un TTFB un poco más alto.

Archivos CSS y JS

Contexto	Divi	Elementor
Frontend CSS	0 solicitudes (129 KB en línea, 115 KB solo de Divi)	4 solicitudes, 75 KB transferidos (13 KB en línea, 1KB solo de Elementor)
Editor CSS	44 solicitudes solo de Divi (3548 KB transferidos)	179 solicitudes solo de Elementor (1191 KB transferidos)
Frontend JS	14 solicitudes (227 KB transferidos)	10 solicitudes (182 KB transferidos)
Editor JS	138 solicitudes solo de Divi (20136 KB transferidos)	96 solicitudes solo de Elementor (7279 KB transferidos)

Resultado: Divi parece perder esta batalla, por varias razones.

Divi incluye todo el CSS en línea en la vista pública (frontend), lo cual en realidad es contraproducente en cuanto al rendimiento. Al incluir el CSS en línea, Divi impide que el navegador lo almacene en caché para futuras visitas o para visitas a otras páginas dentro de la misma sesión. Además, esto aumenta el tamaño del HTML; incluir algo de CSS en línea puede tener ventajas, pero incluirlo todo no. Tener 115 KB de CSS en línea es demasiado para justificar esta estrategia.
Divi siempre hace más solicitudes y produce el mayor tamaño de JS/CSS. Esto es malo para el usuario porque la página tiene más probabilidades de tardar más en cargarse (mayor tamaño y más solicitudes), y es malo para el navegador porque necesita hacer más trabajo para procesar todo el CSS y JavaScript adicional.
Es en el editor donde se aprecia con mayor claridad lo pesado que es Divi, incluso después de una actualización importante. Se cargan más de 20 MB de archivos JavaScript, frente a menos de 8 MB en Elementor. Desafortunadamente, estos 20 MB incluyen archivos de dudosa utilidad como uno de 2 MB llamado et-ai-app.bundle.js (IA en demasiadas partes…). Pero ese no es un problema exclusivo de Divi; Elementor carga un tamaño combinado de 1,5 MB repartido en tres archivos solo para las ~~tonterías~~ funciones de IA.

Tamaño del HTML

Divi	Elementor
161 KB	45.5 KB

Resultado: Primero de todo, hay que tener en cuenta que el servidor no utiliza ningún método de compresión como Brotli, Zstandard o Gzip. En un sitio bien optimizado estos tamaños serían menores porque la compresión HTTP estaría activada. Aun así, esta prueba muestra claramente el efecto de incluir todo el CSS en línea: aumenta considerablemente el tamaño del documento HTML.

Lighthouse

Divi

Elementor

Resultado: Sinceramente, ninguno de los dos maquetadores es una opción que recomendaría si tu objetivo es superar las Core Web Vitals o conseguir una buena puntuación en Lighthouse. En general, parece que Elementor está peor optimizado que Divi porque tiene más JavaScript y CSS sin usar. Sin embargo, Divi empeora casi todos los indicadores de Lighthouse, especialmente el CLS. Esto ya era un problema en versiones anteriores y parece seguir siéndolo. Seguramente por eso también tiene una peor puntuación.

Puntos clave

Lamentablemente, no puedo decir muchas cosas positivas sobre Divi, incluso después del gran re-desarrollo de la versión 5.

El editor se siente más ágil que la versión anterior de Divi. Además, en mi opinión, es más fácil de usar que Elementor.
Divi genera páginas mucho más pesadas que Elementor y utiliza malas prácticas en términos de rendimiento, como añadir demasiado CSS en línea.
En general, todos los aspectos medidos de Divi son peores que los de Elementor, excepto un par que no son muy importantes.
Todas las Core Web Vitals se ven afectadas negativamente al usar Divi, especialmente el CLS, que sigue siendo un problema en Divi 5.

Conclusión

Tras probar la nueva versión de Divi, debo admitir que el editor se siente mucho más ágil que antes. En la versión 4, el editor era lento y, en servidores con poca potencia, podía tardar una eternidad en cargar. Parece que ese problema se ha solucionado y, comparado con Elementor, que es muy poco intuitivo para el usuario, es un soplo de aire fresco.

Sin embargo, parece que solo se ha mejorado la sensación de respuesta del editor. El rendimiento sigue siendo un problema, especialmente el CLS, que a estas alturas casi parece ya una característica de Divi.

Así que sí, Elementor ofrece un mejor rendimiento que Divi. ¡Pero espera! Eso no significa que debas usar Elementor. Existen muchos otros maquetadores de páginas, y tanto Elementor como Divi se encuentran entre los peores, especialmente al añadirles complementos innecesarios. Si prefieres mi recomendación, opta por Gutenberg. Aquí te muestro cómo reconstruir tu web sin usar un maquetador de páginas.

Entonces, ¿son Divi o Elementor lo que afirman, «rápidos»? Lamentablemente, no.