17 Oct 2018
25 comentarios¡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:
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:
- Test realizado con GTmetrix:
Velocidad de carga con Elementor
- Test realizado con Pingdom:
- Test realizado con GTmetrix:
Velocidad de carga con Visual Composer
- Test realizado con Pingdom:
- Test realizado con GTmetrix:
Velocidad de carga con Thrive Architect
- Test realizado con Pingdom:
- Test realizado con GTmetrix:
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
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
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
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):
- 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:
- Limit Login Attempts.
- Smush.
- Swift Performance Lite.
ELEMENTOR:
- Limit Login Attempts.
- Smush.
- Swift Performance Lite.
- Elementor.
- Elementor Pro.
- GP Premium.
VISUAL COMPOSER:
- Limit Login Attempts.
- Smush.
- Swift Performance Lite.
- Contact Form 7.
- WPBakery Page Builder.
THRIVE ARCHITECT:
- Limit Login Attempts.
- Smush.
- Swift Performance Lite.
- 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:
- Divi: 370 ms
- Thrive: 458 ms
- Elementor: 511 ms
- Visual Composer: 796 ms
Velocidad de carga según GTmetrix:
- Elementor: 0,6 seg
- Divi: 0,8 seg
- Thrive: 1,0 seg
- 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:
- Elementor: 95 de 100
- Visual Composer: 90 de 100
- Thrive: 88 de 100
- Divi: 86 de 100
PageSpeed en el móvil:
- Elementor: 86 de 100
- Thrive: 85 de 100
- Visual Composer: 82 de 100
- 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:
- Thrive: 14
- Elementor: 19
- Divi: 21
- 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:
- Divi es el que menos plugins ha necesitado. De hecho, al ser un tema con su propio maquetador, no ha requerido ninguno adicional.
- Thrive Architect ha necesitado un plugin adicional además de los tres básicos: el propio maquinador.
- 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.
- 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.
Muy buena comparativa Max! Justamente hace poco me escribieron en mi blog comentando que Divi era muy pesado y le di mi justificación desde mi experiencia. Los builders son pesados durante el diseño pero no cuando se muestra al usuario final. Al final todos muestran HTML, CSS y Javascript. Si el código que muestran todos los builders son similares, no debe haber uno más pesado que otro. Puede haber diferencias mínimas de ms como has podido demostrar en la comparativa, pero no llega a ser determinante como para elegir una u otra. Al final, lo que hay que mirar desde donde yo lo veo es el conjunto de cosas que rodean al builder, como son el tipo de licencia, las plantillas prediseñadas que incopora, la facilidad de realizar los diseños, la comunidad en español, etc. Todas esas cosas son las que siempre defiendo en los artículos que escribo en mi blog sobre Divi y creo que son las que cada uno debe fijarse más. Al final, la comparativa te ha dado dos-tres ganadores más destacados, pero unas pocos ms de diferencia puede que no sean determinantes en una instalación concreta, o varía según el hsoting contratado, etc. Hay muchos factores. Pero con esta visión que has realizado se ve que los builders no son tan pesados como algunos piensan. Así que nada, felicidades por la comparativa y seguir animando a la peña a seguir usando Divi ;).
Un saludo,
Javier.
Hola Javier,
Por esos son necesarios este tipo de artículos, porque la gente te suelta en la cara "Divi es lento" y se quedan tan a gusto. Probaron Divi hace 2 años y, por más que les demuestres lo contrario (como yo he hecho en varios posts), siguen con el mismo argumento que no se sustenta.
Sobre los datos, totalmente de acuerdo contigo. Varían en función del proyecto, tipo de web, hosting contratado... pero queríamos hacer una aproximación y creo que lo hemos conseguido.
Muchas gracias por pasarte!
Muy grande Max! Todavía quedará algún despistado que piense que Divi no es rápido.
Por experiencia al final cuenta más la optimización de las fotos y contenidos que estos pedazo pepinos de maquetadores.
Habría que añadir un cosa y es que Elementor Pro no es GPL. Justo hoy acabo de escribir sobre eso en mi web.
Elementor Pro es el Wix de WordPress y casi no debiéramos ni darle difusión.
Un abrazo y enhorabuena!!!
Hola Gonzalo,
Ha sido publicar el post esta mañana a primera hora y decirme alguien por Facebook lo de "pero Divi es muy lento".
Mi cara ha sido un poema ? ¿No te estoy demostrando con datos objetivos que lo que dices no se sustenta?
Pero claro, probaron Divi hace 3 años y se quedaron en aquella época. No han probado las actualizaciones del último que han hecho de Divi una herramienta totalmente pro (y tampoco quieren hacerlo).
Muchas gracias por pasarte! Un abrazo.
Hola Max y compañía, excelente post, muchas gracias porque aporta mucho a la comunidad.
Yo soy un maniático de la carga y al final, la conclusión a la que llegas es que pierdo cantidad de horas en robarle unos milisegundos a una web... Y no merece la pena.
Hay que remangarse cuando te encuentras con una web que carga en 3 segundos pero entre 500 milisegundos y 1,5 no nos debería quitar mucho el tiempo.
Enhorabuena a todos.
Hola Daniel,
Así es! Al final da igual si una web carga a medio segundo o a dos. Hay que preocuparse cuando supera los 3 o 4 segundos. No es que de igual como tal (cuanto más rápida sea, mejor), pero tampoco puede convertirse en algo obsesivo.
Hemos utilizado la métrica de la velocidad de carga (y el resto) porque solemos ver comentarios hablando mal de uno y otro builder de forma subjetiva. Así que el objetivo era dar una aproximación sobre los cuatro.
Gracias por pasarte.
Saludos
Lo malo de perder varias horas para optimizar unos milisegundos, es que el cliente va a los 5 minutos y te sube una foto sin optimizar y te fastidia todo el trabajo jeje. Un saludo, Javier.
Ya ves jajaja
Yo les dejo a mis clientes sus páginas hiper optimizadas y luego me meto la segunda semana y... ?
Una pasada de artículo. Enhorabuena Max & Co.
Gracias por pasarte Saúl 🙂
Hola Max: Si sumáramos algunos "adicionales" como que Divi tiene 2 "themes" top y quizás otros 3 como alternativas, 2 plugins adicionales (Bloom y Monarch), mas integraciones de aplicaciones de email marketing,etc... creo que no tiene competencia hoy día.
Totalmente de acuerdo ??
Ya sabes que yo me quedo con Divi!
Hola Max
Muchas gracias por el post, son los indispensables porque normalmente esto se hace desde la óptica de la afiliación en el que el que analiza lo pone por las nubes.
Yo echo en falta un análisis, quién te deja más morralla? Es decir, si abandonas el maquetador visual cómo quedan las páginas? Iguales a cómo estaban diseñadas o llenos de shortcodes que te obligan a rediseñar de nuevo.
Arquitect, si no ha cambiado, es de los que te tienes que quedar con el plugin para siempre porque si no se descompone todo.
Esto no es sólo si abandonas el plugin, también si falla las páginas se desconfiguran. Esta es otra opción muy importante a tener en cuenta.
Un abrazo a todos!
Hola Diego,
Está muy bien el punto que comentas, aunque ess tema corresponde más al debate programadores / editores visuales y por eso no lo hemos analizado.
En cualquier caso, todos dejan shortcodes cuando dejas de utilizarlos (es el lenguaje en el que se basan sus diseños).
Por la parte que me corresponde, si dejas de usar el tema Divi, tienes disponible su maquetador en versión plugin (Divi Builder), que es compatible con cualquier plantilla, por lo que no pierdes los diseños.
Gracias por pasarte y aportar. Un abrazo!
Hola Diego!
Estoy contigo, hay que valorar también otras cosas como el conocido efecto Lock'in, del que solo se salva Elementor, los demás te atan de por vida... y tarde o temprano, se cambiara de theme o de maquetador, eso seguro.
Magnifico articulo Max, veraz y fiable al no incluir afiliados a cada producto, una gran decisión 🙂
Muy bueno el artículo Max. Prosit, para todos!!!
Muchas gracias para usted y su maravilloso colectivo por el aporte comparativo tan necesario!!
Este post se va directo a mis favoritos 😉
Muchísimas gracias por la aportación, Max.
Un abrazo.
Hola. Gracias por el articulo. Estoy montando un blog con wordpress y me pica la curiosidad con Divi. No tengo mucha experiencia, tan solo he hecho una web con bridge y con el bakery . Me pareció , la verdad, muy tedioso, aunque cuando ya le coges el truco no es tan difícil . Lo que me dí cuenta que es muy necesario manejar un poco de CSS y html que no es mi caso para que el resultado fuera profesional. Diseñar con Divi lo veo más ameno sobre la propia web. Mis preguntas son: ¿ Necesito con Divi saber codigo? ¿ Para una usuaria inexperta es recomendable? Tiene una mayor inversión y me da miedo que no sea para mi. Gracias de antemano.
Hola Maribel,
En mi opinión, Divi es más sencillo que Visual Composer, pero esto es algo subjetivo. Cuando dominas una herramienta, por difícil que sea, deja de parecérterlo.
De todas formas, si quieres probar Divi, puedes hacerlo directamente en su web.
Gracias por comentar 🙂
El único editor que use en profundidad es Elementor, Divi lo estoy provando, veo que tiene una curva de amprendizaje (al menos para mi) mayor que elementor pero es cierto que me ofrece más, por lo que sigo aguantando para aprender a usarlo 😉
No sabía que un editor afectaba también a las cargas, recursos... pero vamos, en este caso de los editores que comento donde gana uno pierde el otro y viceversa a si que en este sentido de momento no me preocupo ¿O debería?
Visual composer lo tengo visto en tutoriales aunque tengo leído que se durmió un poco en los laureles.
Pero me encantó esta comparativa, ya que te muestra los editores más fuertes del mercado, luego cada uno que escoja cual se adapta mejor 🙂
¡Me encantó!
Un abrazo
Hola Álex,
Te animo a seguir aprendiendo Divi en profundidad.
De todas formas, si estás cómodo con Elementor, estupendo. De eso se trata, de familiarizarse con uno de ellos y dominarlo a nivel experto.
Muchas gracias por pasarte y comentar.
Un abrazo!
Sinceramente un gran artículo, sobre todo para los que todavía estamos empezando. Gran informe analítico y trabajo de todos vosotros. Gracias Max y Cia.
¡Muchas gracias, Ciara!
Nos alegramos de que te guste y te sea útil 😉
Saludos
Muchas Gracias Max por el análisis realizado , muy buen trabajo . comentarte que en mi Mac no se pueden ver las imágenes en los apartados :
El resultado de estas cuatro páginas es el siguiente:
Velocidad de carga :
Recursos consumidos :
¡No te vayas! Aún hay más... :
Saludos
Juan Jose
Hola de nuevo , cargaron las imágenes finalmente
era solo un retraso en la pagina
saludos