Cómo optimizar Divi con WP Rocket sin romper la web

Como ya sabrás, utilizo mucho el plugin WP Rocket como herramienta de optimización y caché en la mayoría de las webs a las que optimizo y hago mantenimiento, y como también utilizo mucho el tema Divi para crear webs, y hace tiempo que incorporó opciones de rendimiento, hay algunos ajustes que debes hacer para que esta fantástica combinación de plugin y tema funcionen correctamente, te ofrezcan una web rápida, y sin romper el diseño.

Las opciones de rendimiento de Divi que entran en conflicto con WP Rocket

En la versión 4.10, el tema Divi incorporó en sus opciones una serie de ajustes de mejora de rendimiento que por sí solos funcionan bastante bien, pero que en combinación con WP Rocket pueden generar conflictos, e incluso que partes de la web no funcionen bien.

• La opción de WP Rocket de «Remove Unused CSS» no siempre es compatible con la opción de «CSS crítico» de Divi.
• El ajuste de «CSS dinámico» de Divi no es compatible con «Remove Unused CSS» de WP Rocket.
• No he visto nada en foros, pero en mi experiencia, es conveniente desactivar las opciones de Divi de «Aplazar jQuery y jQuery Migrate»,«Deshabilitar Emojis de WordPress» y «Aplazar scripts de terceros adicionales» y activar sus correspondientes ajustes en WP Rocket.

Esto es a nivel general, pero hay que entrar en detalles…

Divi y retrasar la ejecución de JavaScript

Este ajuste de WP Rocket es uno de los más conflictivos a la hora de implementarlo con el tema Divi, pues hay varias posibilidades de cómo conseguir un rendimiento óptimo de tus páginas al mismo tiempo que no se rompan los efectos dinámicos ni los estilos de Divi.

Si activas en WP Rocket la opción de retrasar la ejecución de JavaScript deberías tener en cuenta estas líneas en la caja de exclusiones, según el tipo de elemento…

Carga de elementos animados

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
.dipi_preloader_wrapper_outer
/Divi/js/scripts.min.js
/Divi/js/custom.unified.js
/js/magnific-popup.js
var DIVI

Permitir elementos fijos al cargar la página

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
.dipi_preloader_wrapper_outer
/Divi/js/scripts.min.js
/Divi/includes/builder/feature/dynamic-assets/assets/js/sticky-elements.js
var DIVI

Reproducir vídeos de fondo al cargar la página

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate.min.js
/Divi/js/custom.unified.js
/js/mediaelement/(.*)
mejs

Evitar tener que hacer doble toque para abrir el menú móvil

Esto es quizás uno de los errores de los que más se me han quejado clientes.

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate.min.js
/Divi/js/scripts.min.js

Si no funcionan las excepciones anteriores prueba con estas…

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate.min.js
/Divi/js/custom.unified.js

Compatibilidad con el módulo del contador numérico

Sin estas excepciones es bastante probable que no se ejecute el contador numérico, que se quede estático.

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
.dipi_preloader_wrapper_outer
/Divi/js/scripts.min.js
/Divi/js/custom.unified.js
/js/magnific-popup.js
var DIVI
/Divi/includes/builder/feature/dynamic-assets/assets/js/easypiechart.js

Ocultar menú fijo mientras carga la página

Si quieres que funcione este ajuste, toca añadir estas excepciones…

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/js/jquery/jquery-migrate.min.js
/Divi/js/scripts.min.js
/Divi/includes/builder/feature/dynamic-assets/assets/js/magnific-popup.js
jqueryParams
firstHeader

Evitar el pantallazo en blanco al cargar el contenido Divi

Para evitar ese pantallazo sin estilos tan molesto, también conocido como FOUC, revisa este tutorial.

CSS crítico de Divi

La opción de CSS crítico de Divi, si está activa puede también provocar el error de FOUC que he comentado antes. Hay 2 posibles soluciones a este problema:

1. Desactivar la opción de CSS crítico de Divi y activar el ajuste de «Remove Unused CSS» de WP Rocket.
2. Dejar activa la opción de CSS crítico de Divi pero añadir en la caja de exclusiones del ajuste de WP Rocket de «Retrasar la ejecución de JavaScript» la siguiente línea:

   elm.style.display

Pruebas multivariables de Divi

Las pruebas multivariable de Divi, o tests A/B como se les suele llamar más habitualmente, son totalmente incompatibles con cualquier sistema de caché, también con la caché de WP Rocket, así que si tienes alguno en marcha y activas la caché de WP Rocket o cualquier otra, simplemente no funcionará.

Si necesitas hacer una prueba multivariable de Divi y quieres tener activo WP Rocket podrás hacerlo, pero debes desactivar su caché en esa página en la que estés haciendo las pruebas.

El módulo de blog de Divi que desaparece

El módulo de blog de Divi no es compatible con la optimización de CSS de WP Rocket de «Load CSS Asynchronously», y tienes 3 maneras de evitarlo:

1. No activar la opción de «Load CSS Asynchronously» de WP Rocket, y activar la opción de «Remove Unused CSS» en su lugar, normalmente mucho más óptima en casi todas las webs.
2. Activar la opción de «Load CSS Asynchronously» en los ajustes globales de WP Rocket, pero desactivarla en la página donde tengas el módulo de blog de Divi.
   
3. La otra posibilidad es dejar activa la carga asíncrona del CSS pero añadir la siguiente excepción:

   /wp-content/themes/Divi/style.css

El módulo de vídeo

Los módulos de vídeo de Divi no son compatibles con la opción de WP Rocket de reemplazar los vídeos de YouTube con una imagen de vista previa, y de hecho este ajuste aparecerá como difuminado, sin posibilidad de activarlo siquiera, si WP Rocket detecta que está activo el tema Divi.

Si tienes que añadir un vídeo de YouTube u otro servicio mejor usa un módulo de código y pega el script del vídeo, de paso podrás configurar a la perfección la reproducción automática de vídeos en Divi, casi imposible de otro modo.

El módulo de deslizador (slider) y la carga diferida (lazy load)

Si utilizas algún módulo de deslizador de Divi y tienes activos los ajustes de lazy load de WP Rocket es bastante habitual que las imágenes se vean descolocadas.

WP Rocket tiene una caja en la que añadir exclusiones al lazy load, pero no podremos hacerlas mediante clases o IDs, pues Divi no tiene filtros para identificar cada módulo, así que las opciones que tienes para poder aplicar la carga diferida de imágenes y vídeo, y al mismo tiempo que no se rompa el diseño de tus carruseles/deslizadores/sliders de Divi, son estas:

1. Añade a la caja de exclusiones del lazy load de WP Rocket el nombre de cada uno de los archivos de imagen que aparezcan en los carruseles (mejor opción).
2. Desactiva completamente el lazy load en las páginas en las que haya un slider/deslizador/carrusel (la peor opción).

¿Hay alguna configuración óptima de Divi?

Aunque no vas a poder librarte de los problemas específicos de algunos módulos de Divi, como hemos visto antes, la configuración de los ajustes de rendimiento de Divi de la siguiente captura, en mi experiencia, he comprobado que no interfieren con ningún plugin de optimizaciones o caché.

• Las opciones desactivadas siempre son mejores en los plugins de optimización.
• Las opciones activadas son ajustes específicos de Divi que mejoran su rendimiento en gran medida.

Partiendo de esta base de configuración de los ajustes de rendimiento de Divi, que funciona de maravilla, ya deberías centrarte en los ajustes del plugin de optimizaciones (WP Rocket en este caso) para evitar fallos específicos.

¡Vaya tela para configurar Divi con WP Rocket! ¿me habré equivocado de tema?

No te has equivocado ni de tema ni de plugin de optimización.

• Divi es una herramienta de diseño web fantástica, gracias a la que miles de profesionales están ayudando a negocios a tener presencia en la red a precios que puedan pagar, y sin tener que renunciar a tener un sitio web espectacular.
• WP Rocket es un plugin de caché y optimización para WordPress sin competencia, con un fantástico equilibrio entre potencia y sencillez.

Ahora bien, precisamente debido a las funcionalidades dinámicas avanzadas de Divi, que ayudan a hacer que las webs destaquen por su brillante aspecto, es necesario configurar al detalle el plugin de optimizaciones si quieres ofrecer la mejor web posible, que sea al mismo tiempo bonita y rápida.

Hay otras posibilidades, por supuesto, como alojar tu web en SiteGround y usar su propio plugin de caché y optimizaciones, y es debido a esta combinación que mis webs de servicios ofrecen tiempos de carga y métricas web imbatibles, y eso con Divi, montones de plugins, scripts, sistemas de reserva, membresía, academia online y de todo lo que puedas imaginar.

Pero hoy no tocaba hablar de «esa otra combinación» Divi + SiteGround, sino de Divi + WP Rocket, y te aseguro que funciona igual de bien, solo que hay que se un poquito más delicado a la hora de configurar todo.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!