Cómo las nuevas funciones antihinchazón de Divi aumentan la velocidad del sitio

El problema de la hinchazón y la solución de Divi

¿Qué es la hinchazón del sitio web?

La hinchazón del sitio web representa el tamaño de cualquier página web estática determinada (el HTML) combinado con todos los demás archivos que utiliza para diseñar la página (CSS) y agregar funciones complejas como ventanas emergentes y efectos de movimiento (JavaScript).

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

Decir que un sitio web está inflado generalmente significa que las páginas (1) se cargan y/o procesan más de lo que se necesita y (2) se cargan y/o procesan de manera ineficiente.

Cómo la hinchazón 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 se ven afectados, lo que da como resultado un sitio web más lento. Por ejemplo, si tiene una hoja de estilo con 3000 líneas de CSS y carga esa hoja de estilo en una página que solo utiliza 300 líneas de CSS dentro de la hoja de estilo, ha perdido el tiempo cargando las otras 2700 líneas de CSS que nunca se usaron.

De la misma manera, supongamos que está apuntando a 5 bibliotecas de JavaScript externas que se ejecutan en cada página. Si tiene una página que solo utiliza una de esas 5 bibliotecas, el sitio perderá tiempo ejecutando 4 bibliotecas de JavaScript (con miles de líneas de código) sin ningún motivo al renderizar la página.

Pero hay más exceso en riesgo además de CSS y JS no utilizados. Los archivos PHP de su sitio web ejecutan toneladas de funciones que determinan qué contenido se sirve en la página. Entonces, si tiene un archivo functions.php que tiene 25000 líneas de código con cientos de funciones, permitir que su sitio ejecute todo el archivo antes de entregar contenido a una página es excesivo, especialmente si la página solo requiere algunas de esas funciones para ser ejecutado.

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

Cómo resolvimos el problema de la hinchazón de Divi

Debido a la abrumadora cantidad de características de diseño que Divi ha acumulado a lo largo de los años, la hinchazón se convirtió en un problema que debía resolverse. Para resolver el problema de la hinchazón, aplicamos la lógica «anti-hinchazón» a las nuevas características que hicieron que el problema de la hinchazón de Divi quedara completamente obsoleto. Con estas características anti-inflación, Divi ahora es extremadamente eficiente en el procesamiento y renderizado solo de lo que necesita una página y nada más. Con estas nuevas características implementadas, NO hay problema de hinchazón en Divi.

Funciones antihinchazón de Divi

Las cuatro características clave que solucionan el problema de la hinchazón de Divi incluyen:

• Marco de módulo dinámico: soluciona el problema de la hinchazón de PHP al optimizar los archivos PHP para ejecutar solo las funciones necesarias para representar los módulos y las funciones agregadas en una página. No se procesan funciones adicionales.
• CSS dinámico: esto soluciona el problema del exceso de CSS mediante la creación dinámica de una hoja de estilo personalizada que incluye solo el CSS necesario para una página. No se carga ningún otro CSS.
• Iconos dinámicos: esto reduce la hinchazón al cargar un subconjunto específico de fuentes de iconos que usa una página en lugar de cargarlos todos innecesariamente.
• Optimización de JavaScript con bibliotecas dinámicas de JavaScript: esto soluciona el problema de la sobrecarga de JavaScript al optimizar el archivo script.js principal de Divi (ahora la mitad del tamaño) y cargar bibliotecas de JavaScript externas dinámicamente en una página solo si necesita usarlas. No se ejecutarán otras bibliotecas JS innecesarias.

Puede habilitar estas funciones navegando a Divi > Opciones de tema. Luego, en la pestaña General, seleccione la subpestaña Rendimiento. Allí verá 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-hinchazón de Divi aumenta la velocidad de su sitio web Divi.

Cómo las nuevas funciones antihinchazón de Divi aumentan la velocidad del sitio

Framework PHP dinámico: funciones bajo demanda

La función Dynamic PHP Framework aumenta la velocidad del sitio de una manera poderosa al seleccionar y ejecutar funciones a pedido. La lógica anti-hinchazón incorporada de Divi ejecutará solo las funciones necesarias para representar solo los módulos y las funciones utilizadas en una página y nada más.

Comprobación antes del procesamiento

El proceso PHP dinámico de servir contenido de los archivos de su sitio web (lado del servidor) a la página web (lado del cliente) es extremadamente eficiente. Se ejecuta una verificación inicial rápida a través de los archivos PHP para determinar si se ha utilizado un módulo o función. Una vez hecho esto, la verificación no se vuelve a ejecutar para esa página porque recuerda qué funciones necesita ejecutar la página. No más ejecutar miles de líneas de código sin usar y cientos de funciones innecesarias antes de que se cargue una página.

Módulos Bajo Demanda

Esta característica tiene un nuevo marco para cargar dinámicamente módulos en una página. Debido a la lógica anti-inflación a través de PHP, Divi solo procesará las funciones de shortcode necesarias para los módulos utilizados en una página. Entonces, si tiene 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, independientemente de cuál se use. Esas 3 funciones mostrarán el shortcode/HTML para ese módulo en la página sin perder tiempo de procesamiento.

Funciones bajo demanda

Así como Divi procesa dinámicamente y carga módulos a pedido, Divi hace lo mismo con todas las funciones utilizadas en una página. En lugar de ejecutar funciones para todas las funciones posibles que podrían usarse en Divi Element ( Efectos de desplazamiento , Animaciones, Opción adhesiva, Opciones de borde, etc.), Divi solo procesa las funciones de funciones que realmente se usan en un elemento. Esta característica no se aplica solo a los módulos, sino a cualquier elemento Divi, incluidas las secciones, las filas y las columnas.

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

Si fueras a la cocina a preparar un sándwich de mantequilla de maní y mermelada, no perderías tiempo sacando todo de la despensa antes de seleccionar los tres ingredientes que necesitas (pan, mantequilla de maní, mermelada). ¡Por supuesto que no! Echaría un vistazo rápido a los artículos en la despensa y luego sacaría solo esos tres ingredientes. Luego haces el sándwich. De la misma manera, Divi observará 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 anti-hinchazón utilizada en el marco 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 teniendo en cuenta todas las características que tiene. Pero cargar esta gran hoja de estilo en cada página provoca una sobrecarga innecesaria y tiempos de carga de página más lentos.

Divi carga dinámicamente CSS en función de cada diseño de página específico

Con CSS dinámico, cada vez que se carga una página, esto 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 50kb .
• 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, característica o configuración de diseño utilizada en la página. Con un diseño de página de inicio simple, este CSS podría agregar solo otros 30 kb .

Esto soluciona el problema de la hinchazón de CSS porque ahora no existe. No hay hinchamiento 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 más de 800 kb que no necesita para cargar la página. Eso significa que su página se carga aún más rápido.

Ejemplo

Supongamos que crea una página de inicio con Divi Builder (o carga un diseño prefabricado) como en la captura de pantalla a continuación. Puede ver cómo el CSS generado dinámicamente se corresponde con los elementos de diseño de 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.

Además, este es solo un ejemplo de una instancia de Dynamic CSS 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 íconos para cargar las fuentes que necesita sin tener que cargar todas las fuentes de íconos en cada página.

Hay tres subconjuntos de fuentes de iconos que se utilizan en función de lo que necesita una página.

• Base: este subconjunto incluye todos los iconos que se utilizan de forma predeterminada en el tema 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 completo de íconos que se usa cuando usa el selector de íconos en un módulo Divi para seleccionar un ícono personalizado.

Si tiene una página que no usa un módulo para compartir en redes sociales o un módulo con un ícono agregado usando el selector de íconos, entonces el tamaño de archivo de la fuente del ícono base para esa página será de solo 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. Este es un ejemplo del subconjunto de fuentes de íconos sociales que se carga dinámicamente debido a un módulo de seguimiento de redes sociales en la página.

Y al usar el selector de íconos en un módulo publicitario, por ejemplo, se usará el conjunto de íconos completo, que está más cerca de los 90kb. Este es un ejemplo del subconjunto de fuentes Todos los íconos que se agrega a una página que usa una fuente del selector de íconos de un módulo.

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

Optimización de JavaScript con bibliotecas dinámicas de JavaScript

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

El tamaño de archivo de Javascript base más pequeño combinado con las bibliotecas dinámicas de JavaScript 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-inflación ocurre por página, si tiene una fila fija en una página, no tendrá que preocuparse de que ese JavaScript fijo se cargue en una página que no lo tiene. Esta es la belleza del JavaScript dinámico de Divi.

Ejemplo 1: Biblioteca JavaScript dinámica para un módulo de imagen usando Lightbox

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

Ejemplo 2: JavaScript dinámico para un elemento Divi usando opciones fijas

Supongamos que decide hacer que un Elemento Divi sea fijo usando las opciones adhesivas de Divi. Divi agregará dinámicamente ese script a la página para aplicar la funcionalidad adhesiva al elemento. Si no se le dan opciones fijas a ese elemento (oa cualquier otro elemento en la página), ese script nunca se agrega a la página.

Potencia y velocidad: no más compromisos

Con las nuevas funciones anti-hinchazón de Divi, puedes tenerlo todo. Todas las herramientas de diseño que puedas imaginar, el poder de elegir cuándo usarlas y un sitio web tan rápido como quieras. Ya no tienes que comprometer la velocidad del sitio web al diseñar un sitio con Divi. Considere emparejar Divi con otros complementos líderes diseñados para optimizar la velocidad .