Comparación de velocidades: explorando el increíblemente rápido constructor visual Divi 5

Publicado: 2024-09-30

Como diseñadores y desarrolladores web, sabemos que el rendimiento lo es todo. Esperar a que un creador de páginas lento cargue o procese cambios puede interrumpir el flujo creativo y acabar con la productividad. Es por eso que uno de los principales objetivos de Divi 5 es revolucionar la velocidad y el rendimiento de Visual Builder. Nos sumergimos profundamente en la estructura central de Divi y la reconstruimos desde cero para crear un constructor increíblemente rápido y con mayor capacidad de respuesta.

En esta publicación, analizaré las mejoras de rendimiento dentro de Visual Builder que hacen que Divi 5 sea más rápido que cualquier versión anterior. Todo lo relacionado con Divi 5 Visual Builder ha sido optimizado para mayor velocidad.

Ahora, exploremos cómo afectará esto a su flujo de trabajo de diseño web y por qué no querrá volver a utilizar creadores de páginas más lentos.

Tabla de contenido
  • 1 Reescribiendo todo: ¿Qué hace que Divi 5 sea diferente?
    • 1.1 1. Velocidades de renderizado mejoradas de Visual Builder
    • 1.2 2. Tiempos de carga más rápidos (léase: No más recargas dobles)
    • 1.3 3. Eliminamos todas las animaciones de la interfaz
    • 1.4 ¿Hacia dónde se dirige Divi 5 a partir de ahora?
    • 1.5 El futuro de Divi es rápido

Reescribiendo todo: ¿Qué hace que Divi 5 sea diferente?

Divi 5 es mucho más que una actualización incremental. Es una reescritura completa de las tecnologías centrales de Divi, reinventadas con un enfoque en el rendimiento, la estabilidad y la escalabilidad. Este cambio fundamental nos hizo repensar cómo funciona Visual Builder en su núcleo, haciéndolo significativamente más rápido y potente.

Si bien Divi 4 ya era una herramienta poderosa en millones de sitios web, su arquitectura tenía más de una década. Hemos estado mejorándolo y superando sus límites, pero finalmente llegó el momento de construir una nueva base.

La deuda técnica provocó tiempos de carga más lentos, retrasos en la renderización e inestabilidad ocasional, especialmente cuando se trabaja con diseños complejos. Para abordar esto, el equipo de Divi 5 reconstruyó todo el marco desde cero, optimizándolo para el rendimiento y la escalabilidad futura. Los resultados hablan por sí solos: todo en Divi 5 sucede más rápido, desde cargar el constructor hasta realizar ediciones y obtener una vista previa de los cambios.

Descargue Divi 5 Alpha Pruebe la demostración de Divi 5 Informe Divi 5 Bug

1. Velocidades de renderizado mejoradas de Visual Builder

Cuando trabajas con una herramienta todo el día, la velocidad importa. Incluso el retraso más pequeño se agrava con el tiempo. En versiones anteriores de Divi, los diseñadores a veces tenían que esperar una fracción de segundo para que Visual Builder respondiera al agregar nuevos elementos o ajustar estilos. Esto se notaba especialmente cuando se trabajaba en documentos largos (con docenas de secciones llenas de módulos y estilos personalizados).

Observe el parpadeo de estilo en D4 (izquierda), donde el botón tarda milisegundos en aplicar completamente los estilos de la sección duplicada. Esto además de ser más lento que D5 (derecha) para duplicar la sección.

Con Divi 5, las velocidades de renderizado se han mejorado drásticamente, lo que le permite trabajar sin demoras. Visual Builder responde instantáneamente cuando agrega un nuevo módulo, cambia los modos de vista o ajusta los estilos. Este nivel de capacidad de respuesta marca una gran diferencia, especialmente cuando se trabaja en diseños complejos que requieren muchos ajustes.

Pero, ¿qué ha cambiado exactamente para que el constructor sea mucho más rápido?

La tecnología detrás del renderizado más rápido

La única manera de lograr este nivel de mejora era empezar de cero. Tomamos todo lo que aprendimos durante la última década de desarrollo de Divi y creamos una nueva aplicación utilizando tecnología moderna, eliminando años de deuda técnica. Dedicamos tiempo a auditar diferentes interacciones e identificar cuellos de botella. Seguimos haciéndolo y Divi 5 se vuelve más rápido con cada actualización.

Alejarse de los códigos cortos también ayudó a que atravesar diseños complejos fuera más eficiente. En la publicación de mañana, discutiremos por qué tuvo que desaparecer el marco de shortcode y cómo le está yendo a Divi 5.

¿Puedes ver la diferencia en el siguiente vídeo comparativo? Destaca otra gran mejora en Divi 5: ¡rendimiento mejorado al editar ajustes preestablecidos! En Divi 5, los ajustes preestablecidos se basan en clases. Dado que todos los elementos preestablecidos comparten la misma clase, se necesitan menos renderizaciones en el generador y menos CSS en la interfaz.

2. Tiempos de carga más rápidos (léase: No más recargas dobles)

Un problema importante en las versiones anteriores de Divi era la doble recarga al iniciar Visual Builder, que ocurría cuando módulos y complementos de terceros inyectaban por error datos dinámicos en la caché de Visual Builder. Este error fue tan generalizado que la doble recarga se convirtió en un problema común.

¡Divi 5 “soluciona” este problema siendo tan rápido y listo para usar que no necesita almacenamiento en caché! Como no almacenamos nada en caché, no hay posibilidad de que el caché quede invalidado y nunca volverás a experimentar la doble recarga.

Los tiempos de carga se han mejorado en todos los ámbitos. Vea qué tan rápido se carga Divi 5 en comparación con Divi 4. Se cargó tan rápido en mi prueba que ni siquiera tienes la oportunidad de ver nuestra nueva y elegante animación del precargador.

Esta mejora es especialmente notable para los diseñadores que trabajan en proyectos más grandes. Anteriormente, abrir un proyecto grande en Visual Builder podía tardar varios segundos en cargarse por completo.

3. Eliminamos todas las animaciones de la interfaz.

Uno de los cambios más notables en la nueva interfaz de Divi 5 (más allá de su moderno rediseño) es la eliminación de todas las animaciones.

En versiones anteriores, las animaciones proporcionaban retroalimentación visual al interactuar con el constructor (por ejemplo, agregar nuevos módulos o cambiar los modos de vista). Si bien estas animaciones agregaron un cierto nivel de diversión, también introdujeron ligeros retrasos en el proceso de diseño, especialmente en sistemas más lentos.

La filosofía de diseño de Divi 5 es diferente. La interfaz está ahí para servirte, nada más. Es mínimo. No se interpone en tu camino. No compite con tu diseño. No le importa verse bien. Su UI/UX se basa en la velocidad y la eficiencia.

¿Notas todas esas animaciones sutiles (fundidos de entrada y salida, deslizamientos de entrada y salida y similares) que utiliza Divi 4? Esto hace que la interfaz de usuario se sienta innecesariamente más lenta y con menos capacidad de respuesta. En Divi 5, hemos adoptado un enfoque de velocidad sobre estilo. Hemos eliminado estas animaciones para acelerar el generador y hacerlo más receptivo. Ahora la atención se centra exclusivamente en la funcionalidad, garantizando que cada acción que realice en el constructor se realice lo más rápido posible.

¿Hacia dónde se dirige Divi 5 desde aquí?

Se lanza oficialmente la Alfa Pública. Primero, nos encantaría agradecerle su paciencia mientras trabajamos diligentemente durante estos últimos meses para sacar la alfa pública de Divi 5. No fue una tarea fácil y nuestro trabajo apenas comienza.

Divi 5 Alfa

Como comentó Nick el jueves, pasaremos aproximadamente un mes solucionando errores conocidos en nuestro trabajo pendiente y muchos errores que ustedes, la comunidad, están encontrando en este momento. La Alfa pública de Divi 5 es en gran medida una Alfa, pero estamos trabajando incansablemente para que esté lista para producción. Puede ayudar dándole una vuelta a Divi 5 en sus sitios locales y de prueba, encontrando todos los errores que pueda e informándolos a nuestro equipo de soporte. Clasificaremos cada hallazgo de errores y trabajaremos en los más urgentes a medida que surjan.

Descargar el informe Divi 5 Alpha Error de Divi 5

Si no tiene un sitio local o de prueba para probar, aún puede mojarse los pies con la versión de demostración de Divi 5. Esta es una excelente manera de acostumbrarse al rediseño y diseño del nuevo constructor. Es un gran cambio, pero era muy necesario.

Pruebe la demostración de Divi 5

El futuro de Divi es rápido

Divi 5 representa un importante salto adelante en términos de velocidad y rendimiento. Divi ahora es más potente y receptivo con una renderización ultrarrápida, tiempos de carga más rápidos y un constructor rediseñado que prioriza la utilidad sobre el estilo. Ya sea que sea un diseñador web en solitario o forme parte de un equipo de desarrollo más grande, estas mejoras harán que su flujo de trabajo sea más rápido, fluido y eficiente.

Si has estado usando Divi 4, te sorprenderá lo rápido que se siente Divi 5. ¿La mejor parte? Esto es sólo el comienzo. A medida que optimicemos y expandamos el marco Divi 5, el constructor será más rápido y más poderoso. El futuro del diseño web con Divi es vertiginoso y apenas estamos comenzando.

En los próximos días, hablaremos sobre lo que significa que Divi 5 se esté alejando de los códigos cortos, profundizando en el sistema de migración de sitios y una ventaja relacionada con los desarrolladores. No olvides seguirnos y suscribirte para recibir estas actualizaciones y más.