Divi mejora su performance

divi tema builder actualizacion

La nueva actualización de Divi se anuncia como “masiva”, y pasa de ser un Tema pesado a uno ultra liviano. En esta nota les contamos todas las características que aumentan el rendimiento y sus detalles específicos.

Divi Reconstrucción Total

Divi, el famoso Tema y plugin de construcción tipo arrastrar y soltar, recibió una reingeniería completa. ¿El objetivo? Acelerar su performance desde todos los ángulos posibles. El código fue depurado, modernizado, agilizado, muchas veces reescrito desde cero. De hecho, ahora Divi es capaz de escalar modularmente sin compremeter la velocidad de nuestro sitio.

Divi fue transformado en un tema súper liviano tras haber sido modularizado su motor PHP y todos sus recursos. Ahora, sólo se carga y procesa lo que nuestro sitio utiliza en una suerte de renderización on-demand. No son meras palabras: el Tema se volvió inteligente, auto-consciente, de modo que puede identificar automáticamente el CSS crítico, aplazando así estilos no críticos y reduciendo la salida css del Constructor Divi mediante la combinación de estilos duplicados.

Con la velocidad en mente, se introdujo una colección de opciones nuevas que mejoran automáticamente el rendimiento al almacenar en caché y diferir varias solicitudes de bloqueo de renderizado, logrando con éxito eliminar recursos innecesarios.

Puntajes obtenidos en un WordPress hosting con CDN sin tener que recurrir a plugins de performance de terceros.

Código a Dieta Estricta

En su sitio de prueba los desarrolladores atestiguan que los recursos de bloqueo de renderizado se eliminaron al 100%, el tamaño de CSS se redujo en un 94% mientras que el de JavaScript en un 50%. No más código bloat gracias a las cuatro siguientes estrategias:

FrameWork PHP dinámico

El nuevo Marco Dinámico de Divi procesa únicamente los recursos necesarios para renderizar los módulos y características que se utilizan por página. Es decir, todo lo que no se usa no se procesa. Si nuestra página emplea 5 del total de 50 módulos que provee Divi, entonces nuestro sitio sólo procesará esos 5 módulos salteándose todos los demás.

Pero, además, si esos 5 módulos del ejemplo no usan características como efectos de desplazamiento, animaciones, opciones Sticky, opciones de borde, etc., entonces tampoco se procesan dichas funciones. Divi bajó de peso porque elimina sobre la marcha todo lo que nuestro sitio no emplea, quitándolo de cuajo.

Cascade Dinámico

La misma lógica mencionada aplica a los CSS. La librería natal de Divi fue modularizada. Así, en cada página, pequeños fragmentos de CSS se combinan dando a luz una hoja de estilos única, precisa, que tiene solamente los recursos para módulos, características y opciones de diseño empleadas. El resultado de esta mécanica es una disminución considerable del tamaño del archivo CSS de cada uno de los sitios creados con Divi. 0% bloat, porque el CSS que no se usa sencillamente nunca se carga.

Divi se encuentra incluido gratuitamente en nuestro servicio de WordPress Administrado

Estilos Inteligentes

El CSS generado por el constructor de Divi también se optimizó buscando reducir los estilos duplicados y el tamaño general del archivo. En la nueva versión, Divi identifica los estilos redundantes y combina selectores en una sola lista. Gracias a Divi Presets, podemos crear páginas muy livianas porque cada módulo que usa un preset no necesita tener su propio bloque único de estilos (en cambio, puede compartir sus estilos con otros usuarios del preset).

Optimización de JavaScript

De nuevo: la mayor parte del archivo JS empleado en Divi fue modularizado. Similar a los casos anteriores, cada biblioteca de JavaScript se carga según demanda de uso. Además, varias características de Divi fueron individualizadas, como las opciones sticky y los efectos de movimiento. Ergo, dichos recursos sólo se cargan cuando se necesitan.

La nueva actualización de Divi también se benefició con una buena limpieza. Se buscó eliminar código innecesario logrando reducir el tamaño del archivo de JavaScript un 50%.

Cascade Crítico: lo nuevo en Divi

Un nuevo sistema de CSS Crítico en Divi identifica las librerías de estilo necesarias para renderizar la parte visible de la puesta, aplazando todo el resto. Como sólo se necesitan los “estilos críticos” cuando la página se carga por primera vez, y dado que los activos de bloqueo de renderizado juegan un papel rotundo en la velocidad de carga, la capacidad de Divi para separar automáticamente los estilos críticos de los que no lo son brinda una ventaja competitiva muy grande frente a sus principales competidores.

Una vez que termina de procesar el CSS, Divi descubrirá cual es la pequeña parte de CSS que debe cargarse primero para que el contenido visible de nuestro sitio aparezca de manera instantánea. Es por eso que Google favorece a los sitios hechos con el nuevo Divi puntajes tan altos.

En el nuevo Divi se añadieron varias opciones de aumento de velocidad con el objetivo de eliminar recursos innecesarios y retrasar las solicitudes de bloqueo de renderizado.

Opciones nuevas de Aceleración

Divi aumentó las opciones para aligerar la velocidad buscando eliminar recursos innecesarios y diferir las solicitudes de bloqueo de renderizado. Entre estas mejoras destacan:

Cacheo de Google Fonts

Sí, las fuentes de Google ahora se almacenan en caché y se convocan in-line en la sección del Encabezado. Así logra eliminarse una solicitud de bloqueo de renderizado, además de acelerarse los tiempos de carga. También se añadió la opción de eliminar archivos de fuentes “legacy” para disminuir la carga.

Adiós a los Emojis de WordPress

Como todos sabemos, WordPress sale de fábrica con sus emojis nativos, algo innecesario dado que los navegadores actuales, Firefox, Edge, Chrome y Safari, soportan emojis nativamente. De hecho, tales emojis nativos son más lindos y se ven mejor que los que trae WordPress. Divi nos permite ahora deshabilitar los de WordPress para ahorrar en recursos que no tienen ninguna razón de ser.

Retraso de la hoja de estilo de Gutenberg

De forma predeterminada, Divi carga en modo lazy (es decir que aplaza) la hoja de estilo de bloques Gutenberg en las páginas donde empleemos el constructor Divi. Los estilos Gutenberg se cargarán, por si acaso, al final de todo, pero han dejado de ser un bloqueo de la renderización de la página.

Íconos dinámicos

El nuevo Divi sale de fábrica con fuentes de iconos que se cargan bajo demanda en función de los módulos y las características que se estén empleando. Nada menor: se logró disminuir el peso del archivo de fuente de íconos de 90 kb a 6 kb. El conjunto completo de iconos se cargará sólo de ser necesario.

La opción está deshabilitada de forma predeterminada si estamos usando un tema Child o bien un módulo Divi personalizado. En el caso de que nuestro Child o módulo Divi de terceros empleen el conjunto completo de iconos Divi, entonces esta opción deberá permanecer deshabilitada.

Retraso de jQuery

A partir de esta actualización, Divi quitará jQuery del encabezado cuando no sea necesario. Como imaginamos, se cargará asincrónicamente en el pie de página para eliminar una solicitud adicional que bloqua el renderizado, acelerando la carga de nuestro sitio.

Si se pone en cola un script en el encabezado que requiera jQuery, se volverá a mover al encabezado para evitar conflictos. La opción se puede desactivar si causa alguna incompatibilidad.

Estilos en línea

La carga “en línea” elimina otra solicitud típica de bloqueo de renderizado mejorando así las puntuaciones de Google PageSpeed/GTMetrix. Cuando se habilitan las opciones de hoja de estilos en línea de CSS crítico y de CSS dinámico, se eliminan todas las solicitudes CSS de bloqueo de renderizado.

Al habilitar CSS dinámico, el archivo base.css ocupa unos pocos kb.

Conclusiones

Es un esfuerzo de desarrollo notable el que realizaron los desarrolladores de Divi, apostando por un Tema + Builder que recupere cierta competitividad perdida frente a opciones realmente rápidas (como Gutenberg). Es imposible no admirar la reconstrucción de Divi y testimoniar que realmente han logrado un producto ultra liviano, poderoso, flexible y bien centrado en ahorrar recursos, llamados al servidor, elementos bloqueantes y archivos pesados. Divi se ha renovado y sale al ruedo binario con una propuesta que nadie debería pasar desapercibida.

La buena noticia a nivel general es que todos los desarrolladores de Temas y Plugins parecen haber comprendido cabalmente que el bloat es un enemigo en común. Los admins cada vez somos más conscientes de que nuestro sitio debe ser ágil y no cargar con código o funciones innecesarias. Internet es cada vez más rápida, principalmente por estos esfuerzos. Y todos nos beneficiamos, no sólo como dueños de sitios sino también como internautas.

Deseando que la nota les haya gustado, los invitamos a dejar sus impresiones o dudas en los comentarios.

Nos encargamos del mantenimiento de tu sitio

Incluimos Divi All In One con nuestro servicio de WordPress Administrado

No comments on Divi mejora su performance
Duplika

Duplika

Si ya sos cliente, te recomendamos escribirnos desde la mesa de soporte.

I will be back soon

Duplika
Hola 👋
Elegí el medio de contacto de tu preferencia y te responderemos a la brevedad.
Conectarse via:
chat