DIVI 4 sigue siendo uno de los constructores visuales más potentes y versátiles para WordPress. Sin embargo, muchos sitios creados con DIVI sufren problemas de rendimiento y optimización por desconocer ajustes y técnicas avanzadas que pueden marcar la diferencia.
Hoy te traigo 10 trucos poco conocidos que te ayudarán a acelerar, optimizar y mejorar la experiencia de usuario de tu web hecha con DIVI 4, sin sacrificar diseño ni funcionalidad.
1. Desactivar scripts y estilos no utilizados
DIVI carga por defecto muchos scripts y hojas de estilo que no siempre necesitas. Puedes desactivarlos con un fragmento de código en el archivo functions.php de tu tema hijo:
function divi_remove_scripts() {
wp_dequeue_style('et-builder-modules-style');
wp_dequeue_script('waypoints');
}
add_action('wp_enqueue_scripts', 'divi_remove_scripts', 20);
Dónde aplicarlo: en el functions.php de tu child theme para evitar que se pierda con actualizaciones.
2. Activar el modo de rendimiento de DIVI
Desde la versión 4.10, DIVI incluye un Performance Mode que reduce el CSS y JS cargado.
Ruta: Divi > Opciones del tema > General > Rendimiento.
Activa:
- Dynamic Module Framework
- Dynamic CSS
- Critical CSS
3. Cargar fuentes de Google de forma local
Evita llamadas externas y mejora el tiempo de carga cargando las fuentes localmente.
Ruta: Divi > Opciones del tema > Constructor > Avanzado > Cargar fuentes de Google localmente.
4. Usar imágenes WebP sin plugins pesados
Convierte tus imágenes a WebP antes de subirlas. Puedes usar herramientas como Squoosh o TinyPNG.
En DIVI, asegúrate de que el tamaño de imagen sea el exacto que se muestra para evitar redimensionados innecesarios.
5. Limitar el número de layouts globales
Cada layout global añade consultas a la base de datos. Usa solo los necesarios y evita duplicar secciones globales que no aporten valor.
6. Minificar CSS personalizado directamente en DIVI
En Divi > Opciones del tema > CSS personalizado, pega tu CSS ya minificado. Ejemplo:
.et_pb_button{padding:12px 24px;border-radius:4px}
Esto evita que DIVI tenga que procesar CSS adicional.
7. Desactivar el editor Gutenberg si no lo usas
Si trabajas solo con DIVI, desactiva Gutenberg para reducir scripts cargados:
add_filter('use_block_editor_for_post', '__return_false', 10);
Dónde aplicarlo: en el functions.php de tu child theme para evitar que se pierda con actualizaciones. 8. Precargar recursos críticos
Puedes precargar fuentes o imágenes clave añadiendo en el header.php de tu child theme:
<link rel="preload" href="/wp-content/uploads/2025/01/logo.webp" as="image">
<link rel="preload" href="/wp-content/themes/Divi/core/admin/fonts/modules.ttf" as="font" type="font/ttf" crossorigin>
9. Usar el sistema de caché interno de DIVI
En Divi > Opciones del tema > Constructor > Avanzado, activa:
- Static CSS File Generation
- Product Tour Cache
Esto reduce el tiempo de renderizado de páginas.
10. Optimizar el HTML con limpieza de shortcodes
Cuando desactivas módulos o layouts, DIVI deja shortcodes residuales. Puedes limpiarlos con:
add_filter('the_content', 'remove_empty_shortcodes');
function remove_empty_shortcodes($content){
$content = preg_replace('/\[[^\]]+\]/', '', $content);
return $content;
}
Dónde aplicarlo: en el functions.php de tu child theme para evitar que se pierda con actualizaciones.
Aplicando estos 10 trucos, tu web con DIVI 4 no solo cargará más rápido, sino que también ofrecerá una experiencia de usuario más fluida y optimizada para SEO. Recuerda siempre trabajar con un tema hijo para preservar tus cambios y realizar pruebas de velocidad con herramientas como GTmetrix o PageSpeed Insights después de cada ajuste.