Mantys CoreCómo acelerar un sitio Divi y mejorar sus Core Web Vitals (paso a paso)
En una frase: un sitio Divi puede ser rápido si se optimiza en el orden correcto, primero las imágenes, luego el CSS y después el JavaScript, empezando por las palancas que no pueden romper nada antes de tocar las que sí pueden.
Divi tiene fama de ser pesado. Incluye mucho CSS y JavaScript para que el generador visual pueda hacerlo todo, y de forma predeterminada ese peso se nota en sus Core Web Vitals. La buena noticia: un sitio Divi sí puede ser rápido, y no hace falta desmontarlo por completo para conseguirlo.
El truco está en optimizar en el orden correcto y empezar por las palancas que no pueden romper nada. Ese método de lo seguro primero es la columna vertebral de esta guía. Iremos de Imágenes a CSS y luego a JavaScript, de lo más seguro a lo más delicado, y cada paso se apoya en una guía dedicada en la que puede profundizar.
Paso 1: Imágenes (la palanca más segura)
Las imágenes son casi siempre el mayor peso de una página Divi, y Divi lo empeora de una forma concreta: se apoya mucho en imágenes a ancho completo y en muchas imágenes de fondo CSS (fondos de sección y de módulo).
Las medidas seguras son las de siempre, y ninguna de ellas puede romper nada: comprima sus imágenes, sírvalas como WebP o AVIF, y sírvalas con las dimensiones correctas en lugar de un archivo enorme reducido por CSS. Aplique lazy-load a las imágenes por debajo del pliegue, pero nunca a la imagen principal de la parte superior (el LCP), o la ralentizará. Y defina width y height (o un aspect-ratio) para que el diseño deje de saltar (CLS).
Aquí está la trampa específica de Divi. Las imágenes de fondo de sección y de módulo no tienen srcset en absoluto. La palanca srcset/sizes simplemente no puede tocarlas, así que ninguna herramienta puede ajustarles el tamaño por usted. Tiene que comprimir y dimensionar esas imágenes aguas arriba, antes de definirlas como fondo. Este caso de imágenes sin srcset se trata en nuestra guía sobre srcset y sizes.
En cuanto a las imágenes normales, el sizes atributo que generan Divi y WordPress suele ser incorrecto en cuanto la imagen está dentro de una columna o una cuadrícula, que es la mayoría de un diseño Divi, por lo que el navegador descarga de más. Por qué ocurre esto y cómo verlo en DevTools en treinta segundos es el tema de esa misma guía de srcset.
Paso 2: CSS
Divi tiene su propio panel de rendimiento (Opciones del tema → Rendimiento). Active Dynamic CSS: en lugar de cargar toda la hoja de estilos de Divi, carga solo el CSS de los módulos realmente usados en la página. Es una ganancia grande y segura. Dynamic Module Framework y Dynamic Icons funcionan igual, cargando solo lo que la página necesita.
Divi también tiene una opción de Critical CSS. Si ya usa una herramienta externa de critical CSS, no ejecute las dos a la vez. Desactive el Critical CSS de Divi y deje que un único motor se encargue de la tarea. Que dos motores compitan por lo mismo es la receta para páginas inconsistentes y difíciles de depurar. Llamémoslo la regla de oro: un motor por tarea.
Aquí es donde ocurre la rotura clásica de Divi. El Critical CSS y la eliminación de CSS no usado conservan solo lo visible en la parte superior de la página al cargar. Su menú móvil, la superposición de búsqueda y el mega-menú están ocultos en ese momento, así que sus estilos se eliminan y aparecen abiertos o sin estilo. La solución duradera es insertar esas reglas interactivas en un bloque no optimizable después de wp_head(), así que viajan con el tema. El método completo, y las trampas relacionadas con las cachés por URL y móvil/escritorio, están en la guía de Critical CSS.
Otra costumbre de Divi: después de un cambio grande, regenere el CSS estático de Divi. Una caché de Divi desactualizada puede servir una hoja de estilos truncada, que se parece exactamente a una optimización rota. Purgue y regenere, y luego compruebe el renderizado real.
Paso 3: JavaScript (y el menú de Divi)
Divi carga jQuery, y en la mayoría de los sitios es el menú lo que lo obliga. Diferir JavaScript es una gran ganancia, pero también es donde las cosas se rompen si se hace sin cuidado.
El caso emblemático es el menú hamburguesa que solo se abre al segundo clic. Divi incluso tiene una opción para esto, Defer jQuery And jQuery Migrate, y activarla sin más provoca justo ese fallo: el primer toque despierta la carga del script en lugar de abrir el menú.
La solución, manteniendo el menú de Divi, consiste en excluir toda la cadena de dependencias del retraso en conjunto: jQuery, jQuery Migrate y el script del menú. Localícelos por un fragmento de URL único (no por el handle interno, que puede eliminarse), y mantenga una protección de estado del documento para que el script excluido tolere ejecutarse pronto. Haga eso, y el menú vuelve a responder al primer toque. Si no puede gestionar la cadena, deje Defer jQuery desactivado en lugar de publicar un menú de dos toques. El paso a paso está en la guía del menú hamburguesa.
Una vez resuelto el menú, diferir o retrasar el resto (sliders, lightboxes, etc.) no tiene problema y aporta la mayor parte de la ganancia de JavaScript.
Paso 4: El orden y el método
Combínelo con el método de lo seguro primero. Primero, active todas las ganancias seguras: compresión y dimensiones de imágenes, lazy-load fuera de pantalla (nunca en el LCP), minificación, compresión del servidor, caché del navegador, font-display. No pueden romper nada, así que no hace falta probarlas una por una.
Luego mida sus Core Web Vitals para ver qué queda. Solo entonces aborde las palancas que hay que probar, el critical CSS y el diferido de JavaScript, una a la vez, comprobando móvil Y escritorio y sus flujos clave (menú, búsqueda, carrito) después de cada cambio. El razonamiento completo está en el pilar de las optimizaciones seguras.
Con Mantys Core
Mantys Core puede ser toda su capa de rendimiento, caché incluida, o funcionar junto a lo que ya tiene configurado. En un sitio Divi en concreto, encaja con cada paso anterior:
gestiona el Critical CSS y el used-CSS página por página, y respeta los bloques no optimizables, de modo que los menús y superposiciones ocultos al cargar conservan sus estilos;
mide el ancho real mostrado de cada imagen, reescribe
sizes, y genera WebP, incluido el dimensionado correcto que la propia salida de Divi pasa por alto;retrasa el JavaScript con excepciones declaradas por fragmento de URL y una protección de estado del documento, para que el menú de Divi siga respondiendo al primer toque;
y separa móvil y escritorio para que no tenga que adivinar qué caché sirve qué.
La regla de oro, un motor por tarea, aplicada por usted: usted desactiva las opciones de Divi correspondientes, y Mantys se encarga de esas tareas de forma limpia, sin dos motores compitiendo.
En resumen
- Divi puede ser rápido; optimice en orden, Imágenes, luego CSS, luego JavaScript, y empiece por lo que no puede romperse.
- Imágenes: comprima, use WebP, dimensiones correctas, lazy-load fuera de pantalla (nunca en la imagen principal); las imágenes de fondo de Divi no tienen srcset, así que dimensiónelas aguas arriba.
- CSS: active Dynamic CSS; mantenga un único motor de critical CSS, no dos; proteja los menús y superposiciones ocultos al cargar; regenere el CSS estático de Divi después de cambios grandes.
- JavaScript: para mantener el menú de Divi con el retraso de JS activado, excluya toda la cadena de jQuery por fragmento de URL con una protección de estado, o deje Defer jQuery desactivado.
- Método: primero todas las ganancias seguras, mida los Core Web Vitals, y luego las palancas de riesgo una a la vez, probando móvil y escritorio.