En Mora Estudio Creativo nos preocupamos de que nuestros diseños web en nuestra Agencia en Sevilla vayan como un cohete, si has actualizado a Divi 5 esto te puede interesar y mucho. Configurar WP Rocket en una web hecha con Divi 5 puede mejorar muchísimo la velocidad, pero también puede darte un buen susto si activas opciones sin revisar compatibilidades.

Porque sí: WP Rocket es una herramienta potente. Divi 5 también. Pero cuando dos sistemas intentan optimizar CSS, JavaScript, fuentes, caché y carga diferida al mismo tiempo, hay que saber quién manda en cada parte.

En esta guía te explicamos cómo configurar WP Rocket para Divi 5 de forma segura, qué opciones activar, cuáles dejar quietecitas y qué revisar después para que la web cargue más rápido sin romper el diseño, el menú móvil, los formularios ni los scripts de medición.

Por qué Divi 5 y WP Rocket necesitan una configuración cuidada

Divi 5 incluye sus propias opciones de rendimiento dentro del tema. En el panel de Divi podemos encontrar ajustes como Framework de Módulos Dinámicos, CSS Crítico, carga de fuentes, aplazado de jQuery o scripts de terceros.

Elegant Themes indica que estas opciones de rendimiento permiten cargar solo módulos y recursos necesarios, reduciendo el peso de la página y mejorando la velocidad de carga.

WP Rocket, por su parte, trabaja sobre caché, optimización de archivos CSS y JavaScript, LazyLoad, precarga, fuentes, base de datos y otras mejoras de rendimiento. Según su propia documentación, opciones como Remove Unused CSS, Delay JavaScript Execution, LazyLoad, Add Missing Image Dimensions, Preload Fonts y Self-host Google Fonts forman parte de sus ajustes recomendados para mejorar el rendimiento.

El problema no es usar ambas herramientas. El problema es duplicar funciones sin control.

Por eso, la clave es esta:

• Divi 5 debe encargarse de sus optimizaciones internas.
• WP Rocket debe encargarse de la caché, CSS no usado, JavaScript, LazyLoad, fuentes y precarga.
• Sin pisarse. Sin hacer experimentos raros. Sin diseñar webs como churros.

Antes de tocar WP Rocket: configura bien Divi 5

Antes de entrar en WP Rocket, ve a:

Divi → Opciones del tema → General → Rendimiento

La configuración recomendada para Divi 5 sería esta:

Framework de Módulos Dinámicos: Activado
Iconos Dinámicos: Activado
CSS Crítico: Activado
Altura del Umbral Crítico: Baja
Desactivar Emojis de WordPress: Activado
Aplazar el CSS de Bloques de Gutenberg: Activado
Mejorar la carga de Google Fonts: Activado
Aplazar jQuery y jQuery Migrate: Desactivado al principio
Encolar Script de Compatibilidad de jQuery: Activado
Aplazar Scripts Adicionales de Terceros: Desactivado

Por qué activar el Framework de Módulos Dinámicos

Esta opción permite que Divi cargue solo los módulos que se usan en cada página. Es decir, si una página no utiliza un módulo concreto, no tiene sentido cargar recursos de más.

En una web corporativa hecha con Divi 5, esto suele ayudar mucho porque normalmente hay muchas secciones: hero, servicios, llamadas a la acción, formularios, testimonios, imágenes, blog y footer.

Por qué activar Iconos Dinámicos

Los iconos pueden parecer poca cosa, pero en diseño web todo suma.

Con Iconos Dinámicos activado, Divi puede optimizar mejor la carga de iconografía y evitar recursos innecesarios. En una web con botones, flechas, iconos de servicios, redes sociales o elementos visuales, es una opción recomendable.

Por qué mantener CSS Crítico activado

El CSS crítico ayuda a priorizar los estilos necesarios para mostrar correctamente la parte visible inicial de la página. Esto afecta directamente a la percepción de velocidad.

WP Rocket también tiene sus propias optimizaciones CSS, pero en una instalación con Divi 5 conviene mantener activo el CSS Crítico de Divi y dejar que WP Rocket complete el trabajo con Remove Unused CSS.

Por qué desactivar el aplazado de jQuery en Divi al principio

Aquí hay que tener cuidado.

jQuery sigue siendo delicado en muchas webs WordPress. Puede afectar al menú móvil, formularios, sliders, cookies, scripts externos, reseñas o módulos interactivos.

Por eso, aunque Divi permita aplazar jQuery y jQuery Migrate, nuestra recomendación es dejarlo desactivado inicialmente y gestionar la optimización JavaScript desde WP Rocket. Elegant Themes señala que esta opción mueve jQuery cuando es posible, aunque puede depender de plugins de terceros y de sus dependencias.

Primero estabilizamos. Luego ya afinamos.

Configuración de caché en WP Rocket para Divi 5

En versiones recientes de WP Rocket, algunas opciones clásicas de caché ya no aparecen agrupadas en una única pestaña llamada “Caché”. WP Rocket explica que la vida útil de caché está en Reglas avanzadas, User Cache está en Add-ons y Mobile Cache viene activada por defecto en nuevas instalaciones.

La configuración recomendada sería:

Caché móvil: Activada
Caché separada para móviles: Activada si aparece
Caché para usuarios conectados: Desactivada
Vida útil de caché: 10 horas

Dónde encontrar la vida útil de caché

Ve a:

WP Rocket → Reglas avanzadas → Vida útil de la caché

Pon:

20 horas (si no cambias diariamente la web)

Esta configuración es segura para la mayoría de webs corporativas, blogs y páginas de servicios.

Dónde encontrar la caché para usuarios conectados

Ve a:

WP Rocket → Add-ons → User Cache

Déjala desactivada.

Esta opción solo suele tener sentido en webs con área privada, membresías, academias, intranets o contenido personalizado por usuario. Para una web corporativa con Divi 5, formularios y blog, mejor apagada.

Optimización CSS en WP Rocket para Divi 5

Esta es una de las partes más importantes.

Ve a:

WP Rocket → Optimización de archivos

Y configura CSS así:

Minificar archivos CSS: Activado
Optimizar entrega del CSS: Remove Unused CSS
Cargar CSS asíncronamente: Desactivado
Combinar archivos CSS: Desactivado

WP Rocket recomienda Remove Unused CSS como método principal para optimizar CSS. Esta opción elimina el CSS que no se utiliza en cada página y conserva solo el CSS necesario, ayudando a reducir tamaño, peticiones, tiempo de carga y bloqueo de renderizado.

Por qué no activar “Cargar CSS asíncronamente”

Porque si usas Remove Unused CSS, no necesitas activar también Load CSS Asynchronously.

Además, WP Rocket tiene documentación específica sobre Divi y avisa de posibles incidencias visuales en algunos módulos cuando se usa carga asíncrona de CSS, como el módulo Blog.

En cristiano: mejor Remove Unused CSS y menos inventos.

Qué hacer si se rompe algún estilo

Después de activar Remove Unused CSS, revisa:

Home
Menú móvil
Cabecera
Footer
Páginas de servicios
Blog
Formulario
Testimonios o reseñas
Banner de cookies

Si algo se descuadra, no desactives WP Rocket entero. Primero prueba a añadir clases en la lista segura de CSS.

Posibles clases de Divi a revisar:

.et_pb
.et-l
.et-db
.et_builder_inner_content
.et_pb_section
.et_pb_row
.et_pb_column
.et_pb_module
.et_pb_menu
.et_mobile_menu
.mobile_menu_bar
.et_pb_image
.et_pb_button
.et_pb_text
.et_pb_code

No hace falta meterlas todas de primeras. Solo cuando detectes que un elemento concreto se rompe.

Optimización JavaScript en WP Rocket para Divi 5

Ve a:

WP Rocket → Optimización de archivos

Y configura JavaScript así:

Minificar archivos JavaScript: Activado
Combinar archivos JavaScript: Desactivado
Cargar JavaScript diferido: Activado
Retrasar la ejecución de JavaScript: Activado

Delay JavaScript Execution es una de las opciones más potentes de WP Rocket porque retrasa la carga de scripts hasta que el usuario interactúa con la página. Esto puede mejorar métricas como JavaScript no usado, Total Blocking Time y rendimiento general. WP Rocket también ofrece documentación específica para resolver incidencias relacionadas con esta opción mediante exclusiones.

Qué revisar después de activar Delay JavaScript

Después de activar esta opción, revisa la web en incógnito y en móvil real.

Comprueba especialmente:

Menú móvil
Botones
Formularios
Banner de cookies
Reseñas externas
Popups
Google Analytics
Google Tag Manager
Meta Pixel
Mapas
Vídeos

Exclusiones habituales si algo falla

Si se rompe el menú móvil o algún comportamiento de Divi:

/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/Divi/js/scripts.min.js
et-core-unified
et-builder-modules

Si falla el banner de cookies:

cookie
gdpr
complianz
cmplz
cookieyes
moove
cli

Si fallan reseñas externas, como widgets de opiniones:

trustindex
ti-widget

Si tienes problemas de medición con Google Tag Manager, GA4, Google Ads o Meta Pixel, podrías valorar excluir:

googletagmanager.com
gtag/js
google-analytics.com
connect.facebook.net
fbevents.js

Ahora bien, aquí hay que decidir con cabeza. Excluir scripts de medición puede mejorar la precisión del tracking, pero empeora ligeramente el rendimiento. No hay una respuesta universal: depende de si la prioridad de esa página es conversión, medición publicitaria o velocidad pura.

Configuración de medios en WP Rocket

Ve a:

WP Rocket → Medios

Activa:

LazyLoad para imágenes: Activado
LazyLoad para imágenes de fondo CSS: Activado si aparece
LazyLoad para iframes y vídeos: Activado
Reemplazar iframe de YouTube por imagen de vista previa: Activado si hay vídeos
Añadir dimensiones de imagen faltantes: Activado
Self-host Google Fonts: Activado
Preload Fonts: Activado

WP Rocket indica que su pestaña Media permite optimizar imágenes y fuentes mediante LazyLoad, LazyLoad para iframes y vídeos, dimensiones faltantes, fuentes autoalojadas y precarga de fuentes.

LazyLoad para iframes y vídeos retrasa la carga de estos elementos hasta que el usuario llega a esa zona de la página, algo especialmente útil en móvil.

Cuidado con la imagen principal

No todas las imágenes deben tener LazyLoad.

La imagen principal visible al cargar la página, especialmente si es el elemento LCP, no debería cargarse tarde. Si PageSpeed Insights detecta una imagen above the fold como LCP, conviene excluirla del LazyLoad.

Ejemplo:

nombre-de-la-imagen-principal.jpg

O mejor todavía: usar la URL exacta de la imagen detectada en DevTools o PageSpeed.

Fuentes: Google Fonts, Divi y WP Rocket

En Divi 5 recomendamos activar:

Mejorar la carga de Google Fonts: Activado

Y en WP Rocket:

Self-host Google Fonts: Activado
Preload Fonts: Activado

WP Rocket explica que Self-host Google Fonts detecta las fuentes de Google utilizadas en la web y las aloja localmente desde el propio servidor, reduciendo dependencias externas.

Esto puede ayudar a mejorar velocidad, privacidad y estabilidad visual.

Eso sí: después de activar o desactivar Self-host Google Fonts, WP Rocket puede limpiar CSS optimizado para reflejar los cambios correctamente.

Precarga de caché

Ve a:

WP Rocket → Precarga

Activa:

Preload Cache: Activado
Preload Links: Activado
Precarga basada en sitemap: Activada si aparece

WP Rocket explica que Preload Cache simula una visita a las páginas para generar archivos de caché antes de que llegue un usuario real. De esta forma, las páginas pueden servirse más rápido desde la primera visita.

Esto es especialmente útil cuando usamos Remove Unused CSS, porque la precarga ayuda a generar caché y CSS usado de forma más práctica. WP Rocket recomienda usar Preload junto con Remove Unused CSS para agilizar el proceso.

Base de datos y Heartbeat

En WP Rocket → Base de datos, puedes activar limpieza mensual de:

Revisiones
Borradores automáticos
Entradas en la papelera
Comentarios spam
Comentarios en la papelera
Transitorios caducados
Optimización de tablas

No hace falta obsesionarse con limpiar todos los días. En una web corporativa, una limpieza mensual suele ser suficiente.

En WP Rocket → Heartbeat, recomendamos:

Control Heartbeat: Activado
Backend: Reducir actividad
Editor de entradas: Reducir actividad
Frontend: Reducir actividad

No conviene desactivar Heartbeat completamente porque WordPress lo utiliza para funciones como autoguardado, bloqueo de edición y avisos internos.

Qué hacer después de cambiar ajustes en Divi o WP Rocket

Cada vez que cambies estilos globales, cabecera, footer, plantillas de Divi o diseño de páginas importantes, sigue este orden:

1. Guardar cambios en Divi.
2. Vaciar la caché de CSS de Divi.
3. Borrar caché en WP Rocket.
4. Borrar Used CSS en WP Rocket.
5. Ejecutar precarga de caché.
6. Revisar la web en incógnito.
7. Revisar la web en móvil real.

WP Rocket tiene documentación específica para Divi y recomienda limpiar Used CSS cuando se actualiza una plantilla de Divi y se han modificado diseño, layout o estilos.

Configuración final recomendada para WP Rocket con Divi 5

Esta sería una configuración segura y potente para una web corporativa hecha con Divi 5:

DIVI 5 - RENDIMIENTO

Framework de Módulos Dinámicos: Activado
Iconos Dinámicos: Activado
CSS Crítico: Activado
Altura del Umbral Crítico: Baja
Desactivar Emojis de WordPress: Activado
Aplazar CSS de Bloques de Gutenberg: Activado
Mejorar carga de Google Fonts: Activado
Aplazar jQuery y jQuery Migrate: Desactivado inicialmente
Encolar Script de Compatibilidad de jQuery: Activado
Aplazar Scripts Adicionales de Terceros: Desactivado

WP ROCKET - CACHÉ

Caché móvil: Activada
Caché separada para móviles: Activada si aparece
Caché de usuario: Desactivada
Vida útil de caché: 10 horas

WP ROCKET - CSS

Minificar CSS: Activado
Remove Unused CSS: Activado
Cargar CSS asíncronamente: Desactivado
Combinar CSS: Desactivado

WP ROCKET - JAVASCRIPT

Minificar JavaScript: Activado
Combinar JavaScript: Desactivado
Cargar JavaScript diferido: Activado
Delay JavaScript Execution: Activado

WP ROCKET - MEDIOS Y FUENTES

LazyLoad imágenes: Activado
LazyLoad iframes y vídeos: Activado
Añadir dimensiones faltantes: Activado
Self-host Google Fonts: Activado
Preload Fonts: Activado

WP ROCKET - PRECARGA

Preload Cache: Activado
Preload Links: Activado
Precarga por sitemap: Activada si aparece

Errores frecuentes al configurar WP Rocket con Divi 5

Activar todas las opciones sin probar

WP Rocket no es un botón mágico. Hay opciones muy potentes, pero también delicadas. Especialmente Remove Unused CSS y Delay JavaScript Execution.

Activa por bloques. Primero caché y medios. Luego CSS. Después JavaScript.

Así sabrás exactamente qué ha provocado un problema si algo se rompe.

Duplicar optimizaciones con otros plugins

No uses WP Rocket, Autoptimize, LiteSpeed Cache, WP-Optimize Cache y plugins similares haciendo todos lo mismo a la vez.

Uno optimiza. Los demás, como mucho, complementan funciones concretas.

No revisar la versión móvil

El escritorio puede estar perfecto y el móvil roto.

Después de configurar WP Rocket en Divi 5, revisa siempre:

Menú hamburguesa
Botones
Formularios
Espaciados
Imágenes
Footer
Cookies

Olvidar limpiar cachés después de tocar Divi

Divi genera archivos CSS. WP Rocket genera caché y CSS usado. Si modificas diseño y no limpias ambas partes, puedes ver una mezcla rara de estilos antiguos y nuevos.

FAQ sobre WP Rocket y Divi 5

¿WP Rocket es compatible con Divi 5?

Sí, WP Rocket puede utilizarse con webs creadas en Divi. De hecho, WP Rocket cuenta con documentación específica para Divi, especialmente en relación con Remove Unused CSS y la limpieza de Used CSS cuando se actualizan plantillas del tema.

¿Debo activar Remove Unused CSS con Divi 5?

Sí, es una de las opciones más interesantes para mejorar rendimiento, pero debe probarse bien. Si algún módulo se descuadra, conviene revisar safelist CSS antes de desactivar la función completa.

¿Debo activar Delay JavaScript Execution?

Sí, pero con revisión. Es una opción muy potente para mejorar rendimiento, aunque puede afectar a menús, formularios, cookies, píxeles o scripts externos. WP Rocket recomienda trabajar con exclusiones cuando algún script da problemas.

¿Puedo activar también el aplazado de jQuery en Divi?

Nuestra recomendación es no activarlo al principio si ya estás usando WP Rocket para optimizar JavaScript. Primero deja estable la configuración de WP Rocket y luego prueba el aplazado de jQuery en Divi solo si todo funciona correctamente.

¿Qué debo hacer si la web se rompe después de activar WP Rocket?

Desactiva primero la opción concreta que acabas de activar, no todo el plugin. Los problemas más habituales suelen venir de Remove Unused CSS, Delay JavaScript Execution, Load JavaScript Deferred o LazyLoad. WP Rocket tiene una guía específica para diagnosticar incidencias cuando la web se rompe tras activar optimizaciones.

Conclusión

Configurar WP Rocket para Divi 5 no consiste en activar todas las casillas y rezar.

Consiste en entender qué hace Divi, qué hace WP Rocket y qué parte debe gestionar cada uno.

La configuración ideal pasa por dejar activas las optimizaciones internas de Divi 5, usar WP Rocket para caché, CSS no usado, JavaScript, LazyLoad, fuentes y precarga, y revisar bien cada cambio en escritorio y móvil.

Cuando se hace bien, el resultado es claro: una web más rápida, más estable y mejor preparada para Core Web Vitals.

Y eso, en diseño web y SEO, no es un detalle técnico. Es una ventaja competitiva.

Recomendaciones SEO para este artículo

Añadir enlazado interno hacia servicios relacionados:

Diseño web WordPress
Diseño web en Sevilla
Mantenimiento web
SEO técnico
WPO WordPress

Añadir imágenes o capturas recomendadas:

Captura de Opciones del tema de Divi 5 → Rendimiento
Captura de WP Rocket → Optimización de archivos
Captura de WP Rocket → Medios
Captura de WP Rocket → Reglas avanzadas
Captura de PageSpeed Insights antes/después

Añadir marcado Schema recomendado:

Article
FAQPage
BreadcrumbList

Texto ALT recomendado para imagen principal:

Configuración óptima de WP Rocket para Divi 5 en WordPress