La nueva versión de Divi reduce el tamaño del código consiguiendo así dos características que todos queremos y  que hasta ahora se rechazaban mutuamente:

• Un constructor de páginas potente y versátil.
• La agilidad de un tema liviano.

Las nuevas funciones reductoras de tamaño de Divi aumentan la velocidad de tus sitios web Divi de una manera increíble. Pero estas funciones son solo una parte de la gran actualización de optimización del rendimiento de Divi que hará que tu sitio obtenga las mejores puntuaciones de PageSpeed ​.

Las 4 nuevas funciones reductoras de código de las que hablaremos en esta guía incluyen:

• Framework PHP dinámico.
• CSS dinámico.
• Iconos dinámicos.
• Optimización de JavaScript con bibliotecas dinámicas.

Un problema de tamaño y la solución de Divi

¿Qué es el tamaño del sitio web?

El tamaño del sitio web se compone del tamaño de cualquier página web estática (el HTML) combinado con todos los demás archivos que utiliza para diseñar la página (CSS) y agregar características complejas como ventanas emergentes y efectos de movimiento (JavaScript).

Pero eso no es todo. Los sitios creados con temas de WordPress (como Divi) dibujan el HTML de una página de forma dinámica utilizando archivos PHP en el servidor. Entonces, cuando hablamos de tamaño de sitios web, debemos considerar el tamaño y la eficiencia de estos archivos PHP que procesan el HTML dinámicamente.

Decir que un sitio web está inflado generalmente significa que las páginas están:

1. Cargando y/o procesando más de lo necesario.
2. Cargando y/o procesando de manera ineficiente.

Cómo el tamaño afecta la velocidad del sitio

Cuando un sitio web carga más de lo que se necesita para una página determinada, los tiempos de carga de la página aumentan innecesariamente, lo que resulta en un sitio web más lento.

Por ejemplo, si tenemos una hoja de estilo con 3.000 líneas de CSS y cargamos esa hoja de estilo en una página que solo utiliza 300 de esas líneas de CSS, hemos perdido tiempo cargando las otras 2.700 líneas de CSS que nunca se usarán.

De la misma manera, supongamos que estamos apuntando a 5 bibliotecas de JavaScript externas que se ejecutan en cada página.

Si tenemos una página que solo utiliza 1 de esas 5 bibliotecas, el sitio perderá tiempo en ejecutar 4 bibliotecas de JavaScript (con miles de líneas de código) sin ningún motivo.

Pero puede haber más código innecesario además de CSS y JS no utilizados.

Los archivos PHP de tu sitio web ejecutan toneladas de funciones que determinan qué contenido se muestra en la página. Entonces, si tenemos un archivo functions.php que tiene 25.000 líneas de código con cientos de funciones, permitir que el sitio ejecute todo el archivo antes de entregar el contenido a una página es excesivo, especialmente si la página solo requiere unas pocas de esas funciones para ser ejecutada.

Todo este tiempo dedicado a revisar CSS, JS y PHP innecesarios sin duda afectará la velocidad general de tu sitio web.

Cómo resolvió Divi el problema de tamaño

Debido a la abrumadora cantidad de características de diseño que Divi ha acumulado a lo largo de los años, el tamaño se convirtió en un problema que debía resolverse.

Con las nuevas funciones de optimización Divi ahora es extremadamente eficiente, procesando y renderizando solo lo que una página necesita y nada más. Con las nuevas características implementadas, se acabaron los problemas de tamaño en Divi.

Las funciones anti-tamaño de Divi

Las cuatro características clave que solucionan el problema del tamaño de Divi incluyen:

• Framework PHP dinámico: ésto soluciona el problema de tamaño de PHP al optimizar los archivos PHP para ejecutar solo las funciones necesarias para dibujar los módulos y las características añadidos en una página. No se procesan funciones adicionales.
• CSS dinámico: ésto soluciona el problema del tamaño excesivo de CSS mediante la creación de una hoja de estilo personalizada de forma dinámica, que incluye solo el CSS necesario para una página. No se carga ningún otro CSS.
• Iconos dinámicos: ésto disminuye el tamaño al cargar un subconjunto específico de fuentes de iconos que usa una página en lugar de cargarlas todas innecesariamente.
• Optimización de JavaScript con bibliotecas dinámicas: ésto soluciona el problema del tamaño de JavaScript optimizando el archivo script.js principal de Divi (ahora la mitad del tamaño) y cargando bibliotecas de JavaScript externas dinámicamente en una página solo si es necesario usarlo. No se ejecutarán otras bibliotecas JS innecesarias.

Puedes habilitar estas funciones en Divi> Opciones del tema. Luego, en la pestaña General, selecciona la subpestaña Performance. Allí verás todas las opciones de rendimiento disponibles, incluidas las cuatro mencionadas anteriormente.

Ahora entremos un poco más en detalle sobre cómo cada una de las funciones anti-tamaño de Divi aumenta la velocidad de tu sitio web Divi.

Cómo las nuevas funciones anti-tamaño de Divi aumentan la velocidad del sitio

Framework PHP Dinámico: Funciones a Demanda

La función Dynamic PHP Framework aumenta la velocidad del sitio de una manera poderosa al seleccionar y ejecutar funciones a demanda. La nueva lógica incorporada de Divi ejecutará solo las funciones necesarias para renderizar solo los módulos y características usados ​​en una página y nada más.

Comprobación antes de procesar

El proceso Dynamic PHP de servir contenido desde los archivos de tu sitio web (en el servidor) a la página web (navegador) es extremadamente eficiente. Se ejecuta una comprobación inicial rápida a través del archivo PHP para determinar si se ha utilizado un determinando módulo o función.

Una vez hecho ésto, la verificación no se vuelve a ejecutar para esa página porque recuerda qué funciones debe ejecutar la página. Ya no es necesario ejecutar miles de líneas de código no utilizado y cientos de funciones innecesarias antes de que se cargue una página.

Módulos a demanda

Esta función se ocupa de cargar módulos dinámicamente en una página. PHP solo procesará las funciones necesarias para los módulos usados ​​en una página.

Entonces, si tenemos 3 módulos en una página, Divi solo ejecutará las funciones necesarias para esos 3 módulos en lugar de ejecutar todas las funciones para todos los módulos. Esas 3 funciones mostrarán el código para ese módulo en la página sin perder tiempo de procesamiento.

Funciones a demanda

Así como Divi procesa y carga módulos dinámicamente a demanda, hace lo mismo con todas las funciones utilizadas en una página.

En lugar de ejecutar funciones para todas las características posibles que podrían usarse en Divi (efectos de desplazamiento, animaciones, opciones adhesivas, opciones de borde, etc.), Divi solo procesa las funciones de características que realmente se están usando en un elemento. Esta característica no se aplica solo a los módulos, sino a cualquier elemento Divi, incluidas las secciones, filas y columnas.

La forma más rápida de hacer un sándwich

Si fueras a la cocina a preparar un sándwich, no perderías tiempo sacando todo de la despensa antes de seleccionar los tres ingredientes que necesitas. ¡Por supuesto no! Echarías una mirada rápida a los elementos de la despensa y luego sacarías solo esos tres ingredientes. Luego haces el sándwich.

De la misma manera, Divi examinará lógicamente las funciones que necesita en el archivo PHP (la despensa) y luego usará solo esas funciones para entregar los módulos y características (los ingredientes) que necesita para su página (el sándwich).

CSS dinámico

La misma lógica utilizada en el framework PHP también se ha aplicado a la hoja de estilo de Divi. Como puedes imaginar, la hoja de estilo principal de Divi era bastante grande considerando todas las características que tiene. Pero cargar esta hoja de estilo grande en cada página provoca un tamaño innecesario y tiempos de carga de página más lentos.

Divi carga CSS de forma dinámica en función de cada diseño de página

Con Dynamic CSS, cada vez que se carga una página, ésto es lo que sucede:

• Se carga el CSS base de Divi, que incluye solo el CSS necesario para diseñar el tema Divi. Este CSS es de alrededor de 50 kb.
• Divi también carga CSS adicional de forma dinámica en función de las necesidades de la página. Por lo tanto, este CSS solo contendrá el estilo necesario para cualquier módulo, función o configuración de diseño que se use en la página. Con un diseño de página simple, este CSS podría agregar solo otros 30kb.

Esto resuelve completamente el problema del tamaño de CSS. No hay código innecesario porque no se carga ningún otro CSS.

Antes de Dynamic CSS, la hoja de estilo de Divi tenía alrededor de 900 KB y se cargaba en todas las páginas independientemente del contenido. Ahora, si solo necesita 80 kb de CSS para la página, Dynamic CSS elimina los 800kb de más que no se necesitan para esa página.

Esto significa que tu página carga aún más rápido.

Ejemplo

Supongamos que creamos la página Home usando Divi (o cargamos un diseño predefinido). Podemos ver cómo el CSS generado dinámicamente se corresponde con los elementos de diseño en la página.

Divi verifica cada elemento que se ha agregado y diseñado en esa página (la sección, la imagen, el texto, los divisores, etc.) y carga el CSS que necesita y nada más.

Este es solo un ejemplo de una instancia de CSS dinámico en funcionamiento en una página. ¡Otra página puede requerir incluso menos CSS y se cargará aún más rápido!

Iconos dinámicos

Entrega inteligente de subconjuntos de fuentes de iconos para cargar las fuentes que necesitamos sin tener que cargar todas las fuentes de iconos en cada página.

Hay tres subconjuntos de fuentes de iconos que se utilizan según las necesidades de una página:

• Base: este subconjunto incluye todos los iconos que se utilizan de forma predeterminada en Divi y sus módulos.
• Social: este subconjunto incluye todos los íconos básicos más todos los íconos sociales, que se cargan cuando se usa un módulo de seguimiento de redes sociales.
• Todo: este es el conjunto de iconos completo que se usa en el selector de iconos en un módulo Divi para seleccionar un icono personalizado.

Si tenemos una página que no usa un módulo para compartir en las redes sociales o un módulo con un ícono agregado usando el selector de íconos, entonces el tamaño del archivo de fuente del ícono base para esa página solo será de 6kb.

El uso del módulo para compartir en las redes sociales aumentará un poco ese tamaño para incluir más fuentes de íconos sociales que se necesitan.

Y al usar el selector de íconos en un módulo de anuncio (por ejemplo) se usará el conjunto de íconos completo que está más cerca de 90kb. Aquí hay un ejemplo de todo el subconjunto de fuentes de iconos que se agregan a una página que usa una fuente del selector de iconos de un módulo.

Es bueno saber que si no usamos íconos en una página, la página será un poco más rápida.

Optimización de JavaScript con bibliotecas dinámicas

Para aumentar la velocidad del sitio, optimizamos nuestro JavaScript para que sea más conciso y modular. Esto permite a Divi cargar JavaScript dinámicamente a demanda. Entonces, ahora, Divi puede cargar funciones de JavaScript (como Sticky Options), así como bibliotecas externas de JavaScript (como Magnific Popup) solo cuando los módulos o las funciones de una página las necesitan.

El tamaño de archivo Javascript base más pequeño combinado con las bibliotecas JavaScript dinámicas definitivamente aumentará la velocidad del sitio simplemente porque hay menos código para procesar para cada carga de página.

Y, debido a que esta lógica anti-tamaño ocurre por página, si tenemos una fila adhesiva en una página, no tenemos que preocuparnos de que ese JavaScript adhesivo se cargue en una página que no lo tiene. Ésta es la ventaja del JavaScript dinámico de Divi.

Ejemplo 1: Módulo de imagen que utiliza lightbox

Supongamos que tenemos una página con un módulo de imagen con lightbox habilitado. Divi apuntará y ejecutará dinámicamente la biblioteca Magnific Popup JS para esa página para aplicar esa funcionalidad emergente. Si el lightbox está deshabilitado en la imagen, la biblioteca JS no se carga ni se ejecuta en la página.

Ejemplo 2: Elemento con opciones adhesivas

Supongamos que decidimos convertir un elemento Divi en adhesivo con la función Sticky. Divi agregará dinámicamente ese script a la página para aplicar la funcionalidad adhesiva al elemento. Si no se dan opciones adhesivas a ese elemento (o cualquier otro elemento en la página), ese script nunca se agrega a la página.

Potencia y velocidad, juntas

Con las nuevas funciones de optimización del tamaño de Divi podemos tenerlo todo. Todas las herramientas de diseño, el poder de elegir cuándo usarlas y un sitio web liviano y rápido.

Ya no tenemos que comprometer la velocidad del sitio para tener más y mejores herramientas de diseño.

Fuente: https://www.elegantthemes.com/blog/divi-resources/divi-anti-bloat-features