¡¡Hoy estamos de notición!!
Divi acaba de sacar una actualización que mejora la velocidad de carga de las webs de una forma BRUTAL.
De hecho, para que lo veas, voy a empezar por el final. Es decir, primero te voy a enseñar una comparativa entre los maquetadores de WordPress y después vas a poder ver todas las mejoras que ha incorporado Divi en esta actualización.
Así que… empecemos viendo la comparativa de velocidad entre maquetadores de WordPress:
Índice del artículo
Divi vs Elementor vs Gutenberg vs Beaver Builder y Fusion Builder
¿Cuál es más rápido y ayuda más a posicionar tu web en Google?
Hoy el más rápido es: DIVI
Mira con detalle esta comparativa entre los mejores maquetadores de WordPress:
Pero vamos a analizarlo con detalle…
¿Cómo han realizado la comparativa?
Han creado 5 páginas web IDÉNTICAS con los TEMAS y MAQUETADORES más populares de WordPress teniendo cuidado de hacer que cada web sea lo más eficiente posible y lo más rápido posible utilizando las opciones nativas disponibles en cada tema y maquetador.
Además todos estas 5 webs se alojaron en el mismo hosting para que el servidor no afectase a la velocidad de carga. Para hacerlo han utilizado SiteGround y Cloudflare.
Y han probado estos 5 maquetadores combinados con estos temas:
En cada uno de estos enlaces puedes ver la web de prueba que han montado y verás que son iguales todas.
- Divi, el tema Divi incorpora maquetador, es un Todo en Uno.
- Elementor, usando su tema Hello.
- Gutenberg, con el complemento Ultimate Gutenberg Add-ons, utilizando el tema Astra.
- Beaver Builder, usando el tema Kadence.
- Fusion Builder, propio del tema Avada.
A continuación, han probado con Google PageSpeed cada sitio web seis veces y sacaron el promedio de las 5 mejores puntuaciones de cada uno.
Por supuesto, estos resultados están sujetos a cambios a medida que estos maquetadores se actualicen, pero a partir de esta actualización de Divi se puede ver a Divi 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 velocidad de Divi según Google
Las CSS se reducen un 94% y el JavaScript un 50%
En este sitio web de prueba que creamos 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 eliminaron por completo 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 mucho peso y permite crear sitios web rápidos y ligeros.
Puntuación casi perfecta para el PageSpeed de Google
Ahora es más fácil construir un sitio web Divi que obtenga una puntuación de 100 en Google PageSpeed para escritorio y de 99 en Google PageSpeed para móviles.
AVISO IMPORTANTE: Por muy rápido que sea el Tema o Maquetador que uses, si usas fotos o vídeos pesados, plugins que relenticen la web, etc. nunca conseguirás una buena velocidad. Lo importante de una web es que genere ingresos y que la velocidad sea razonablemente buena. No te obsesiones tampoco con la velocidad si no consigues el 100%.
Además esta web de prueba que han realizado alcanza también un 100% en GTmetrix utilizando un host estándar de WordPress 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 procesamiento, 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 hace que sea tan fácil construir un sitio web súper rápido.
¿Qué ha mejorado en Divi para que sea el maquetador más rápido de WordPress?
En Elegant Themes no se conforman con que Divi sea el Tema de WordPress más instalado del mundo, incluso por encima de los temas gratuitos como Astra y demás, como explico en el vídeo de más abajo.
En Elegan Themes han estado empeñados desde hace mucho en que la velocidad de Divi mejore con cada actualización, no en vano en mi blog tienes un montón de post dónde puedes ver como Divi ha ido mejorando su velocidad durante años de continuas mejoras.
Y ahora que ya sabes todo esto… vamos al lío…
¿Por qué Divi es ahora tan rápido?
Aquí te dejo un vídeo del Nick Roach, el fundador de Elegant Themes y por tanto del tema de WordPress más instalado del mundo: Divi, dónde explica todas estas mejoras que puedes leer más abajo.
La nueva versión de Divi elimina mucho peso, así de sencillo. Pero conseguir esta súper velocidad ha llevado muchos meses de duro trabajo dónde las mejoras más importantes han sido estas:
Ahora Divi solo carga lo que se ve. Lo demás no se procesa.
El nuevo Dynamic Framework de Divi solo procesa la lógica necesaria para representar los módulos y las funciones que usa en cada 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 usan algunas de las muchas funciones de Divi, como efectos de desplazamiento, animaciones, opciones adhesivas, opciones de borde, etc., tampoco procesa esas funciones.
Simple como eso.
Divi ahora es mucho más rápido que nunca porque elimina todo lo que no está usando. En otras palabras, cualquier cosa que pueda considerarse “peso innecesario” se borra del back-end.
Disminución drástica del peso de las CSS
Han aplicado esa misma lógica anti-peso a la hoja de estilo de Divi. Han reducido el gran archivo CSS de Divi y lo han 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 con Divi. No hay peso innecesario, porque el CSS no utilizado nunca se carga.
En la página web de prueba que han usado para calcular y mejorar la velocidad, el tamaño de CSS Divi se redujo de 860kb a 54kb, simplemente… ¡¡ALUCINAAAAANTE!!
Estilos inteligentes que eliminan los estilos duplicados
El CSS generado por el constructor de 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 , puede crear páginas muy ligeras porque cada módulo que usa un preset no necesita tener su propio bloque de estilos único, sino que puede compartir sus estilos con otros usuarios del preset.
Optimización de JavaScript
Han mejorado una gran parte del archivo JavaScript de Divi, lo que le permite a Divi cargar cada biblioteca JavaScript a pedido solo cuando lo necesitan los módulos específicos que está utilizando en una página.
También han desglosado algunas de las características de Divi, como Sticky Options y Motion Effects, cargando esas piezas solo cuando es necesario.
Además de eso, han eliminado grandes trozos de código innecesario y, al final, han reducido el tamaño del archivo JavaScript base de Divi a la mitad. ¿Cómo te quedas?
Esto le encanta a Google: CSS crítico que identifica qué cargar y qué no
El nuevo sistema CSS crítico de Divi identifica el CSS necesario para dar estilo al contenido en la mitad superior de la página y pospone la carga de todo lo demás.
Dado que solo se necesitan los estilos críticos cuando se carga la página 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 le da una gran ventaja sobre muchos otros temas y creadores 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
Han agregado varias opciones que puedes personalizar en las OPCIONES DEL TEMA para aumentar la velocidad a Divi con el objetivo de eliminar los recursos innecesarios y aplazar las solicitudes de bloqueo de procesamiento.
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 han añadido 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 esto 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
De forma predeterminada, Divi ahora cargará de forma diferida la hoja de estilo de bloques de Gutenberg en las páginas en las que esté 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 está 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á utilizando un tema secundario o un módulo Divi personalizado.
Si tu tema hijo o módulo Divi de terceros utiliza el conjunto completo de iconos Divi, entonces esta opción debería permanecer deshabilitada.
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 Divi style.css base es pequeño. Al cargar esto en línea, se elimina una solicitud de bloqueo de procesamiento y se mejoran las puntuaciones de PageSpeed de Google.
Cuando se habilitan las opciones de hoja de estilo en línea del anuncio CSS crítico y CSS dinámico, se eliminan todas las solicitudes de CSS que bloquean la representación.
