Div Vs Elementor Performance 2021: ¿Qué constructor de páginas de WordPress es más rápido?

¿Intenta decidir entre Divi y Elementor como un constructor visual para su sitio de WordPress? Cuando se trata de funciones y flexibilidad de diseño, son dos de las mejores páginas/temas existentes y ambos le permiten crear sitios web increíbles sin escribir una sola línea de código. Sin embargo, no estamos aquí para evaluar sus méritos de diseño. En cambio, nos centramos en otra comparación importante: el rendimiento del Elementor Div vs. ¿Simple, Divic o Elementer le ayuda a crear un sitio de WordPress de carga rápida? Después de todo, tener un sitio web excelente es solo la mitad de la pelea: también necesita que se cargue rápidamente para proporcionar una mejor experiencia del usuario, mejorar sus tasas de conversión y maximizar la clasificación de SEO.
Para ayudarlo a responder a esta pregunta, realizaremos algunas pruebas prácticas de rendimiento utilizando Div y Elementor. Enviaremos a cada herramienta varias pruebas e intentaremos comparar su velocidad individualmente. Luego, analizaremos algunos otros puntos de comparación y luego concluiremos con algunos consejos sobre cómo puede acelerar ambos complementos y reducir los tiempos de carga media. Nota: Inicialmente, publiqué esta comparación en enero de 2021. Sin embargo, tanto Div como Elementor ha centrado muchos trabajos de desarrollo en mejorar su rendimiento para tener en cuenta la actualización de la experiencia de la página de Google.
Como resultado, ambos constructores hicieron un gran trabajo al reducir su “peso” y acelerar los tiempos de carga, por lo que reanudamos por completo nuestras pruebas y actualizamos por completo esta publicación en noviembre de 2021. Cómo probamos la variable de velocidad frente a llega a probar div vs elementor en términos de velocidad del sitio. Por esta razón, antes de llegar a los datos reales, creemos que es útil primero establecer la forma en que ejecutamos las pruebas. En total, probaremos cada instrumento en cuatro escenarios diferentes. ¿Por qué cuatro? Porque creemos que esto nos brinda la mejor oportunidad de capturar esas variables y ayudarlo a comprender cómo comparar Div y Elementor en términos de rendimiento. Nuestro y luego crearemos un diseño básico con una sola línea de texto. La idea es ver el “peso” básico de cada complemento justo antes de agregar widgets/módulos. Tanto Elementor como Div señalaron para evitar cargar activos innecesarios en sus actualizaciones de 2021, por lo que esperamos que estas páginas sean bastante fáciles. Escenario #2 En el segundo escenario, agregaremos contenido real usando módulos/widgets. Esta es la parte difícil, porque cada herramienta tiene un conjunto diferente de elementos de contenido.
Para tratar de mantener las cosas con la mayor precisión posible, utilizaremos widgets equivalentes para cada constructor. Si tiene curiosidad, esto es lo que agregamos:
Acordeón (dos secciones)
Botón
Medidor de números
Formulario de contacto
Tabla de precios (un solo plan)
Sin el cohete WP Rocket vs WP para cada uno de los dos escenarios anteriores, ejecutaremos dos conjuntos de pruebas: una sola prueba sin optimización de rendimiento. Es decir, solo tenemos los generadores de página instalados.
Una prueba con WP Rocket activado y sus características para optimizar los archivos activados.
En el WP Rocket 3.9, hemos lanzado algunas funciones y mejoras nuevas que pueden hacer un gran trabajo al optimizar CSS y JavaScript que generan los creadores:
Eliminar CSS no utilizado: esto le permite eliminar CSS necesario, página por página. Los complementos para el generador de página pueden agregar muchos CSS innecesarios, por lo que esta es una excelente manera de reducir ambos generadores.
Retrasar la ejecución de JavaScript: ahora le permite retrasar todos los archivos de JavaScript hasta una interacción con el usuario, que acelerará su tiempo de carga inicial (y, por lo tanto, el tiempo de pintura más alto).
Lo verá en los datos a continuación, pero estas características, junto con el caché de cohetes WP y otras funciones de optimización, pueden traer altas mejoras para Elementary y Div.
¡Otros detalles del hogar siguen siendo algunos detalles del hogar antes de mostrar sus datos! En primer lugar, están las configuraciones del generador de página en sí. Probaremos:
Elementor (Versión 3.4.7) + Elementor Pro (versión 3.4.2), heredando estilos de nuestro tema (en lugar de usar los estilos de Elemento Built -In). Debido a que necesita Elementor Pro para que coincida con las características de la Divic, creemos que es justo instalarlo.
La versión del complemento Divi Builder (versión 4.12). Si bien muchas personas usan el tema Div, creemos que es justo comparar el complemento con el complemento, porque la base inicial no sería igual de lo contrario. Si desea utilizar el tema, puede consultar nuestro análisis del rendimiento del tema de la división. También activamos los experimentos de velocidad de Elementer (salida DOM optimizada, activos mejorados y carga de CSS mejorada), que recomendamos si construye un nuevo sitio con Elemento. Puede activarlos accediendo al elemento → Configuración → Experimentos. Estas siguen siendo técnicamente funciones alfa/beta cuando escribimos esta publicación, pero no debe tener problemas con su uso en un nuevo sitio.
Además, nuestro sitio de prueba es:
Usando la versión gratuita del tema GenerePress, uno de los temas de WordPress más rápidos
Alojado en una caída de DigitalOcean de $ 5 por mes usando una pila Ninx
Y para recopilar datos de rendimiento, utilizaremos WebPageTest con la siguiente configuración:
Pruebe como iPhone 8: debido a que Google ha cambiado a un índice para dispositivos móviles, nos centraremos en los resultados de rendimiento móvil.
Use una conexión LTE acelerada (12 Mbps, 70 ms RTT): en el mundo real, los tiempos de carga probablemente serían más rápido si un usuario está conectado a Wifi.
Ejecute nueve pruebas separadas y tome el valor medio para eliminar la variabilidad de una sola prueba.
Como referencia, antes de instalar el generador de página o el cohete WP, nuestro sitio de prueba tenía los siguientes detalles:
0.283 s tiempo hasta el primer byte
Mediana de 0.444 S la pintura más grande con máximo contenido.
Tiempo de carga promedio de 0.586 s
7 solicitudes HTTP
El tamaño del archivo de 28 kbcomparison con el rendimiento de Div vs Elementor ahora, ¡pasemos a los datos! Escenario n. ° 1: El único texto Esta primera prueba es cuando acabo de agregar una sola línea de texto usando el widget de texto de cada constructor. La página es súper básica: nuevamente, esto es solo para obtener una especie de “peso básico” para cada herramienta. Así es como se ve la página:
Solo algunos texto aquí son los datos cuando solo usa complementos para el generador de página (sin cohete WP):

Puedes ver que hay muy poca diferencia entre los dos ahora. Si usa WP Rocket para implementar la memorización en caché y optimizar CSS y JavaScript, verá que los dos todavía son casi iguales. Sin embargo, WP Rocket puede reducir en gran medida el tamaño de la página y reducir los tiempos de pintura para el contenido más grande de ambos constructores.

Escenario #2: página de contenido ahora, para realizar una prueba después de agregar un contenido. De nuevo, esto es lo que agregué con cada constructor:
Acordeón (dos secciones)
Botón

Medidor de números
Formulario de contacto
Testigo
Tabla de precios (un solo plan) Así es como se ve la versión elemental:
Elementor con algún contenido y así es como se ve la división:
Div con algunos contenidos dudamos de que cualquiera de las páginas gane premios de diseño, pero las dos son prácticamente idénticas en términos de los módulos que hemos utilizado.Aquí están los datos cuando solo usa complementos para el generador de página (sin cohete WP):

Nuevamente, puede ver la misma tendencia básica que la página de prueba anterior, aunque el mayor tiempo de dolor de Divic Builder A fue mejor que el Elementor en esta ronda.
Sin embargo, cuando optimiza ambas páginas con WP Rocket, puede ver la misma gran disminución en el tamaño del archivo en ambas páginas. Además, los períodos de la pintura satisfactoria más grande fueron casi idénticas al cohete WP. La disminución en el elemento es particularmente notable, porque el tiempo LCP con el cohete WP ha sido ~ un tercio sin cohete WP:

Conclusiones: ¿es el elemento más rápido que la división? Cuando escribí por primera vez esta publicación y realicé nuestras pruebas en enero de 2021, Elementor tuvo una ligera ventaja sobre la divicidad en términos de rendimiento. Sin embargo, las cosas han cambiado como resultado del lanzamiento de Div 4.10 en agosto de 2021, que ha realizado grandes mejoras en el rendimiento del frontend Div. Ahora, Div es mucho mejor para cargar solo los recursos mínimos necesarios para cada diseño, lo que da como resultado un tamaño de página mucho más liviano. Elementor también experimenta este tipo de carga/optimización dinámica de los activos, que he activado en Elemoror a través de los experimentos de velocidad de Elementor. Entonces, ¿cuáles son los resultados de estas mejoras?
Bueno, podemos sacar tres conclusiones: la primera conclusión: tanto Elementary como Div han realizado grandes mejoras de rendimiento en 2021, lo cual es genial de ver.Ambos complementos son significativamente más ligeros de lo que eran en enero de 2021. Para ayudarlo a ver la diferencia, aquí están las dimensiones de los archivos no opmiosos de la página de texto básico en nuestras pruebas de enero de 2021 y noviembre de 2021:

div (noviembre de 2021) tamaño de página 273 kb 146 kb 376 KB 130 kb

En general, vale la pena crédito ambos complementos para eliminar la hinchazón y reducir las páginas. La segunda conclusión: es difícil identificar una diferencia de rendimiento significativa entre Elementor y Div en noviembre de 2021. Ambos constructores ahora tienen casi las mismas dimensiones de archivo para páginas equivalentes. Divi Builder era ligeramente más bajo y tenía un tiempo de pintura más largo en la página de contenido. En general, es difícil decir que hay alguna diferencia de rendimiento notable. La tercera conclusión: el cohete WP puede hacer mejoras importantes para ambos constructores de páginas, especialmente debido a las características del cohete WP que le permiten eliminar la página CSS no utilizada por página y retrasar la ejecución de JavaScript. Si bien Elementor y Div han mejorado tanto a cargo que los recursos necesarios para cada diseño, todavía hay muchos scripts/códigos que pueden eliminarse o posponerse. Con estas características, WP Rocket ha logrado reducir el tamaño de la página de ambos constructores de ~ 150 kb a ~ 25 kb. Más importante aún, estas mejoras de rendimiento también han afectado mucho tiempo de pintura de contenido en todas las pruebas. Por ejemplo, en el contenido de la página de contenido, WP Rocket redujo el tiempo de pintura de contenido más alto de 1,034 segundos a solo 0.373 segundos y el tiempo de DIV de 0.768 segundos a solo 0.377 segundos.

Elegir entre div y elementor: características clave, SEO y precio Aunque creemos que el rendimiento es una de las consideraciones más importantes cuando construimos sitios de WordPress, no es el único. Aquí hay una breve descripción de otras diferencias importantes antes de terminar esta publicación. Características clave Div vs Elementor Anteriormente, dije que esta no era tanto una publicación sobre las funciones, sino más sobre el rendimiento. Sin embargo, aquí hay un resumen rápido de las similitudes y diferencias de las características de alto nivel. Esto es lo que es lo mismo entre ambas herramientas: interfaz visual, arrastrar y soltar

Editar el texto en línea

Opciones de estilo/diseño muy detalladas: ambas son probablemente las dos primeras páginas constructores cuando se trata de la flexibilidad del diseño
Soporte completo para el tema de la construcción
Soporte de contenido dinámico (incluidos campos personalizados)
Soporte de WooCommerce para crear tema
Tercera extensiones de partidos mercados vibrantes aunque la elemental es más grande
Bibliotecas de plantilla de ala pre-construida, aunque el Div
Y aquí están algunas de las diferencias de alto nivel:
Elementor Pro incluye un constructor emergente incorporado y Divin no (aunque puede usar herramientas de terceros para agregar una construcción emergente al DIV)
Div viene tanto en una versión temática como en una versión de complemento. Elementor, sin embargo, ofrece su propio tema de saludo.
Divi proporciona una prueba A/B incorporada para optimizar sus diseños (aunque puede probar A/B
Div ofrece la edición de frontend y backend, mientras que Elementor solo ofrece edición de frontend, a algunos les gusta tener la opción de back -end en ciertas situaciones.
¿Estoy dividido y el elemento elemental para SEO? En cuanto a las implicaciones de SEO entre Div y Elementor, no notará demasiadas diferencias. Ambas herramientas aún le permitirán controlar la configuración de SEO a través de complementos de SEO populares y ambos se cargan lo suficiente como para que no tenga problemas con el tiempo de carga de la página y el SEO. Hay algunas diferencias en la comodidad. Por ejemplo, Yoast SEO tiene una característica que le permite ver/editar la configuración de Yoast SEO dentro de la interfaz elemental. Esto no cambia las características (que podría usar con Elementor antes), solo lo hace más conveniente, porque ya no tiene que volver al editor habitual para controlar la configuración de Yoast SEO. En general, sin embargo, puede clasificar los sitios de WordPress construidos con DIV y también puede clasificar los sitios web creados con Elementor, por lo que no debe preocuparse en ningún caso. Hay factores más importantes para WordPress SEO que el complemento para el generador de página que elija. ¿Cuánto? Elementor y Div Elementor es la única opción que ofrece una versión gratuita, que instantáneamente la convierte en una mejor opción si tiene un presupuesto cero. Incluso con la versión gratuita, todavía es sorprendentemente flexible. Con respecto a la comparación de precios Elementor Pro vs Div (a través de la suscripción de temas elegantes): Elementor Pro es más accesible si tiene que usarlo solo en un solo sitio. Comienza desde solo $ 49.
Div es más accesible si tiene que usarlo en varios sitios. Por $ 89, puede usarlo en sitios web ilimitados. El plan de $ 99 de Elementor Pro permite su uso solo en tres sitios, y los sitios más altos de los sitios pueden ser de hasta USD 999 para su uso en hasta 1,000 sitios. Además, DIV ofrece una licencia en la vida, mientras que Elementor Pro viene solo en uno Licencias de año. Para un solo pago de $ 249, obtienes asistencia/actualizaciones de la vida para usar Div en sitios ilimitados, lo cual es difícil de derrotar desde la perspectiva del valor. Cómo acelerar El Elementor y Div Div debido a una serie de mejoras en el rendimiento en 2021, Elementor y Div se han vuelto mucho más rápidos en los estados predeterminados. Ambos son significativamente “más débiles” y ambos hacen un mejor trabajo para cargar activos solo donde se necesitan. Sin embargo, puede hacer complementos y más rápido implementando otras prácticas de rendimiento de WordPress. Para la forma más fácil de acelerar la división y la primaria, puede usar el cohete WP. Como ha visto en los datos de prueba, WP Rocket puede hacer grandes mejoras, ya sea que use Elementor o Div. Las nuevas características del cohete WP se centran en la mejora de los vitales de la red central y son particularmente útiles para la optimización del DIV y el elemento, ya que le permiten eliminar o retrasar el CSS y JavaScript que no son necesarios. Para recapitular, aquí están los datos antes y después de la implementación de WP Rocket en ambos escenarios de prueba: