homefinance blog
¿Intenta elegir entre Diva y Avada para construir tu sitio web de WordPress? Estos dos temas son dos de los temas premium de WordPress más populares de todos los tiempos: los temas elegantes (el desarrollador Div) afirman tener más de 806,000 clientes, y Avada se ha comprado más de 747,000 veces de Themeforest. Estos son números increíblemente impresionantes y pruebas de que cada tema tiene muchos usuarios felices. Uno de los factores más importantes detrás del éxito de ambos temas es su grupo de constructores visuales de arrastre. Con estos constructores, puede crear hermosos sitios de WordPress personalizados, no se requiere código.
Pero la flexibilidad del diseño no es lo único a considerar en un tema de WordPress, también debe pesar tan pronto como ese tema ayude a su sitio a cargar porque los tiempos de carga del sitio juegan un papel en cualquier cosa, desde la experiencia del usuario hasta SEO, tasas de conversión y más. . Esto es aún más cierto en la actualización de la experiencia de la página de Google, en la que Google ha comenzado a incluir vital web central en sus clasificaciones. Para este propósito, decidimos crear una comparación de Div vs AVADA centrada en una medida específica: el rendimiento. Quiero decir, Diva o Avada te ayudan a obtener un sitio web de carga más rápido. Para responder a esta pregunta, hemos realizado algunas pruebas propias: continúe leyendo para ver los datos y el análisis.
Nota: inicialmente publiqué esta publicación y ejecuté estas pruebas en julio de 2021. Sin embargo, los temas elegantes lanzaron una actualización con las principales actualizaciones de rendimiento delantera en agosto de 2021 (Div 4.10) que marca una gran diferencia para el rendimiento de la divicidad. Por esta razón, hemos reanudado por completo estas pruebas y recopilamos todos los nuevos datos y conclusiones en noviembre de 2021. Cómo probaremos el rendimiento del tema Div vs Avada antes de llegar a los datos, hablemos sobre cómo probaremos el rendimiento de VS Avada, para que sepa exactamente cómo configuré las cosas. En primer lugar, probaremos dos escenarios de alto nivel: Prueba #1: solo probaremos los temas. Es decir, no usaremos sus constructores visuales. En cambio, solo probaremos la “página de muestra” predeterminada construida con el editor de bloques.
Prueba #2: probaremos una página simple construida con el generador de cada tema, porque los constructores visuales son una parte clave de lo que hace Diva y Avada tan popular. Intentaremos usar módulos comparables para que la comparación sea lo más igual posible.
Para cada escenario de prueba de alto nivel, también probaremos dos configuraciones diferentes:
La primera configuración es solo con temas mismos y sin otras optimizaciones de rendimiento.
La segunda configuración es con WP Rocket instalado y configurado, por lo que puede ver cómo se ven las cosas si implementa las mejores prácticas de rendimiento de WordPress.
Además del almacenamiento de la página de la página y otras buenas prácticas básicas, WP Rocket también ofrece algunas características únicas que pueden optimizar el código de cada tema y mejorar los valores centrales de la web.
Eliminar CSS no utilizado, esto le permite eliminar CSS inútil de su sitio, página por página. Puede ser particularmente grande al reducir el tamaño de los temas de la página como Diva y Avada.
Retrasar la ejecución de JavaScript: esto le permite esperar para ejecutar JavaScript hasta una interacción con el usuario, lo que hace un excelente trabajo para acelerar el tiempo de carga inicial. Siempre puede manejar ciertos scripts manualmente si necesita cargar de inmediato.
Ejecución retrasada JS-WP Rocket Nuestros sitios de prueba están alojados en una caída de DigitalCean barata de $ 5 por mes, alimentados por RunCloud y una pila NGINX completa. No traje ninguna mejora en el rendimiento que no sea la adición de WP Rocket a algunas de las pruebas, como se mencionó anteriormente.
Para probar y medir los datos de rendimiento de WordPress, utilizaremos WebPageTest para recopilar datos de rendimiento centrados en dispositivos móviles:
Dispositivo de prueba: iPhone 8. Los dispositivos más modernos tendrán procesadores más fuertes para procesar JavaScript más rápido, lo que podría conducir a tiempos de carga un poco más rápidos. Podría ser lo contrario con los dispositivos de potencia más antiguos/de baja.
Velocidad de conexión: conexión LTE acelerada (12 Mbps, 70 ms RTT). El tiempo de carga en el mundo real sería más rápido si un visitante navega en wifi o más lento si el usuario tiene algo así como una conexión 3G.
Para cada prueba, haremos que WebPageTest realice nueve pruebas separadas y tomaremos el valor medio. Esto nos ayuda a evitar la variabilidad de una sola prueba y lograr resultados más consistentes.
Estos son los cuatro valores en los que nos centraremos: la pintura de contenido más alta (LCP): parte de los nuevos vitales de la web de Google Core y un factor de clasificación SEO en la experiencia de la página.
El tiempo de primer byte (TTFB) mide qué tan rápido el servidor es capaz de responder con los primeros datos de bytes después de procesar el PHP del sitio/tema (o la entrega de caché, en el caso de nuestra prueba de cohete WP).
El tamaño de la página: todos los demás son iguales, un tamaño más pequeño de la página siempre es mejor.
Solicitudes HTTP: todas las demás son iguales, menos solicitudes HTTP siempre son mejores.
Finalmente, aquí están los números de versión para todo lo que probamos:
Tema Avada – 7.5
Avada Builder – 3.5
El tema de Div – 4.13.1
WP Rocket – 3.10.3.
Pruebas de velocidad div vs avada ahora, pasemos a nuestras pruebas de rendimiento prácticas div vs avada. Prueba #1: Solo temas en esta primera prueba, solo probamos los temas sin usar constructores visuales:
Div: solo el tema de Div, porque Div ya está incluido en Divi Builder.
AVADA: también instalé complementos Avada Core y Avada Builder, porque son complementos básicos. Sin embargo, no instalé ningún complemento opcional.
El contenido real es la “página de muestra” que viene con una nueva instalación de WordPress. Está construido con el editor de bloques nativos.
Aquí están los datos de los temas en sí mismos:
| lcp | ttfb | http solicitudes | archivo tamaño | |
| div | 1.011 s | 0.408 s | 14 | 201 KB |
| avada | 1.517 s | 0.448 s | 16 | 544 KB |
Puede ver que Div es el ganador bastante claro aquí cuando se trata del período de pintura de contenido más grande, porque el tiempo de Avada es 50% más alto.¿Por qué la diferencia?Bueno, adivinaremos que una gran parte del rendimiento más rápido de la Divin es que el tamaño de la página de Avada es de 544 kb, mientras que el DIV es de solo 201 KB.Tenga en cuenta que esto es para una página que no está construida con el generador visual: esta es solo la página predeterminada creada con el editor de bloques.
Ahora, veamos los datos después de agregar el cohete WP:
| lcp | ttfb | solicitudes http | tamaño de archivo | |
| div + wp cohete | 0.384 s | 0.273 s | 9 | 92 kb |
| avada + wp cohete | 0.444 s | 0.247 s | 12 | 325 kb |
Puede ver que con las optimizaciones de cohetes WP, ambos temas son mucho más rápidos y hay una diferencia muy pequeña durante la pintura de contenido de tiempo más grande entre Diva y Avada . Div sigue siendo un poco más rápido, pero la diferencia es lo suficientemente pequeña como para que pueda ser solo una variabilidad de prueba normal. Además, WP Rocket ha logrado reducir en gran medida el tamaño de ambos temas debido a las características de eliminación de CSS no utilizadas y retrasar la ejecución de JavaScript. Puede ver que el tamaño de la página Div ha disminuido en más de la mitad, mientras que el tamaño de la página de Avada se ha reducido en más de 200 kb. Estas mejoras, junto con la memoria en caché y otros ajustes, son las que son las que son las que son las que causó los tiempos de LCP mejorados. Prueba #2: con los constructores en esta segunda prueba, utilicé el generador visual de cada tema para crear una página comparable utilizando aproximadamente los mismos módulos. El diseño es muy simple: agregué solo tres elementos para mantener las cosas tanto como sea posible:
Editor de contenido de lorem ipsum ipsum
Botón
Contracenos
La idea aquí es principalmente ver qué “peso” adicional se agrega a la página al activar el generador de cada tema. Aquí están los datos de los temas/constructores en sí:
<
<
En general, puede ver que los resultados son casi los mismos. DIV es considerablemente más pequeño en términos de tamaño de página y, por lo tanto, tiene un tiempo de pintura más largo. Además, ningún tema agrega ningún peso adicional a la página solo porque activó el generador visual, lo que significa que realmente no hay penalización por el uso del generador hacia el editor nativo (al menos para páginas simples). Aquí están los datos después de agregar WP Rocket:
| lcp | ttfb | http solicitudes | tamaño de archivo | |
| div + wp cohete | 0.399 s | 0.260 s | 9 | 92 kb |
| avada + wp cohete | 0.466 s | 0.259 s | 11 | 296 kb |
