El exceso de código CSS acumulado en las hojas de estilo de un tema o constructor visual como Divi ralentiza de forma notable la velocidad de carga de un sitio web. Cuando Google PageSpeed Insights penaliza una página por recursos que bloquean el renderizado, reducir el CSS no utilizado se convierte en una prioridad técnica indispensable para mejorar los Core Web Vitals.
1. El impacto del CSS innecesario en Divi y WordPress
Por defecto, los constructores visuales robustos cargan bibliotecas de estilos generales para garantizar que cualquier módulo o animación esté disponible en el sitio. Sin embargo, si una página específica solo utiliza textos e imágenes simples, la mayor parte de esas reglas de diseño consumen ancho de banda de forma innecesaria.
Eliminar o aplazar este volumen de código muerto disminuye drásticamente el tiempo de interacción y optimiza la puntuación de rendimiento global.
2. Pasos para auditar y eliminar el CSS no utilizado
El primer paso antes de aplicar cualquier optimización es identificar qué porcentaje de código se está cargando sin ser ejecutado en el navegador.
Diagnóstico inicial con Google Chrome DevTools
-
Abre tu sitio web en el navegador Google Chrome y pulsa
F12(o haz clic derecho y selecciona Inspeccionar). -
Abre el menú de comandos rápidos presionando
Ctrl + Shift + P(Windows) oCmd + Shift + P(Mac). -
Escribe
Show Coveragey pulsa Enter para activar la pestaña de cobertura en la parte inferior. -
Recarga la página (
F5). El panel te mostrará una lista de archivos CSS indicando el porcentaje exacto de código utilizado (en verde) frente al no utilizado (en rojo).
3. Optimización mediante plugins de caché y WPO
Herramientas avanzadas de optimización de rendimiento permiten purgar y combinar las hojas de estilo automáticamente.
Configuración en WP-Optimize o LiteSpeed Cache
-
Dirígete al panel de administración de WordPress y entra en los ajustes de tu plugin de WPO.
-
Localiza la sección de optimización de activos o minificación de código.
-
Activa la opción Combinar archivos CSS y selecciona Generar CSS crítico si está disponible.
-
Excluye de esta optimización las librerías críticas de Divi para evitar alteraciones visuales repentinas durante el proceso de renderizado (Flash of Unstyled Content).
PHP
// Ejemplo: Desactivar estilos dinámicos innecesarios de Divi en páginas de archivo mediante functions.php
function deshabilitar_estilos_divi_archivo() {
if ( is_archive() ) {
wp_dequeue_style( 'et-builder-modules-style' );
}
}
add_action( 'wp_enqueue_scripts', 'deshabilitar_estilos_divi_archivo', 99 );
Explicación: Este snippet verifica si el usuario se encuentra visitando una página de archivo y remueve condicionalmente el archivo de estilos masivo de los módulos de Divi para reducir el peso de transferencia en secciones secundarias.
4. Limpieza manual y carga condicional de estilos
Si deseas un control absoluto sobre el código que interpreta WordPress, puedes registrar y cargar estilos exclusivamente en las páginas que los necesitan.
Pasos para restringir archivos en el archivo functions.php
-
Identifica el handle o nombre clave del script o estilo que deseas restringir (por ejemplo,
mi-plugin-estilos). -
Utiliza una condición basada en ID de página o tipo de contenido:
PHP
function cargar_estilos_condicionalmente() {
if ( ! is_page( 'contacto' ) ) {
wp_dequeue_style( 'mi-plugin-estilos' );
wp_deregister_style( 'mi-plugin-estilos' );
}
}
add_action( 'wp_enqueue_scripts', 'cargar_estilos_condicionalmente', 100 );
Explicación: Esta función asegura que el archivo CSS personalizado de un plugin solo se cargue en la página titulada «contacto», liberando recursos en el resto del sitio web.
Conclusión
Reducir el archivo CSS no utilizado en WordPress y Divi transforma radicalmente la velocidad de respuesta de tu sitio, mejorando la experiencia del usuario y elevando tus métricas en PageSpeed Insights. Aplica estas optimizaciones de forma controlada y verifica siempre el diseño visual tras cada cambio.
