Acelera Divi desde cualquier ángulo

Primero, ¡compartamos algunos resultados!

En esta publicación, entraré en detalles sobre todas las características que mejoran el rendimiento que hemos agregado y cómo Divi derriba a la competencia por la velocidad, pero primero vayamos al final y compartamos algunos resultados.

De peso pesado a ligero

En esta página de prueba Construimos con la nueva versión de Divi, el tamaño de CSS se redujo en un 94%. Todos los activos de bloqueo de renderización se han eliminado por completo y el tamaño de JavaScript de Divi se ha reducido a la mitad. Esto se debe a que la nueva versión de Divi elimina el gas y le brinda la libertad de crear sitios web rápidos y elegantes (siga leyendo para descubrir cómo).

Resultados de PageSpeed ​​casi perfectos listos para usar

Era fácil ser divi. para construir sitio web que anotó 100 en Google PageSpeed ​​Desktop, 99 en Google PageSpeed ​​Mobile y 100% en GTmetrix con un host de WordPress estándar y CDN, sin complementos de rendimiento adicionales. Esto se debe a que las nuevas funciones de aumento de velocidad de Divi eliminan las solicitudes de bloqueo de renderizado, eliminan las solicitudes de recursos innecesarios y muestran su contenido al instante.

Ahora expliquemos cómo es tan fácil hacer un sitio web súper rápido con esta nueva versión de Divi.

Divi elimina la flatulencia

La nueva versión de Divi elimina el gas y le brinda lo mejor de ambos mundos: el poder de un creador de páginas a gran escala con la agilidad de un tema liviano.

Marco PHP dinámico

El nuevo Dynamic Framework de Divi solo maneja la lógica necesaria para representar los módulos y funciones que usa en cada página. Todo lo demás se elimina de la ecuación. Si su sitio usa solo 5 de los más de 50 módulos de Divi, Divi solo procesa las funciones que son necesarias para estos 5 módulos y se salta el resto. Si estos 5 módulos usan algunas de las muchas funciones de Divi, como efectos de desplazamiento, animaciones, pegajosas, no lo haga. opciones de uso, opciones de marco, etc., estas funciones tampoco se procesan. Es así de simple. Divi ahora es mucho más delgado que nunca porque elimina todo lo que no usa en un instante. En otras palabras, cualquier cosa que pueda considerarse «hinchada» se elimina del backend.

CSS dinámico

Aplicamos la misma lógica anti-hinchazón a la hoja de estilo de Divi. Tomamos el archivo CSS grande de Divi y lo dividimos en cientos de componentes pequeños. En cada página, estos componentes CSS se combinan en una hoja de estilo única que contiene solo las partes necesarias para diseñar esa página en particular según los módulos, las características del módulo y las opciones de diseño de diseño que está utilizando. El resultado es una reducción drástica en el tamaño del archivo CSS en cada página que crea con Divi. No hay gasporque el CSS no utilizado nunca se carga. En nuestro sitio web de prueba anterior, el tamaño de CSS de Divi se cambió de 860 KB todo el camino hasta uno desnudo 54 KB.

Estilos inteligentes

El CSS generado por el constructor de Divi también se ha ajustado para reducir los estilos duplicados y el tamaño general del archivo. Divi ahora identifica estilos duplicados y combina selectores en una sola lista. Utilizando Ajustes preestablecidos de Divi, puede crear páginas muy simples porque cada módulo que usa un ajuste preestablecido no necesita tener su propio bloque de estilo único, sino que puede compartir sus estilos con otros usuarios del ajuste preestablecido.

Optimización de JavaScript

Hemos modularizado una gran parte del archivo JavaScript de Divi para que Divi pueda cargar cualquier biblioteca JavaScript cuando sea necesario, solo cuando lo necesiten los módulos específicos que está utilizando en una página. También desarrollamos algunas de las características de Divi, como Sticky Options y Motion Effects, que solo cargan estas partes cuando es necesario. Además, pudimos eliminar grandes trozos de código innecesario y, al final, reducir el tamaño del archivo JavaScript básico de Divi. en dos.

Introducción a CSS crítico para Divi

El nuevo sistema CSS crítico de Divi identifica el CSS necesario para diseñar el contenido por encima del pliegue y cambia todo lo demás. Dado que solo se necesitan los estilos críticos cuando la página se carga por primera vez, y dado que los activos de bloqueo de renderización juegan un papel tan importante en la velocidad de la página, la capacidad de Divi para separar automáticamente los estilos críticos y no críticos ofrece una gran ventaja sobre muchos otros temas de WordPress y: Constructores.

Una vez que Divi termina de procesar su CSS, solo una pequeña fracción de la ya pequeña cantidad de CSS se incluye en el tiempo de carga inicial del sitio web, lo que significa que se muestra el contenido. inmediatamente. Es por eso que Google otorga a los sitios web Divi puntuaciones tan altas desde el primer momento.

Nuevas opciones para aumentar la velocidad

Agregamos varias opciones de velocidad a Divi para eliminar recursos innecesarios y mover solicitudes de bloqueo de renderizado.

Almacenamiento en caché de fuentes de Google

Las fuentes de Google ahora se almacenan en caché y se imprimen en línea en el encabezado. Esto elimina una solicitud de bloqueo de procesamiento y acelera los tiempos de carga. También agregamos la opción de eliminar archivos de fuentes más antiguos para reducir la carga útil.

Eliminar emojis de WordPress

WordPress viene con un sistema de emoji nativo, pero realmente ya no es necesario debido al soporte nativo de emoji en los navegadores modernos. De hecho, los emojis nativos se ven mucho mejor que la versión de WordPress. Divi te da la opción de deshabilitar los emojis nativos de WordPress, lo que elimina los recursos innecesarios.

Aplazamiento de la hoja de estilo de Gutenberg

De forma predeterminada, Divi ahora cargará la hoja de estilo de bloques de Gutenberg en las páginas en las que esté utilizando Divi Builder. Todavía se está cargando por si acaso, pero ya no está bloqueado para renderizar.

Símbolos dinámicos

Divi ahora viene con subconjuntos de fuentes de símbolos que se cargan según sea necesario en función de los módulos y funciones que está utilizando. Esto reduce el tamaño de fuente del símbolo Divi básico de 90 KB a 6 KB. El conjunto de símbolos completo solo se carga cuando es necesario. Esta opción está deshabilitada de forma predeterminada cuando se usa un tema secundario o un módulo Divi personalizado. Si su tema hijo o la tercera parte del módulo Divi usa el conjunto de símbolos Divi completo, esta opción debe dejarse sin marcar.

Aplazamiento de jQuery

Divi mueve jQuery fuera del encabezado y lo carga de forma asincrónica en el pie de página cuando no es necesario en el encabezado. Esto eliminará un requisito de bloqueo de procesamiento y acelerará los tiempos de carga. Cuando un script se pone en cola en el encabezado que requiere jQuery, se vuelve a mover al encabezado para evitar conflictos. Esta opción se puede desactivar si causa problemas.

Hoja de estilo en línea

Cuando el CSS dinámico está habilitado, el Divi style.css base es pequeño. La carga en línea elimina una solicitud de bloqueo de procesamiento y mejora las puntuaciones de PageSpeed ​​de Google. Con CSS crítico, Opciones de hojas de estilo en línea de anuncios CSS dinámicos habilitadas, se eliminan todas las solicitudes de CSS que bloquean la representación.

Divi contra la competencia

Queríamos asegurarnos de que Divi no solo fuera más rápido que antes, sino también tan rápido o más rápido que la competencia. Así que hicimos una comparación objetiva y vemos dónde se encuentra Divi. Tomamos los creadores de páginas de WordPress más populares y los combinamos con temas populares de WordPress que son conocidos por su buen rendimiento. Usamos cada par para crear un sitio web idéntico, cuidando de que cada sitio web sea lo más eficiente y rápido posible utilizando las opciones nativas disponibles en cada producto. Todos estos sitios web se alojaron en la misma red de varios sitios con SiteGround y Cloudflare. Probamos:

• Elementor, con su tema Hello.
• Gutenberg con el complemento Ultimate Gutenberg Add-ons que usa el tema Astra.
• Constructor de castores, utilizando el tema Kadence.
• Abierto con su Fusion Builder.

A continuación, los probamos con Google PageSpeed ​​para ver cómo se comparan los resultados. Probamos cada sitio web seis veces y promediamos las 5 mejores puntuaciones para que se pueda leer de forma anónima. Por supuesto, estos resultados pueden cambiar a medida que estos productos se actualicen, pero a partir de ahora puedes ver a Divi sentado cómodamente. Al inicio de la lista en todas las categorias. Con una puntuación de Google PageSpeed ​​de 99 para dispositivos móviles y 100 para computadoras de escritorio, la velocidad de Divi es tan buena como parece.

La magia de Divi

La magia de estas actualizaciones es que con Divi puedes tener tu pastel y comértelo también. Divi ofrece una amplia gama y una completa selección de módulos, pero también es agradable para sus pies debido a su filosofía anti-hinchazón. En última instancia, Divi te da la libertad de elegir cómo quieres usarlo y qué tan rápido quieres que sea tu sitio web.