Elegant Themes se ha propuesto hacer que Divi sea el constructor más rápido del mundo.
Te lo explico en este vídeo:
Y aquí te lo explica (en inglés) nuestro amigo 😉 Nick Roach:
Desde que salió Divi han ido mejorando la velocidad muchísimo, pero quizá esta sea la actualización más potente en cuánto a rendimiento.
Cuándo salió Divi había algunos detractores del que es el Tema más instalado del mundo, como demuestro en el vídeo de más abajo, que decían que Divi era lento. Hoy ya serán muy pocos los que mantengan esa afirmación y si lo hacen, será por pura desinformación.
Aquí puedes ver alguno de mis post anteriores dónde os he ido informando de las actualizaciones de mejoras de velocidad de Divi:
- Divi aquí mejoró un 60% la velocidad
- Aquí mejoró la carga de CSS y mejoró mucho la velocidad
- Aquí Divi volvió a mejorar otro 60% su velocidad
- Hoy Divi ha mejorado procesos hasta en un 700% su velocidad
- etc.
Hoy en día, el Visual Builder de Divi se está volviendo mucho más rápido gracias a algunas increíbles mejoras de rendimiento. En pocas palabras, todo lo que hagas ahora en el constructor lo notarás infinitamente más rápido.
Cuando pases el cursor sobre los módulos, abras ventanas emergentes, arrastres, sueltes, añadas, o elimines… todo es mucho más rápido que antes.
Pero veamos algunas estadísticas…
Creación de Visual Builder Performance Profiler
Para probar y verificar las mejoras de rendimiento, en Elegant Themes han creado un generador de perfiles de rendimiento Visual Builder que realiza diferentes acciones dentro del constructor y registra cuánto tardan en completarse.
Han usado esta herramienta durante todo el desarrollo para identificar partes del constructor que eran lentas, corregirlas y luego comparar las diferencias. Todo en el constructor es más rápido ahora, gracias a este exhaustivo análisis.
Examinando las mejoras de velocidad
Pasemos directamente a las estadísticas. ¡Vas a alucinar!
Después de meses de trabajo, han comparado la velocidad de la versión anterior (4.7.7) de Divi con la nueva versión de Divi 4.8.
Para ello han ejecutado la prueba tres veces para cada acción y luego han apuntado los promedios. Aquí están los resultados
Mejoras en la acción de desplazamiento
En primer lugar, las acciones básicas como pasar el cursor sobre módulos, filas y secciones son mucho más rápidas. El tiempo que tardan en aparecer los botones cuando se desplaza sobre un módulo ahora es dos veces más rápido, por lo que todo se siente mucho más ágil a medida que mueve el mouse por la página.
Adición, eliminación y duplicación de mejoras
A continuación, tenemos acciones como duplicar, eliminar, copiar y pegar. En estas áreas, han mejorado drásticamente las cosas con aumentos de velocidad en el rango de 500-600%. Eso es hasta 6 veces más rápido.
Agregar nuevos elementos es más rápido que antes, y las mayores mejoras se observan al agregar nuevas columnas. La eliminación de elementos también es mucho más rápida, con mejoras de velocidad en el rango de 500-600%.
Mejoras en la edición de módulos
También han reducido significativamente el tiempo que lleva abrir y cerrar las ventanas emergentes de configuración. El tiempo que tarda en aparecer la ventana emergente de configuración después de hacer clic en el icono de engranaje en un módulo de texto, por ejemplo, ahora es un 630% más rápido. El tiempo que se tarda en cerrar la ventana emergente es un 120% más rápido.
Ver mejoras de cambio de modo
Otro lugar donde notarás una gran diferencia de velocidad es al cambiar entre los modos de visualización y los modos de interacción. Cambiar entre el modo Hover / Click, por ejemplo, es entre 3 y 4 veces más rápido y cambiar entre diferentes vistas de respuesta es entre 2 y 4 veces más rápido.
Cuando sumas todas estas cosas, realmente son muy útiles. Como ves, su objetivo era hacer que todo el constructor fuera más rápido sin sacrificar nada, y definitivamente lo han conseguido.
Cómo han conseguido mejorar tanto la velocidad de Divi
Entonces, ¿por qué las cosas son mucho más rápidas? Siempre que algo en el constructor aparece, desaparece o cambia, esos elementos deben volver a renderizarse en el navegador.
La velocidad a la que esas cosas se vuelven a renderizar se reduce a la potencia de tu ordenador, la velocidad de tu navegador y la eficiencia de la aplicación en sí.
A través de muchas pequeñas mejoras y algunos grandes cambios, han conseguido acelerar esas repeticiones y reducir las repeticiones innecesarias. El resultado es un constructor más rápido.
Refactorización de código general
Con los años, Divi se ha vuelto más grande y mejor, pero también cada vez más complejo. Lo más importante que han hecho en esta actualización ha sido embarcarse en el minucioso proceso de revisar todas las funciones y buscar ineficiencias que pudieran refactorizarse para acelerar o reducir las repeticiones innecesarias.
Han analizado todo y han realizado muchas mejoras. Ahora la lógica de la aplicación de Divi es mucho más inteligente.
Renderización CONDICIONAL en Visual Builder
Han mejorado el rendimiento con una idea brillante: La “renderización condicional“.
Al usar la renderización condicional, solo se re-carga la parte del constructor que estás viendo actualmente en la ventana de tu navegador.
Y lo que no ves… simplemente eliminan de la carga dinámicamente objetos que no son necesarios para que no afecten el rendimiento.
Eso significa que no experimentarás el mismo nivel de degradación del rendimiento a medida que tus páginas se hagan más grandes y complejas, al menos no en la misma medida que antes. Ya que solo carga lo que ves y lo que no ves no afecta al rendimiento.
Y todo esto lo han hecho también dentro de las ventanas emergentes de configuración. Esto le da a Divi mucha más escalabilidad y más pista para nuevas funciones.
Almacenamiento en caché de módulos y tamaño de archivo reducido
También han encontrado formas de reducir el tamaño de los archivos de Visual Builder y han implementado nuevas formas de almacenamiento en caché para la salida CSS del constructor a fin de mejorar las velocidades de renderización del módulo.
El almacenamiento en caché de la salida de módulos duplicados ayuda a acelerar la duplicación, copia y pegado de módulos. También acelera la adición de nuevos módulos.
Actualización de React y resolución de problemas de compatibilidad
Finalmente, han aprovechado esta oportunidad para actualizar React y otras dependencias para que Divi pudiera beneficiarse de sus mejoras de rendimiento inherentes.
React es la base sobre la que se basa Visual Builder, por lo que es importante mantenerse actualizado (algo así como mantener PHP actualizado en su sitio web).
Estas actualizaciones de rendimiento de Visual Builder están disponibles hoy, así que descarga Divi y pruébelo.
Dime que te parece en los comentarios
Ahhh!! Y suscríbete a mi CANAL DE YOUTUBE que próximamente va a haber más novedades de Divi y te las contaré con detalle en mi Canal.
Esta es solo la primera de las múltiples actualizaciones de rendimiento en las que están trabajando, así que estad atentos para más mejoras de velocidad en el futuro.
Si quieres aprender más sobre Divi apúntate a mi Curso de Divi dónde te lo explico desde cero y con mi ayuda de soporte.
