Hoy vengo con un tema de los que me encantan: editores visuales para WordPress. Ha sido una currada sacar el post, pero el resultado merece mucho la pena.

Este artículo en cuestión supone la revisión de uno que publiqué hace unos meses:

Maquetadores visuales para WordPress. Análisis y comparativa: Divi, Elementor y Visual Composer

O mejor dicho, más que una revisión, supone una segunda parte.

Los maquetadores o editores 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.

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

Por si no lo recuerdas, te refresco la memoria…

En el artículo que he mencionado arriba -el primero- varios profesionales del diseño web nos unimos para hacer un análisis y comparativa de tres editores visuales para WordPress: Divi, Elementor y Visual Composer.

Los tres diseñamos exactamente la misma web, usando un maquetador diferente (Divi en mi caso).

¿Por qué una segunda parte?

Muy sencillo. Cuando publicamos el primer post, mucha gente nos dijo que el análisis era muy interesante, aunque había un PERO.

Ese PERO es que cada una de las webs estaba alojada en un servidor diferente, por lo que algunos de los resultados se veían alterados.

Ya sabes que cada hosting WordPress tiene unos tiempos de ejecución diferentes, por lo que la carga de los tres sitios era diferente desde el origen.

¿Qué novedades trae este post?

Como somos unos cabezotas, queríamos seguir demostrando que una web diseñada con un editor visual es igual de válida y rápida que una ejecutada con otros CMS, plantillas o lenguajes de programación diferentes.

Por lo tanto, hemos vuelto a reunirnos para analizar los editores visuales para WordPress más habituales y en esta ocasión, gracias a la ayuda de SiteGround (mi actual proveedor de hosting), las cuatro páginas están alojadas en el mismo servidor.

¿Has dicho cuatro páginas? ¿Pero no eran tres?

Sí y sí, he dicho cuatro y en el primer post eran tres páginas3.

En esta ocasión, a Divi, Elementor y Visual Composer hemos querido sumar Thrive Architect, con el objetivo de hacer más plural aún nuestra comparativa.

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 editores visuales y otros, y también entre estos y los programadores) 🤦

Antes de entrar en materia, te presento a todos los responsables de este post:

 

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:

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

DIVI

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

GENERATEPRESS + ELEMENTOR

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

BRIDGE + VISUAL COMPOSER

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

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 editores 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:

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

  • Test realizado con GTmetrix:

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

 

Velocidad de carga con Elementor

  • Test realizado con Pingdom:

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

  • Test realizado con GTmetrix:

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

 

Velocidad de carga con Visual Composer

  • Test realizado con Pingdom:

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

  • Test realizado con GTmetrix:

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

 

Velocidad de carga con Thrive Architect

  • Test realizado con Pingdom:

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

  • Test realizado con GTmetrix:

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

 

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 editores visuales para WordPress


Realizadas las mediciones y comparativa entre los cuatro editores 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

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

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

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

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

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

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):

Editores visuales para WordPress: Divi, Elementor, Visual Composer y Thrive Architect (análisis y comparativa)

  • 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 editores 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 editores 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 editores, aunque destaca Elementor.

 

#3 Consumo de recursos

Si nos fijamos en el consumo de recursos que necesita para ser cargado cada uno de los editores 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 editores 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 editores 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 editores visuales para WordPress prefieres 👇

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

Share This