¡Hoy quiero hablar de un tema que me encanta: los maquetadores visuales para WordPress. Ha sido una currada sacar el post, pero el resultado merece mucho la pena.

Los maquetadores visuales para WordPress están de moda a la hora de diseñar páginas web. Además generan tanto seguidores como detractores a partes iguales.

Por ese motivo, llevo un tiempo queriendo publicar este artículo, pero no quería que fuera el típico post en el que enumero los diferentes maquetadores y las características de cada uno.

Además, ese post ya lo tengo: plugins “arrastrar y soltar” para diseñar y maquetar páginas en WordPress.

Quería que fuera un post diferente, muy completo y sobre todo arroje un poco de luz al tema de los diferentes maquetadores visuales para WordPress.

¿Por qué?

Porque en los últimos meses se está hablando mucho de ellos (bien y mal) y además existe una especie de rivalidad ABSURDA entre quienes usan uno y otro.

De modo que, para hablar de ellos con propiedad y desterrar algunos mitos, he creado este post en el que voy a hacer un análisis real de Divi, Elementor y Visual Composer.

Para ello, he invitado a especialistas en diseño web con WordPress que son amigos míos y cada uno de ellos usa un maquetador diferente.

¿Cómo he planteado este post?

La mecánica es muy sencilla. Los cuatro diseñadores hemos creado la misma página y hemos utilizado nuestro maquetador de cabecera.

Es decir, los cuatro hemos cogido el mismo diseño y lo hemos montado en Divi, Elementor, Thrive Architect y Visual Composer.

Exactamente el mismo, lo hemos calcado (cambiado alguna cosita) y el objetivo es analizar el comportamiento y rendimiento de cada uno de los maquetadores.

Este tema daría para un post muy largo, pero no es ese el objeto de debate.

Además, queremos demostrar que somos cuatro diseñadores web amigos, que no existe rivalidad entre nosotros, a pesar de que a priori somos competencia.

La rivalidad se la dejamos a los niños de 10 años 😀

(Sí, sigue habiendo rivalidad entre los diseñadores que usan unos maquetadores visuales y otros, y también entre estos y los programadores) ?

Antes de entrar en materia, quiero agradecer enormemente a SiteGround que nos haya cedido un hosting totalmente gratuito para que hagamos todas las pruebas. A parte de un servicio técnico excelente 24/7, son más salaos que las pesetas. Sin ellos este post no hubiera sido posible.

Y lo primero de todo es presentarte a los cuatro responsables de este análisis:

Max Camuñas

A mí ya me conoces, soy el autor del blog que lees ahora mismo. Estoy especializado en diseño web con Divi.

Jose Antonio Carreño es un diseñador web especializado en la combinación Generatepress + Elementor.

Almudena Morales utiliza la fórmula Bridge + Visual Composer en sus diseños web.

Jose Cabello nos trae la novedad en este segundo post y ha diseñado su web con el editor visual Thrive Architect.

Análisis y comparativa entre Divi, Elementor, Visual Composer y  Thrive Architect


Igual que hicimos en el primer post, en este caso hemos diseñado todos la misma web, cada uno con el correspondiente editor visual que utiliza habitualmente.

Como puedes ver, el resultado son diseños prácticamente iguales. Hay detalles diferentes, por supuesto. Cada plantilla y editor tienen sus propias particularidades.

El resultado de estas cuatro páginas es el siguiente:

Divi
Maquetadores visuales para WordPress: Elementor
GeneratePress + Elementor
Maquetadores visuales para WordPress: Visual Composer
Bridge + Visual Composer
Maquetadores visuales para WordPress: Thrive Architect
Thrive Architect

Además, todos hemos usado exactamente las mismas imágenes (yo me encargué de optimizarlas y subirlas a cada web) y el mismo plugin de caché: Swift Performance Lite.

¿Por qué Swift Performance Lite y no WP Rocket?

La idea original era utilizar WP Rocket como plugin de caché y optimización, pero me dio varios errores al instalarlo y configurarlo en dos de las páginas y preferí buscar una alternativa.

Swift Performance Lite es un plugin que descubrí hace unas semanas y que he probado en las últimas páginas que he diseñado con excelentes resultados a la hora de mejorar la velocidad de carga de WordPress.

Por lo tanto, se ha convertido en una alternativa muy potente a WP Rocket (ya hablaré de plugins de caché en otro post).

En resumen, los plugins que comparten los cuatro sitios son:

  • Limit Login Attempts para la garantizar la seguridad de WordPress.
  • Smush para comprimir las imágenes.
  • Swift Performance Lite para temas de caché y optimización.

Y ahora que ya estamos en contexto, paso al análisis y comparativa entre los diferentes maquetadores visuales para WordPress.

En cuanto a métricas y datos, voy a analizar los mismos que en el artículo original 🙂

Análisis de la velocidad de carga de Divi, Elementor, Visual Composer y Thrive Architect


Explicado el planteamiento del post, los autores y los plugins, es el momento de analizar la velocidad de carga de cada uno de los sitios.

Para tener datos diferentes, utilizaré dos herramientas muy habituales: Pingdom y GTmetrix.

¡Empezamos!

Velocidad de carga con Divi

  • Test realizado con Pingdom:
Análisis de la velocidad de carga: Divi
  • Test realizado con GTmetrix:
Análisis de la velocidad de carga: Divi

Velocidad de carga con Elementor

  • Test realizado con Pingdom:
Análisis de la velocidad de carga: Elementor
  • Test realizado con GTmetrix:
Análisis de la velocidad de carga: Elementor

Velocidad de carga con Visual Composer

  • Test realizado con Pingdom:
Análisis de la velocidad de carga: Visual Composer
  • Test realizado con GTmetrix:
Análisis de la velocidad de carga: Visual Composer

Velocidad de carga con Thrive Architect

  • Test realizado con Pingdom:
Análisis de la velocidad de carga: Thrive Architect
  • Test realizado con GTmetrix:
Análisis de la velocidad de carga: Thrive Architect

Comparativa de rendimiento entre Divi, Elementor, Visual Composer y Thrive Architect


DIVI:

  • PageSpeed (Pingdom): 94
  • PageSpeed (GTmetrix): 98
  • Tiempo de carga (Pingdom): 370 ms
  • Tiempo de carga (GTmetrix): 0,8 segundos
  • Tamaño de la página (Pingdom): 684 kb
  • Tamaño de la página (GTmetrix): 571 kb
  • Peticiones externas (Pingdom): 21
  • Peticiones externas (Pingdom): 18
  • YSlow Score: 92%

ELEMENTOR:

  • PageSpeed (Pingdom): 94
  • PageSpeed (GTmetrix): 99
  • Tiempo de carga (Pingdom): 511 ms
  • Tiempo de carga (GTmetrix): 0,6 segundos
  • Tamaño de la página (Pingdom): 540 kb
  • Tamaño de la página (GTmetrix): 543 kb
  • Peticiones externas (Pingdom): 19
  • Peticiones externas (Pingdom): 19
  • YSlow Score: 92%

VISUAL COMPOSER:

  • PageSpeed (Pingdom): 91
  • PageSpeed (GTmetrix): 95
  • Tiempo de carga (Pingdom): 796 ms
  • Tiempo de carga (GTmetrix): 1,1 segundos
  • Tamaño de la página (Pingdom): 833 kb
  • Tamaño de la página (GTmetrix): 817 kb
  • Peticiones externas (Pingdom): 25
  • Peticiones externas (Pingdom): 23
  • YSlow Score: 89%

THRIVE ARCHITECT:

  • PageSpeed (Pingdom): 94
  • PageSpeed (GTmetrix): 90
  • Tiempo de carga (Pingdom): 458 ms
  • Tiempo de carga (GTmetrix): 1 segundo
  • Tamaño de la página (Pingdom): 555 kb
  • Tamaño de la página (GTmetrix): 545 kb
  • Peticiones externas (Pingdom): 14
  • Peticiones externas (Pingdom): 14
  • YSlow Score: 92%

Nivel de consumo de cada uno de los maquetadores visuales para WordPress


Realizadas las mediciones y comparativa entre los cuatro maquetadores visuales para WordPress, es el momento de comprobar el nivel de recursos y archivos que consume cada uno para su carga.

Para ello, recurro a Pingdom, que muestra la solicitud de archivos de cada sitio web.

Recursos consumidos por Divi

Nivel de consumo de recursos: Divi

Las solicitudes de archivos que realiza Divi para cargar son las siguientes (21 peticiones):

  • Servidor. El primer recurso que aparece es la carga de la web desde el servidor y su tiempo de respuesta.
  • Archivos JS.
  • Estilos CSS.
  • Fuentes tipográficas desde la biblioteca de Google Fonts.
  • Imágenes.
  • Favicon.

Recursos consumidos por Elementor

Nivel de consumo de recursos: Elementor

Estos son los archivos y solicitudes que realiza la combinación de Elementor + GeneratePress (19 peticiones):

  • Carga de la web desde el servidor.
  • Archivos JS.
  • Estilos CSS.
  • Imágenes.
  • Tipografías.
  • Favicon.

Recursos consumidos por Visual Composer

Nivel de consumo de recursos: Visual Composer

En el caso de Visual Composer + Bridge, el consumo de archivos es el siguiente (25 peticiones):

  • Servidor.
  • Imágenes.
  • Estilos CSS.
  • Tipografías.
  • Archivos JS.
  • Favicon.

Recursos consumidos por Thrive Architect

Por último, en el caso de Thrive la solicitud de archivos es la siguiente (14 peticiones, el que menos realiza de todos):

Nivel de consumo de recursos: Thrive Architect
  • Servidor.
  • Estilos CSS.
  • Imágenes.
  • Archivos JS.
  • Fuentes.
  • Favicon.

Plugins instalados en cada sitio web


Como he comentado en uno de los epígrafes anteriores, las cuatro webs tienen un grupo común de plugins: optimización y caché, compresión de imágenes y seguridad.

Veamos ahora las especificaciones de cada sitio en lo que a plugins se refiere.

DIVI:

Los 3 plugins mencionados por defecto:

  1. Limit Login Attempts.
  2. Smush.
  3. Swift Performance Lite.

ELEMENTOR:

  1. Limit Login Attempts.
  2. Smush.
  3. Swift Performance Lite.
  4. Elementor.
  5. Elementor Pro.
  6. GP Premium.

VISUAL COMPOSER:

  1. Limit Login Attempts.
  2. Smush.
  3. Swift Performance Lite.
  4. Contact Form 7.
  5. WPBakery Page Builder.

THRIVE ARCHITECT:

  1. Limit Login Attempts.
  2. Smush.
  3. Swift Performance Lite.
  4. Thrive Architect.

 
 
 

Conclusiones sobre el uso de maquetadores visuales en WordPress


Para cerrar el post, es el momento de extraer una serie de conclusiones para poner todos los datos en contexto.

#1 Velocidad de carga

Lo primero que quiero destacar es que, si en una web se trabaja bien la optimización, da igual qué editor visual utilices. Como puedes ver, todos ofrecen muy buenos resultados a nivel de velocidad de carga.

Por lo tanto, los cuatro son opciones muy válidas para diseñar una web a día de hoy. Solo tienes que elegir cuál te gusta y el que más cómodo te perece.

Dicho esto, toca ordenar los tiempos de carga en función de la herramienta utilizada:

Velocidad de carga según Pingdom:

  1. Divi: 370 ms
  2. Thrive: 458 ms
  3. Elementor: 511 ms
  4. Visual Composer: 796 ms

Velocidad de carga según GTmetrix:

  1. Elementor: 0,6 seg
  2. Divi: 0,8 seg
  3. Thrive: 1,0 seg
  4. Visual Composer: 1,1 seg

Por lo tanto, los dos que mejor se comportan a nivel de velocidad de carga son Divi y Elementor (aunque Thrive no tienen nada que envidiarles).

#2 PageSpeed

Otra métrica que podemos tener en cuenta a la hora de comparar estos cuatro maquetadores visuales para WordPress es el PageSpeed de Google.

Los datos ordenados son:

PageSpeed en el escritorio:

  1. Elementor: 95 de 100
  2. Visual Composer: 90 de 100
  3. Thrive: 88 de 100
  4. Divi: 86 de 100

PageSpeed en el móvil:

  1. Elementor: 86 de 100
  2. Thrive: 85 de 100
  3. Visual Composer: 82 de 100
  4. Divi: 80 de 100

Como puedes ver, los datos de PageSpeed son muy similares en los cuatro maquetadores, aunque destaca Elementor.

#3 Consumo de recursos

Si nos fijamos en el consumo de recursos que necesita para ser cargado cada uno de los maquetadores visuales, los resultados son:

  1. Thrive: 14
  2. Elementor: 19
  3. Divi: 21
  4. Visual Composer: 25

Por lo tanto, Thrive Architect es el que menos recursos necesita para cargar.

Como puedes ver, los cuatro sitios comparten el tipo de recursos que necesitan para cargar.

#4 Plugins

En el caso de los plugins que cada uno ha requerido para conseguir el mismo diseño:

  1. Divi es el que menos plugins ha necesitado. De hecho, al ser un tema con su propio maquetador, no ha requerido ninguno adicional.
  2. Thrive Architect ha necesitado un plugin adicional además de los tres básicos: el propio maquinador.
  3. Visual Composer ha necesitado dos plugins adicionales: el maqueador y Contact Form 7, pues su editor no incluye un módulo de formularios de contacto.
  4. Elementor ha necesitado tres plugins adicionales: dos para el maquetador y otro para colección de módulos premium de GeneratePress.

Por lo tanto, si nos fijamos en el número de plugins necesarios para montar una web similar a esta,  destaca Divi.


Hasta aquí las conclusiones de este post en el que cuatro diseñadores hemos unido fuerzas para analizar y comparar los maquetadores visuales para WordPress más habituales y extendidos.

Vuelvo a repetir que los cuatro son magníficas opciones para diseñar una web en estos momentos.

Si quieres montar una web, estás indeciso y has llegado hasta este post, analiza las opciones y funcionalidades que te ofrecen los cuatro maquetadores para dedicar cuál usas en tu proyecto.

Por último, muchas gracias a los dos «Joses» y a Almudena ¡Chicos, sois muy grandes! Agradecido por vuestro tiempo y paciencia.

Y por supuesto, millones de gracias a SiteGround por facilitarnos un posting para hacer todas estas pruebas y diseñar las cuatro páginas 🙂


¡Es momento de debatir! Cuéntanos qué te ha parecido nuestro análisis y cuál de los cuatro maquetadores visuales para WordPress prefieres ?

Portada: logotipos Divi, Elementor, Visual Composer y Thrive Architect.

Summary
Maquetadores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)
Article Name
Maquetadores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)
Description
- Análisis y comparativa entre Divi, Elementor, Visual Composer y Thrive Architect- Análisis de la velocidad de carga de Divi, Elementor, Visual Composer y Thrive Architect: Velocidad de carga con Divi Velocidad de carga con Elementor Velocidad de carga con Visual Composer Velocidad de carga con Thrive Architect- Comparativa de rendimiento entre Divi, Elementor, Visual Composer y Thrive Architect- Nivel de consumo de cada uno de los maquetadores visuales para WordPress: Recursos consumidos por Divi Recursos consumidos por Elementor Recursos consumidos por Visual Composer Recursos consumidos por Thrive Architect- Plugins instalados en cada sitio web-Conclusiones sobre el uso de maquetadores visuales en WordPress: #1 Velocidad de carga #2 PageSpeed #3 Consumo de recursos #4 Plugins
Author
Publisher Name
Max Camuñas
Publisher Logo
Share This