Hay por ahí la idea – mal transmitida – de que Divi es lento, y no solo no es verdad sino que cada día que pasa lo es menos. De hecho, actualmente es el maquetador más rápido y optimizado de todos, al mismo nivel de rendimiento que una web hecha solo con el editor de bloques de WordPress.
El problema de la sobrecarga web y la solución de Divi
¿Qué es la sobrecarga de una web?
La sobrecarga de una web es el tamaño de cualquier página web estática (el HTML) combinada con todos los demás archivos que utiliza para dar estilo a la página (CSS) y añadir características complejas como ventanas emergentes y efectos de movimiento (JavaScript).
Pero eso no es todo. Los sitios creados con temas WordPress (como Divi) procesan el HTML de una página de forma dinámica utilizando archivos PHP en segundo plano. Así que cuando hablamos de sobrecarga de la web, tenemos que considerar el tamaño y la eficiencia de estos archivos PHP que dinámicamente procesan el HTML en una página.
Decir que una web está sobrecargada suele significar que las páginas están:
- Cargando y/o procesando más de lo necesario
- Cargando y/o procesando de forma ineficiente.
Cómo afecta la sobrecarga a la velocidad del sitio
Cuando una web carga más de lo necesario para una página concreta, los tiempos de carga de la página se resienten, lo que se traduce en una web más lenta.
Por ejemplo, si tienes una hoja de estilos con 5.000 líneas de CSS y cargas esa hoja de estilos en una página que sólo utiliza 200 líneas de CSS dentro de la hoja de estilos, has perdido tiempo cargando las otras 4.800 líneas de CSS que nunca se utilizaron.
De la misma manera, digamos que estás remitiendo a 5 bibliotecas JavaScript externas que se ejecutan en cada página.
Si tienes una página que sólo utiliza una de esas 5 bibliotecas, el sitio perderá tiempo ejecutando 4 bibliotecas JavaScript (con miles de líneas de código) sin ninguna razón al procesar la página.
Pero hay más sobrecarga aparte de los CSS y JS no utilizados. Los archivos PHP de tu web ejecutan toneladas de funciones que determinan el contenido que se sirve en la página.
Así que si tienes un archivo functions.php que tiene 50 líneas de código con cientos de funciones, permitir que tu sitio ejecute todo el archivo antes de entregar el contenido a una página es una exageración, especialmente si la página sólo requiere que se ejecuten unas pocas de esas funciones.
Todo este tiempo invertido en revisar CSS, JS y PHP innecesarios afectará, sin duda, a la velocidad general de tu web.
Cómo ha resuelto Divi el problema de la sobrecarga
Debido a la abrumadora cantidad de características de diseño que Divi ha acumulado a lo largo de los años, la sobrecarga se convirtió en un problema que necesitaba ser resuelto.
Para resolver el problema de la sobrecarga, el equipo de Elegant Themes ha aplicado la lógica «anti-sobrecarga» a las nuevas características que han hecho que el problema de sobrecarga de Divi quede completamente obsoleto.
Con estas características anti-sobrecarga, Divi es ahora extremadamente eficiente en el procesamiento y el carga de sólo lo que una página necesita y nada más.
Con la implementación de estas nuevas características, NO hay problema de sobrecarga en Divi.
Características anti-sobrecarga de Divi
Las 4 características clave que solucionan el problema de sobrecarga de Divi son las siguientes:
- Módulos dinámicos – Esto soluciona el problema de la sobrecarga de PHP mediante la optimización de los archivos PHP para que sólo se ejecuten las funciones necesarias para representar los módulos y las características añadidas en una página. No se procesa ninguna función adicional.
- CSS dinámico – Esto soluciona el problema de la sobrecarga de CSS mediante la creación de una hoja de estilos personalizada de forma dinámica que incluye sólo el CSS necesario para una página. No se carga ningún otro CSS.
- Iconos dinámicos – Esto disminuye la sobrecarga al cargar un subconjunto específico de fuentes de iconos que utiliza una página en lugar de cargarlas todas innecesariamente.
- Optimización de JavaScript con bibliotecas dinámicas de JavaScript – Esto soluciona el problema de la sobrecarga de JavaScript mediante la optimización del archivo principal
script.jsde Divi (que ahora tiene la mitad de tamaño) y la carga de bibliotecas externas de JavaScript de forma dinámica en una página sólo si es necesario utilizarlas. No se ejecutará ninguna otra biblioteca JS innecesaria.
Puedes habilitar estas características navegando a Divi → Opciones del tema. Luego, en la pestaña General, selecciona la subpestaña Performance. Allí verás todas las opciones de rendimiento disponibles, incluyendo las cuatro mencionadas anteriormente.
Ahora vamos a entrar en un poco más de detalle acerca de cómo cada una de las características anti-sobrecarga de Divi aumenta la velocidad de tu web Divi.
Cómo las nuevas características anti-sobrecarga de Divi aumentan la velocidad
Framework PHP dinámico: Funciones bajo demanda
La característica de Framework PHP Dinámico aumenta la velocidad del sitio de una manera eficaz mediante la selección y ejecución de funciones bajo demanda.
La lógica anti-sobrecarga incorporada en Divi ejecutará sólo las funciones necesarias para procesar sólo los módulos y características utilizadas en una página y nada más.
Comprobación antes de procesar
El proceso dinámico de PHP de servir el contenido de los archivos de tu web (la parte del servidor) a la página web ( la parte del cliente) es extremadamente eficiente.
Se ejecuta una rápida comprobación inicial a través de los archivos PHP para determinar si se ha utilizado un módulo o característica. Una vez hecho, la comprobación no se vuelve a ejecutar para esa página porque recuerda qué funciones necesita la página para ser ejecutada.
Se acabó el ejecutar miles de líneas de código sin usar y cientos de funciones innecesarias antes de cargar una página.
Módulos a la carta
Esta función tiene un nuevo marco para cargar dinámicamente módulos en una página. Debido a la lógica anti-sobrecarga mediante PHP, Divi sólo procesará las funciones de shortcodes necesarias para los módulos utilizados en una página.
Así que si tienes 3 módulos en una página, Divi sólo 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 utiliza.
Esas 3 funciones procesarán el shortcode/HTML para ese módulo en la página sin perder tiempo de procesamiento.
Características a la carta
De la misma manera que Divi procesa y carga dinámicamente los módulos bajo demanda, Divi hace lo mismo para todas las características utilizadas en una página.
En lugar de ejecutar funciones para todas las posibles características que podrían ser utilizadas en el elemento Divi (efectos de desplazamiento, animaciones, opción fija, opciones de borde, etc.), Divi sólo procesa aquellas funciones de características que realmente están siendo utilizadas en un elemento.
Esta característica no se aplica sólo a los módulos, sino a cualquier elemento Divi incluyendo secciones, filas y columnas.
La forma más rápida de preparar un bocadillo
Si fueras a la cocina a preparar un bocadillo de jamón con tomate y aceite, no te pasarías el tiempo sacando todo de la despensa antes de seleccionar los tres ingredientes que necesitas (pan, jamón y aceite).
Por supuesto que no. Echarías un vistazo rápido a los artículos de la despensa y luego sacarías sólo esos tres ingredientes. Luego, preparas el bocadillo.
De la misma manera, Divi lógicamente echará un vistazo a las funciones que necesitas en el archivo PHP (la despensa) y luego utilizará sólo esas funciones para entregar los módulos y características (los ingredientes) que necesitas para tu página (el bocadillo).
CSS dinámico
La misma lógica anti-sobrecarga utilizada en el PHP también se ha aplicado a la hoja de estilos de Divi.
Como puedes imaginar, la hoja de estilos principal de Divi era bastante grande teniendo en cuenta todas las características que tiene.
Pero cargar esta gran hoja de estilos en cada página provoca una sobrecarga innecesaria y tiempos de carga de la página más lentos.
Divi carga dinámicamente el CSS en función del diseño de cada página
Con el 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 sólo el CSS necesario para dar estilo al tema Divi. Este CSS es de alrededor de 50kb.
- Divi también carga CSS adicional dinámicamente en base a lo que la página necesita. Así que este CSS sólo contendrá el estilo necesario para cualquier módulo, características o ajustes de diseño utilizados en la página. Con un diseño simple de la página de inicio, este CSS podría añadir sólo otros 30kb.
Esto soluciona el problema de la sobrecarga de CSS porque ahora no existe. No hay sobrecarga porque no se carga ningún otro CSS.
Antes del CSS Dinámico, la hoja de estilos de Divi era de unos 900kb y se cargaba en todas las páginas independientemente del contenido.
Ahora, si sólo necesitas 80kb de CSS para la página, Dynamic CSS elimina los más de 800kb que no necesitas para cargar la página. Eso significa que tu página se carga aún más rápido.
CSS crítico
El CSS crítico de Divi identifica el CSS necesario para añadir los estilos necesarios en el contenido sobre el pliegue (above the fold) y aplaza todo lo demás.
Dado que los estilos críticos sólo se necesitan cuando la página se carga por primera vez, y dado que los activos de bloqueo de procesamiento 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 otros temas y maquetadores para WordPress.
Después de que Divi haya terminado de procesar su CSS, apenas queda nada en la cabecera de la web, lo que significa que el contenido se muestra de inmediato, y es por eso que Google da a las webs con Divi unas puntuaciones tan altas desde el principio.
Altura del umbral crítico
La opción de altura de umbral crítico está relacionada con el CSS crítico.
Cuando el CSS crítico está activado, Divi determina un «umbral por encima del pliegue» y aplaza todos los estilos para los elementos por debajo del pliegue.
Sin embargo, este umbral es sólo una estimación y puede variar en diferentes dispositivos. El aumento de la altura del umbral aplazará menos estilos, lo que dará lugar a tiempos de carga ligeramente más lentos, pero menos posibilidades de que se produzcan desplazamientos de diseño acumulativos (CLS).
Si experimentas problemas de CLS, puedes aumentar la altura del umbral.
Iconos dinámicos
Entrega inteligente de subconjuntos de fuentes de iconos para cargar las fuentes que necesitas sin tener que cargar todas las fuentes de iconos 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 por defecto en el tema Divi y sus módulos.
- Social – este subconjunto incluye todos los iconos base más todos los iconos sociales, que se cargan cuando se utiliza un módulo de seguimiento de medios sociales.
- Todos – este es el conjunto de iconos que se utiliza cuando se utiliza el selector de iconos en un módulo Divi para seleccionar un icono personalizado.
Si tienes una página que no utiliza un módulo para compartir en redes sociales o un módulo con un icono añadido mediante el selector de iconos, el tamaño del archivo de la fuente del icono base para esa página será sólo de 6kb.
Es bueno saber que si no se utilizan iconos en una página, ésta será un poco más rápida.
Optimización de JavaScript con bibliotecas dinámicas de JavaScript
Para aumentar la velocidad del sitio, Divi ha optimizado su JavaScript para que sea más conciso y modular. Esto permite a Divi cargar JavaScript dinámicamente bajo demanda.
Así que, ahora, Divi puede cargar las funciones de JavaScript (como opciones de fijar elementos), así como las bibliotecas externas de JavaScript (como Magnific Popup) sólo cuando son necesarios por los módulos o características en una página.
El menor tamaño del archivo Javascript base, combinado con las bibliotecas JavaScript dinámicas, aumentará definitivamente la velocidad del sitio, simplemente porque hay menos código que procesar en cada carga de la página.
Y, debido a que esta lógica anti-sobrecarga sucede en cada página, si tienes una fila fija en una página, no tendrás que preocuparte de que ese JavaScript fijo se cargue en una página que no lo tenga. Esta es la gracia del JavaScript dinámico de Divi.
Aplazar jQuery y jQuery Migrate
Si el script de jQuery se carga demasiado pronto (por defecto en la cabecera), se pausa el procesado del HTML hasta que se ejecuta el script. Esto ralentiza el procesado y visualización de tus páginas.
Así que, cuando sea posible, Divi moverá jQuery y jQuery Migrate al body del documento HTML para quitar cualquier petición que bloquee la visualización y así acelerar los tiempos de carga.
Cargar la hoja de estilos dinámica integrada
La opción de cargar la hoja de estilo dinámica integrada es la última optimización de CSS que elimina todas las solicitudes de CSS que bloquean la visualización.
Gracias al CSS dinámico, la hoja de estilos básica de Divi es ahora lo suficientemente pequeña como para poder cargarla directamente en la página.
La carga de este CSS integrado elimina una solicitud de bloqueo de la visualización y mejora las puntuaciones de Google PageSpeed.
Cuando se activan las opciones CSS crítico, CSS dinámico y cargar hoja de estilos dinámica integrada en la línea, se eliminan todas las solicitudes de CSS que bloquean la visualización.
Mejorar la carga de las fuentes de Google
La opción de mejorar la carga de las fuentes de Google permite almacenar en caché las fuentes de Google y cargarlas directamente en la cabecera. Esto reduce las peticiones que bloquean la visualización y acelera los tiempos de carga.
También hemos añadido la opción de limitar la compatibilidad de las fuentes de Google con los navegadores antiguos.
Esto básicamente elimina los archivos de fuentes heredadas para reducir la carga útil. La activación de esta opción reducirá el tamaño de Google Fonts y mejorará los tiempos de carga, pero limitará la compatibilidad con Google Fonts en algunos navegadores muy antiguos.
Puedes desactivar esta opción para aumentar la compatibilidad con los navegadores más antiguos a un ligero coste de rendimiento.
Desactivar los emojis de WordPress
WordPress incluye un sistema nativo de emojis, pero ya no es necesario debido a la compatibilidad con los emojis nativos de 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 desactivar los emojis nativos de WordPress, lo que elimina los recursos innecesarios. Y tener menos recursos para procesar resulta en cargas de páginas más rápidas.
Aplazar el bloque CSS de Gutenberg
Al usar el Constructor Divi en una página, también estás eligiendo no usar el editor de bloques de WordPress por defecto (Gutenberg). Y dado que no vas a utilizar bloques para dar estilo a tu página, no necesitas que el CSS de Gutenberg bloquee la carga de tu página Divi.
Con la opción de diferir el CSS de bloques de Gutenberg activada, Divi ahora (por defecto) cargará de forma diferida el CSS de bloques de Gutenberg en las páginas en las que utilices el Constructor de Divi. Todavía se cargará por si acaso (en el pie de página), pero ya no bloqueará la visualización.
¿Se notan estas mejoras de Divi?
Pues se notan y mucho, solo tienes que actualizar Divi si ya tienes licencia (y si no la tienes aún aquí la tienes con un 20% de descuento) y comprobarás que todas tus páginas mejoran en rendimiento, velocidad y puntuaciones de las métricas web principales.
Por supuesto, como ya comprenderás, dependerá mucho según la página la mejora que obtengas, pero en las pruebas que he hecho hay mejoras en todas.
También, para comprobarlo, el equipo de Elegant Themes ha creado webs idénticas utilizando los temas y maquetadores más populares para WordPress, y las ha puesto a prueba.
Estos sitios de prueba están alojados en SiteGround + CloudFlare, sin plugins de rendimiento adicionales o ajustes de rendimiento. Las páginas se probaron con Google PageSpeed Insights. Cada web se probó 6 veces y se tomó la media de las 5 mejores puntuaciones, quitando la más discrepante.
Como puedes ver, ¡Divi se comportó de maravilla!
Aquí tienes enlace a las demos de cada sitio de pruebas por si quieres comprobarlo tú mismo:
Y aquí un vídeo de las pruebas…
Como verás la pelea entre maquetadores sigue abierta, y parece que Divi sigue en cabeza. Al final todos sabemos que el ganador será el editor de bloques Gutenberg, pero aún le queda mucho para ponerse a la altura de los maquetadores actuales, no solo de Divi, de cualquiera de ellos.
Esto significa que a Divi le quedan años aún de ser la mejor opción para diseñar webs con WordPress sin tener que programar código, no solo por funcionalidades y características, también en lo que se refiere a rendimiento y velocidad.
La entrada ¿Todavía piensas que Divi es lento? la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.
0 Commentaires