Un informe marca hojas como bloqueantes porque el navegador normalmente espera el CSS antes de pintar. Ese comportamiento evita mostrar una página sin diseño. El objetivo no es hacer asíncrono todo, sino entregar pronto los estilos del primer viewport y posponer lo irrelevante.
Mapear cada hoja con el contenido visible
En una visita fría y desconectada registra URL, peso e iniciador de CSS. Identifica propietario: tema, tema hijo, constructor, formulario, WooCommerce o widget.
Compara plantillas. Una hoja de formulario puede no ser crítica en portada y ser imprescindible en contacto. WooCommerce puede ser necesaria para el mini-carrito global incluso en artículos.
No clasifiques por el nombre. main.css puede mezclar estructura crítica y componentes raros.
Usar Coverage como evidencia
La cobertura de Chrome muestra reglas utilizadas durante una visita. Antes de registrar, abre menú, modal, errores, cabecera fija y consentimiento.
Lo no usado en una traza puede activarse con hover, foco, breakpoint o contenido dinámico. Coverage detecta paquetes grandes con una porción crítica pequeña; no demuestra que el resto pueda borrarse globalmente.
Establecer una referencia visual
Captura móvil y escritorio antes del cambio, incluido el primer viewport mientras carga con limitación. Revisa altura de cabecera, hero, saltos de línea, fallback de fuente, controles y CLS.
Conserva copia reversible de código y ajustes: la entrega CSS puede afectar todas las páginas.
Extraer CSS crítico estable
Incluye solo estructura necesaria para pintar el primer viewport. No copies inline otra hoja completa.
La extracción automática es un inicio, pero clases dinámicas, bloques diferentes y barra de administrador hacen poco fiable un resultado único. Agrupa páginas por diseño real y verifica cada grupo.
No insertes fuentes base64 ni imágenes grandes en el bloque: engordan HTML e impiden caché independiente.
Cargar estilos no críticos con fallback
Una técnica usa preload convertido en stylesheet:
<link
rel="preload"
href="/wp-content/themes/site/non-critical.css"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
>
<noscript>
<link rel="stylesheet" href="/wp-content/themes/site/non-critical.css">
</noscript>Úsala solo si el archivo no es necesario inicialmente. <noscript> mantiene diseño sin JavaScript.
Comprueba Content Security Policy: los eventos inline pueden estar bloqueados. Si un plugin ya aplica entrega asíncrona, no añadas otra capa personalizada.
Preferir eliminar encolados globales incorrectos
Si un plugin de reservas carga CSS en todos los artículos y solo aparece en una página, limitar su enqueue resulta más limpio que diferirlo en todas.
Usa ajustes soportados o un handle verificado. No retires un paquete combinado si otro elemento visible depende de él; dividirlo en origen puede ser más seguro.
Tratar con cuidado el CSS generado por constructores
Elementor y otros constructores pueden crear hojas por página, estilos globales y fragmentos inline. Una página recién editada puede solicitar otra versión o regenerarla en la primera visita. Antes de diferirla, identifica si contiene el diseño principal, widgets inferiores o ambos.
No modifiques directamente un archivo con nombre generado. Cambia el ajuste o plantilla de origen y usa la función de regeneración soportada. Conserva la relación entre la página y su hoja para no servir CSS de una versión anterior desde CDN.
Compara visitante desconectado, editor y página de staging. La barra de administración puede añadir estilos que no deben formar parte del CSS crítico público. Si el constructor genera una hoja diferente por idioma, valida español, catalán e inglés de forma independiente.
Evitar CSS crítico obsoleto
El bloque inline debe actualizarse cuando cambia cabecera, hero, tipografía o consentimiento. Si permanece antiguo, puede pintar primero un diseño y corregirlo al llegar la hoja completa.
Registra qué plantillas comparten cada bloque, cuándo se generó y cómo se invalida. Después de un despliegue, inspecciona el HTML real y confirma que no conviven dos versiones de CSS crítico creadas por plugins diferentes.
Verificar todo el recorrido
Limpia caché de activos y página y repite pruebas frías observando el pintado. Una puntuación mayor con destello, menú temporalmente inútil o checkout sin estilo es una regresión.
Prueba menú móvil, errores de formulario, foco de teclado, consentimiento y avisos WooCommerce. Confirma que cada archivo diferido carga una vez, responde correctamente y queda cacheado en navegación posterior.
Revisa también páginas sin JavaScript y conexiones lentas: el fallback no debe quedar incompleto.
Solicita evaluación si el constructor regenera estilos, el CSS crítico cambia en cada plantilla o aparecen destellos intermitentes. Una URL pública basta para revisar inicialmente; el acceso seguro se acuerda después de definir alcance.