¡La nueva versión de Divi a la 4.8 es una noticia excelente para todos los que utilizamos el mejor constructor de WordPress!
Hoy en día, el constructor visual de Divi se está volviendo mucho más rápido gracias a algunas mejoras de rendimiento increíbles. En resumen, todo lo que haces en el constructor va a ser mucho más ágil y receptivo. Ya sea al pasar el ratón sobre los módulos, abrir ventanas de configuración, ajustar las entradas de diseño, cambiar los modos de vista, arrastrar, soltar, agregar, eliminar… ¡Todo es mucho más rápido que antes!
Vamos a compartir con vosotros algunas estadísticas de rendimiento para que podáis tener una mejor idea de lo que los chicos de Elegant Themes han conseguido en esta actualización.
¡La mejoría de rendimiento es brutal!
Han creado un Perfilador de Rendimiento del Constructor visual en Divi 4.8
Con el fin de probar y verificar las mejoras de rendimiento, han diseñado un perfilador de rendimiento del Constructor Visual que realiza diferentes acciones dentro del constructor y registra cuánto tiempo tardan en completarse. Utilizaron esta herramienta durante todo el desarrollo de la versión 4.8 para identificar partes del constructor que eran lentas, arreglarlas y luego comparar las diferencias. Todo en el constructor es más rápido ahora, pero veamos mejor como responde con los cambios que han elaborado algunas acciones comunes y veamos cuánto las mejoramos.
Examinemos las mejoras de velocidad
Vayamos a ver directamente a las estadísticas. Después de meses de trabajo, el equipo de Elegant Themes ejecutó el perfilador en la nueva versión de Divi y comparó su velocidad con una versión anterior a Divi 4.8.
Decidieron utilizar un diseño complejo para asegurarse de que cada acción fuera lo suficientemente lenta como para reducir el efecto de anomalías menores. Ejecutaron 3 veces cada acción para comprobar los promedios de velocidad y así poder hacer una comparativa más exacta. Aquí están los resultados que nos han dejado desde Elegant Themes, una verdadera barbaridad.
| ACCION | ANTES | DESPUES | MEJORA |
| Cambiar a visto de Escritorio | 6643ms | 1619ms | 310% |
| Cambiar a vista de Tablet | 6640ms | 1318ms | 404% |
| Cambiar a vista de movil | 6421ms | 1427ms | 350% |
| Cambiar a modo Grid | 11914ms | 1364ms | 773% |
| Cambiar a modo Hover | 3822ms | 716ms | 434% |
| Cambiar a modo Clic | 2233ms | 574ms | 289% |
| Hover sobre Seccion | 694ms | 333ms | 109% |
| Hover sobre Fila | 713ms | 280ms | 155% |
| Hover sobre Modulo | 891ms | 383ms | 133% |
| Duplicar Seccion | 8305ms | 1226ms | 577% |
| Eliminar Seccion | 895ms | 593ms | 51% |
| Duplicar Fila | 5758ms | 1328ms | 334% |
| Eliminar Fila | 5568ms | 797ms | 599% |
| Duplicar Modulo | 3185ms | 492ms | 548% |
| Eliminar Modulo | 3151ms | 607ms | 419% |
| Añadir Modulo | 215ms | 198ms | 9% |
| Abrir Pop-Up de Configuración | 2612ms | 359ms | 627% |
| Añadir Columna | 371ms | 60ms | 522% |
| Editar Modulo | 749ms | 340ms | 120% |
| Copiar Sección | 123ms | 340ms | 14% |
| Pegar Sección | 8723ms | 1049ms | 732% |
| Guardar en la Biblioteca | 186ms | 162ms | 15% |
Mejoras en la acción del ratón
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 los botones en aparecer cuando pasamos el cursor sobre un módulo es ahora el doble de rápido, por lo que todo es mucho más ágil mientras movemos el ratón por la página.
Agregar, eliminar y duplicar mejoras
Acciones como duplicar, eliminar, copiar y pegar han conseguido unas mejoras de drásticas de rendimiento con unos aumentos de velocidad hasta un 600% ¡Eso es hasta 6 veces más rápido!
Agregar nuevos elementos es más rápido que antes, con las mayores mejoras que se ven al agregar nuevas columnas. La eliminación de elementos también es mucho más rápida, con mejoras de velocidad de hasta un 600%.
Mejoras en la edición de módulos
También se redujo significativamente el tiempo que se tardan en abrir y cerrar ventanas de configuración. El tiempo que tarda la ventana en aparecer la ventana de configuración al 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. ¡Ahora es un gustazo la fluidez con la que funciona!
Mejoras en el cambio de modo de vista
Otro lugar dónde notaremos una gran diferencia de velocidad es al cambiar entre los modos de vista y los modos de interacción. Cambiar entre el modo de suspensión/clic, por ejemplo, es entre 3-4 veces más rápido y el cambio entre diferentes vistas es entre 2-4 veces más rápido.
Cuando sumas todas estas mejoras, realmente tenemos una experiencia de usuario tremendamente eficiente. El objetivo de Elegant themes con esta actualización era hacer que todo el constructor fuera más rápido sin sacrificar nada, y definitivamente con Divi 4.8 han logrado ese objetivo.
Cómo lo han hecho
Ahora analizaremos con los datos proporcionados por Elegant Themes ¿por qué las cosas en Divi 4.8 son mucho más rápidas? Cada vez que hay algún cambio en el constructor, ya sea que un elemento aparece, desaparece o cambia, todos estos elementos deben volver a renderizarse en el navegador. La velocidad a la que esas cosas se vuelven a renderizar tiene que ver con la potencia de su computadora, la velocidad de su navegador y la eficiencia de la propia aplicación. A través de muchas pequeñas mejoras y algunos grandes cambios, han logrado acelerar esos re-renderizados y reducir las re-renderizados innecesarios. El resultado de todo esto es un constructor más rápido.
Refactorización del Código General
Con los años, Divi se ha crecido exponencialmente en sus funcionaliades por lo que se ha vuelto más grande y mejor, pero también cada vez más complejo. Lo más importante que se hizo en esta característica fue meterse en el minucioso proceso de ir a cada función y buscar ineficiencias que pudieran refactorizarse para acelerar o reducir los re-renderizados innecesarios. Se miró todo y se hicieron muchos cambios. Simplemente se todo consistión en pensar en formas creativas de reelaborar la lógica de la aplicación y hacer que Divi sea más inteligente.
Representación condicional en el constructor Visual
También se pensaron en algunas formas creativas de mejorar el rendimiento dentro del constructor visual.
Uno de ellos es la “renderización condicional”. Utilizando el renderizado condicional, solo renderizamos la parte del constructor que está viendo actualmente dentro la ventana de nuestro navegador. Más allá de eso, fuera de esa vista, han eliminado dinámicamente objetos que no son necesarios para que no afecten el rendimiento. Eso significa que no se experimentará el mismo nivel de degradación del rendimiento a medida que sus páginas se vuelven más grandes y complejas, al menos no en la misma medida que antes. Se repitió el mismo dentro de las ventanas emergentes de configuración. Esto le da a Divi mucha más escalabilidad y mayor alcance para nuevas características.
Tamaño de archivo y almacenamiento en caché de módulos reducidos
También se encontraron maneras de reducir el tamaño de los archivos del constructor visual e implementaron nuevas formas de almacenamiento en caché para la salida CSS del constructor para mejorar las velocidades de renderizado de módulos. La salida de módulo duplicado en caché ayuda a acelerar la duplicación, copia y pegado del módulo. También acelera la adición de nuevos módulos.
Actualización de React y tratamiento de problemas de compatibilidad
Finalmente, con mucho acierto vieron que era el momento idóneo 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 el Visual Builder, por lo que es importante mantenerse al día (como mantener PHP actualizado en su sitio web).
Estas actualizaciones de rendimiento de Constructor Visual ya están disponibles, si tienes una licencia en tu web actualiza a Divi 4.8 y benefíciate de estas tremendas mejoras de rendimiento y si no lo tienes no lo pienses más y hazte con tu licencia de DIVI. Según Elegant Themes esta es solo la primera de las múltiples actualizaciones de rendimiento en las que están trabajando, Estemos atentos porque vamos a ver muchas más mejoras de velocidad en el futuro.
