Elegant Themes acaba de lanzar una actualización que acelera Divi por todos lados y sienta las bases sobre las cuales Divi puede crecer con más módulos y más funciones sin tener que aumentar el tamaño de tu sitio web ni hacer que cargue más lento.
Divi se convierte así en un tema súper liviano al mejorar la estructura de su framework PHP, cargando y procesando solo lo que se necesita bajo demanda en función de los módulos y funciones que se utilizan.
Divi es ahora súper inteligente, identificando automáticamente CSS crítico, aplazando los estilos no críticos y reduciendo la salida de CSS de Divi Builder mediante la combinación de estilos duplicados.
También presenta una colección de nuevas opciones que mejoran automáticamente el rendimiento al almacenar en caché y aplazar varios procesos que retardan la carga de páginas y eliminar recursos innecesarios.
Primero, los resultados
En esta publicación, entraré en detalles sobre todas las nuevas funciones que mejoran el rendimiento y explicaré cómo Divi supera a la competencia en lo que respecta a la velocidad, pero primero compartamos algunos resultados.
De peso pesado a ligero
En el sitio web de prueba que crearon con la nueva versión de Divi, el tamaño de CSS se redujo en un 94%. Se eliminaron por completo todos los procesos que retardan la carga de páginas y el tamaño de JavaScript de Divi se redujo a la mitad.
Esto se debe a que la nueva versión de Divi elimina el código innecesariamente largo y permite así crear sitios web rápidos y livianos.
Puntajes de PageSpeed casi perfectos
Se construyó un sitio web Divi que obtuvo una puntuación de 100 en Google PageSpeed Desktop, 99 en Google PageSpeed Mobile y 100% en GTmetrix utilizando un host estándar de WordPress y CDN, sin complementos de rendimiento adicionales.
Ésto se debe a que las nuevas funciones de aceleración de Divi eliminan los procesos que retardan la carga de páginas, eliminan las solicitudes de recursos innecesarios y permiten que su contenido se muestre de inmediato.
Ahora, expliquemos cómo esta nueva versión de Divi facilita la creación de un sitio web súper rápido.
Divi elimina el código innecesario
La nueva versión de Divi elimina todo código innecesariamente largo y combina así lo mejor de dos mundos que hasta ahora parecían opuestos: el poder de un constructor web versátil con la agilidad de un tema liviano.
PHP dinámico
El nuevo framework dinámico de Divi solo procesa lo necesario para representar los módulos y las funciones que se usan en la página. Todo lo demás se elimina de la ecuación.
Si tu página solo usa 5 de los más de 50 módulos de Divi, Divi solo procesa las funciones necesarias para esos 5 módulos y se salta el resto. Si esos 5 módulos no utilizan algunas de las muchas funciones de Divi, como efectos de desplazamiento, animaciones, opciones adhesivas, opciones de borde, etc., tampoco procesa esas funciones.
Tan simple como eso. Divi ahora es mucho más liviano que nunca porque está eliminando todo lo que no se está usando según el caso. En otras palabras, cualquier cosa que pueda considerarse innecesaria se borra del código.
CSS dinámico
Se aplicó esa misma lógica a la hoja de estilos de Divi. El gran archivo CSS de Divi y lo fue dividido en cientos de pequeños componentes. En cada página, estos componentes CSS se combinan para formar una hoja de estilo única que contiene solo las piezas 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 del tema que está utilizando.
El resultado es una disminución drástica en el tamaño del archivo CSS en cada página que crea Divi. No hay código innecesario porque el CSS no utilizado nunca se carga. En el sitio web de prueba anterior, el tamaño de CSS de Divi se redujo de 860 kb a 54 kb.
Estilos inteligentes
El CSS generado por el constructor Divi también se ha optimizado para reducir los estilos duplicados y el tamaño general del archivo. Ahora, Divi identifica estilos duplicados y combina selectores en una sola lista. Con 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, sino que puede compartir sus estilos con otros que usan el mismo preset.
Optimización de JavaScript
Se modificó una gran parte del archivo JavaScript de Divi, lo que le permite a Divi cargar cada biblioteca JavaScript a pedido solo cuando los módulos específicos que está utilizando en una página lo necesitan.
También se desglosaron algunas de las características de Divi, como Sticky Options y Motion Effects, cargando esas piezas solo cuando es necesario. Además de eso, se pudo eliminar grandes trozos de código innecesario y, al final, reducir el tamaño del archivo JavaScript base de Divi a la mitad.
Nuevo CSS Crítico para Divi
El nuevo sistema Critical CSS de Divi identifica el CSS necesario para diseñar el contenido en la mitad superior de la página y difiere 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 procesos que bloquean la carga de la página 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 le da una gran ventaja sobre muchos otros temas y constructores de WordPress. .
Una vez que Divi termina de procesar su CSS, solo una pequeña parte de la ya pequeña cantidad de CSS se incluye en el tiempo de carga inicial del sitio web, lo que significa que el contenido se muestra de inmediato. Es por eso que Google otorga a los sitios web Divi puntuaciones tan altas desde el primer momento.
Nuevas opciones para aumentar la velocidad
Se agregaron varias opciones para aumentar la velocidad a Divi con el objetivo de eliminar los recursos innecesarios y aplazar los procesos que bloquean la carga de la página.
Cacheo de las Fuentes de Google
Las fuentes de Google ahora se almacenan en caché y se imprimen en línea en el header. Ésto elimina un proceso que bloqueaba el procesamiento y acelera así los tiempos de carga. También se agregó la opción de eliminar archivos de fuentes heredados para reducir la carga útil.
Eliminación de Emoji de WordPress
WordPress viene con un sistema de emoji nativo, pero ésto 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 ahora ofrece la opción de deshabilitar los emojis nativos de WordPress, lo que elimina los recursos innecesarios.
Aplazamiento de la hoja de estilo de Gutenberg
Por defecto, Divi ahora cargará de forma diferida la hoja de estilos de bloques de Gutenberg en las páginas en las que estés utilizando Divi Builder. Todavía se cargará, por si acaso, pero ya no bloqueará el procesamiento.
Iconos dinámicos
Divi ahora se envía con subconjuntos de fuentes de iconos que se cargan a pedido en función de los módulos y las funciones que se están utilizando. Esto reduce el tamaño de fuente del icono base de Divi de 90 kb hasta 6 kb.
El conjunto de iconos completo se carga solo cuando es necesario. Esta opción está deshabilitada de forma predeterminada si estás utilizando un tema secundario o un módulo Divi personalizado. Si tu tema hijo o el módulo Divi de terceros utiliza el conjunto completo de iconos Divi, esta opción debería permanecer desactivada.
Aplazamiento de jQuery
Divi moverá jQuery fuera del encabezado y lo cargará de forma asincrónica en el pie de página cuando no sea necesario en el encabezado. Esto elimina una solicitud de bloqueo de procesamiento y acelera los tiempos de carga. Si un script se pone en cola en el encabezado que requiere jQuery, se moverá de nuevo 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 style.css de Divi es pequeño. Al insertar ésto en línea, se elimina un bloqueo de procesamiento y se mejoran las puntuaciones de PageSpeed de Google. Cuando se habilitan las opciones de CSS crítico, CSS dinámico y Hoja de estilos en línea, se eliminan todas las solicitudes de CSS que bloquean la carga de la página.
Divi vs. La Competencia
Para asegurarse 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 se creó una comparación objetiva y para ver dónde está Divi.
Se tomaron los constructores de páginas de WordPress más populares emparejados con temas populares de WordPress que son conocidos por su buen rendimiento. Se usó cada par para crear un sitio web idéntico, teniendo cuidado de hacer que cada sitio web sea lo más eficiente posible y lo más rápido posible utilizando las opciones nativas disponibles en cada producto.
Todos estos sitios web se alojaron en la misma red multisitio utilizando SiteGround y Cloudflare. Se probaron:
- Elementor, usando su tema Hello.
- Gutenberg con el complemento Ultimate Gutenberg Add-ons, utilizando el tema Astra.
- Beaver Builder, usando el tema Kadence.
- Avada, usando su Fusion Builder.
A continuación, se probaron con Google PageSpeed para comparar los puntajes. Se probó cada sitio web seis veces y se promedió las puntuaciones de los 5 mejores resultados, lo que permitió una lectura anónima.
Por supuesto, estos resultados están sujetos a cambios a medida que éstos productos se actualicen, pero justo ahora se puede ver a Divi sentado cómodamente en la parte superior de la lista en todas las categorías. Con una puntuación de Google PageSpeed de 99 para dispositivos móviles y 100 para computadoras de escritorio, la velocidad de Divi es casi tan buena como parece.
La magia de Divi
La magia de estas últimas actualizaciones es que, con Divi, podemos tener un constructor fácil de usar y muy versátil y al mismo tiempo un sitio web rápido y bien posicionado. Si bien Divi permite hacer sitios de los más diversos y su selección de módulos es super completa, también es liviano debido a su filosofía anti código innecesario.
Fuente: https://www.elegantthemes.com/blog/theme-releases/divi-performance
0 comentarios