El 18 de agosto nos sorprendió Elegant Themes con una gran actualización de Divi. Se publicó la versión de Divi 4.10. esta versión incorpora grandes mejoras de rendimiento en cuanto a velocidad de carga y optimización del sitio web para que nuestras páginas carguen más rápido, siguiendo como objetivo que no sea un tema inflado de recursos innecesarios.
¡Conozcamos los detalles!
Tabla de contenidos
Novedades de la versión 4.10 de Divi Fast
La principal novedad de Divi 4.10 es que Divi es más rápido que nunca, y al mismo tiempo, nos dicen que es más rápido que sus principales competidores de plantillas WordPress.
Han realizado grandes optimizaciones en diferentes áreas del núcleo de Divi y han conseguido mejoras sustanciales de velocidad y reducción de peso de carga de la web. Nos muestran incluso datos contrastados los principales medidores de velocidad como Google PageSpeed Insights y GTmetrix.
Mejoras de rendimiento de Divi 4.10
Las principales mejoras de optimización de Divi se centran en los siguientes pilares fundamentales.
Dynamic Framework
Solo carga los módulos necesarios que se están mostrando en la página. Si solo usas 5 de los 50 módulos, sólo cargará las funciones de esos 5 módulos. Así Divi será más delgado a la hora de cargar los recursos necesarios en tu página.
Dynamic CSS
Con los estilos CSS se ha hecho lo mismo. Se ha dividido la hoja de estilos en cada módulo para que cuando se muestre la página que queremos mostrar solo se combinen los css de los módulos que necesitemos. Así de esta manera, se ha reducido la carga de CSS en la página de ejemplo de Divi de 860Kb a 54Kb.
Critical CSS
Se separa el CSS crítico del no crítico cuando se va a mostrar a la página. Así es por eso que solo se guarda una parte del CSS necesario que debe cargarse al inicio de mostrarse la página y el resto se carga más tarde. Gracias a esto Divi consigue puntuaciones tan altas en Google en comparación con otras plantillas WordPress.
Smart Styles
Se ha optimizado el CSS utilizado eliminando código duplicado por el constructor de Divi para que sea más rápido. Ha creado una sola lista de selectores CSS para que todos los módulos no tengan su propio código, y así compartan los estilos CSS de esa lista, ahorrando espacio y tiempo de carga.
Speed Boosters
Se han agregado varias opciones de mejora de velocidad de Divi, como aplazar las solicitudes de bloqueo para eliminar los recursos innecesarios, crear un almacenamiento de caché de las fuentes de google insertando los estilos en el encabezado. También incluye opciones para evitar la carga de recursos innecesarios nativos de WordPress, como los emojis de WordPress, carga diferida de recursos no utilizados, como la hoja de estilos Gutenberg si este no es utilizado cuando se está usando el constructor de Divi. Se han incorporado opciones de carga asíncrona de Jquery cuando no es necesario en el encabezado.
Todas estas opciones permiten a Divi gestionar el bloqueo de aquellos recursos que no son necesarios ofreciendo a los usuarios una gran velocidad para mostrar sus contenidos.
Dynamic Javascript
Se ha modularizado el código javascript de Divi para permitir la carga de cada biblioteca de javascript solo bajo demanda solo para los módulos específicos que necesitemos cuando mostremos nuestra página. Con esto se ha conseguido reducir el archivo base de javascript de Divi a la mitad.
Divi ya era rápido, pero ahora más!
Ya os comenté en anteriores artículos que Divi es rápido, aquí veis mi puntuación de hace pocos meses. Esta puntuación de Divi en GTmetrix me ha costado conseguirla, gracias a grandes esfuerzos de optimización y tiempo dedicado para ir puliendo cada uno de los detalles de mi web.
Cabe decir que Divi es rápido, pero si tu web es lenta no es por culpa de Divi, Elementor, o cualquier tema WordPress que utilices. Si tu web es lenta es porque usas demasiados plugins que no están optimizados, no cuidas las imágenes, no vigilas el contenido que se publica en tu web y eso hace que tu web por regla general sea lenta. Si dedicas tiempo a cuidar los detalles de tu web seguro que será igual de rápida que la mía. Aunque Divi ayuda que tu web sea más rápida, ¡Solo necesitas tiempo y dedicación!.
Divi VS competencia
El objetivo no era solo que Divi fuera más rápido que antes, sino que fuera más rápido y mejor que la competencia. Se hizo el experimento probando los temas WordPress más populares en cuanto a rendimiento y se montó una red sitios WordPress idénticos en un hosting de Siteground para compararlos de manera objetiva intentando optimizar cada uno de los sitios al máximo.
Las plantillas WordPress usadas en el experimento VS Divi Fast:
- Elementor con su plantilla Hello
- Gutenber y Astra
- Beaver Builder y Kadence
- Avada by Theme Fusion
Se ha montado un sitio web con cada una de las plantillas WordPress anteriores, donde se ha realizado el mismo diseño web para que la comparación sea objetiva.
Se calcularon sus puntuaciones en la página de Google para poder compararlos. Se midieron 6 veces y se calculó una puntuación promedia de los 5 mejores resultados.
La puntuación de cada sitio web puede verse alterada en función del uso que se le de a cada sitio a partir de este momento, pero desde el principio se puede observar que Divi ocupa la primera posición obteniendo una puntuación del 99% en móviles y 100% en escritorio.
Todo esto es gracias a las actualizaciones de Divi que nos brindan constantemente gracias a su licencia lifetime que incluye actualizaciones para siempre sin coste adicional. Pero eso no es todo, ya que nos avisan de que llegarán más mejoras de rendimiento y nuevas funcionalidades. Por lo que no debemos relajarnos y debemos estar pendientes de las actualizaciones de Divi si queremos conseguir esas mejoras.
Divi Performance
Dentro de las opciones de Divi tenemos las opciones de rendimiento o performance para mejorar el rendimiento de nuestra web Divi. Todas estas opciones son las que resumía más arriba y que podemos activar o desactivar a nuestro antojo.
En este caso, en esta web donde he podido probar la nueva actualización de Divi, he tenido que desactivar la opción de Dynamic CSS porque me daba problemas con el plugin Contact Form 7, ya que perdía los estilos y no se mostraba el botón de enviar. Desactivando esa opción, se soluciona.
Si utilizas el plugin de WP-Rocket y te deja de funcionar el sitio, puede que necesites desactivar en WP-Rocket las opciones de combinar CSS y JS para que tu sitio web vuelva a funcionar con normalidad.
Conclusiones
Como siempre, Elegant Themes nos sorprende con grandes actualizaciones y nos da una garantía de mantenimiento que es insuperable. En breve nos seguirán brindando con más novedades y pensando en el usuario, tanto a nivel funcional como de rendimiento para que nuestras webs estén lo más optimizadas posible.
Artículo original: https://www.elegantthemes.com/blog/theme-releases/divi-performance