Decide si critical CSS es el problema correcto a resolver
Comienza con evidencia, no con una etiqueta de auditoría. Registra una carga con caché frío para una página prioritaria en perfiles representativos de móvil y escritorio. Inspecciona la waterfall y el trace: ¿una hoja de estilo está retrasando el primer contenido y es lo bastante grande como para importar? DevTools Coverage muestra CSS usado en una sesión, no en todas las rutas o estados.
Prueba trabajos de menor mantenimiento primero: elimina reglas no usadas, minifica y comprime la salida, carga CSS por ruta solo donde se necesite y evita cadenas @import de CSS. web.dev llama a la extracción y la deferral técnicas avanzadas.
Una demora medida en el primer render está ligada al CSS, una visita en frío importa y el layout inicial puede mantenerse.
Si la latencia del servidor, imágenes, fuentes, JavaScript o una hoja de estilo ya pequeña son el cuello de botella, incrustar CSS probablemente no ayudará.
Define la vista inicial como una matriz de pruebas
La vista inicial, a veces llamada above the fold, es lo que un visitante ve antes de desplazarse. No tiene una altura universal: dispositivos, zoom, idioma, cookies y variantes de contenido la alteran. Una captura de escritorio puede pasar por alto un teléfono o un titular traducido.
Usa perfiles nombrados. Incluye layouts estrechos y anchos, puntos de ruptura clave, estructuras de login distintas y cualquier banner de consentimiento, promoción, mensaje de mantenimiento o error de validación que pueda aparecer en la parte superior de la página.
Registra plantilla, viewport, locale, autenticación, consentimiento y variantes de la parte superior de la página usados para generar y probar el conjunto.
Prueba desplazamiento rápido, menús y foco de formulario; una regla diferida es insegura si su control puede aparecer antes de que todo el CSS se aplique.
Extrae un conjunto pequeño desde una única fuente de verdad
Genera critical CSS desde el build de producción. La extracción puede identificar reglas usadas en un viewport, pero revisa reglas condicionales, dinámicas y de transición. No copies manualmente un segundo design system en plantillas; divergerá conforme los componentes y el marcado evolucionen.
Mantén la salida generada y versionada con la release, mientras el CSS fuente permanece como autoritativo. Incrusta solo las reglas requeridas para el estado inicial utilizable. Bloques grandes inline retrasan el HTML y no pueden reutilizarse desde la caché externa en páginas posteriores. Compara navegación fría y cálida antes de considerar la mejora como un éxito.
Controla bytes inline comprimidos, bytes restantes de la hoja de estilos y reglas duplicadas. Una solicitud bloqueante menos no es necesariamente una ganancia neta.
Marca un build cuando la extracción está vacía, excede el presupuesto de tamaño inline o cambia inesperadamente desde una línea base revisada.
Carga el CSS restante de forma segura y respeta las restricciones de política
La hoja de estilo restante debe llegar antes de que el contenido inferior y los estados posteriores parezcan completos. Un patrón documentado hace preload del CSS como style y lo convierte en stylesheet después de cargar, con un fallback sin JavaScript. Preload solicita un recurso temprano; no aplica el CSS. Un conjunto incompleto puede restilar visiblemente.
Comprueba Content Security Policy antes de usar un manejador inline onload. web.dev señala que la política puede prohibir inline JavaScript onload, así que usa un loader compatible u otro diseño. Prueba con JavaScript deshabilitado. Los archivos calificados por media ayudan para estilos condicionales genuinos como print; una query que no coincida no bloquea renderizado, aunque aún puede descargarse.
Verifica que un visitante sin JavaScript reciba el CSS completo y pueda completar el recorrido prioritario.
Investiga por separado una fuente o imagen crítica de la vista inicial que llegue tarde; critical CSS no cambia su comportamiento de fetch.
Prueba regresiones visuales, funcionales y de caché
Usa comparación visual en cada viewport nombrado y estado de la parte superior de la página. Revisa texto sin estilo, solapamientos, navegación oculta, indicadores de foco faltantes, layout shift y un salto cuando el CSS diferido se aplica. Ejercita navegación con teclado, rutas táctiles, errores y desplazamiento rápido. Si una regla diferida hace que un control sea inutilizable, pertenece al path crítico o el diseño debe cambiar.
Prueba visitas en frío y en caliente. Las pruebas en frío muestran si eliminar la espera de CSS mejora el renderizado; las pruebas en caliente muestran el coste repetido de bytes inline. Prueba HTML previo cacheado y un retorno después del despliegue. Mantén activos los assets compatibles mientras el HTML cacheado pueda solicitarlos, y no sobreescribas una URL de hoja de estilos con fingerprint.
Compara first content y el contenido visible principal, luego usa el trace para explicar una ganancia o regresión.
Incluye foco, contraste, preferencias de movimiento, zoom y orden legible. Un renderizado más rápido no es aprobado si la interfaz es inaccesible.
Operalo como una característica de entrega reversible
Asigna un propietario a la pipeline y documenta sus entradas, artefacto, plantillas, perfiles de prueba y límite de tamaño inline. Ejecuta pruebas cada vez que cambie CSS, marcado, una librería de componentes, un feature flag o un tercero above-the-fold. Coverage guía la revisión, pero una grabación no puede probar que una regla sea segura en todas partes.
Lanza detrás de una configuración reversible cuando sea práctico. Registra la ruta de hoja de estilos conocida-buena, versión del artefacto, identificador del build y método de recuperación. Si aparece una regresión, restaura primero la entrega compatible y después diagnostica el estado omitido. SIU usa este flujo para estabilizar caminos críticos antes de que el impacto al cliente se extienda.
Un nuevo banner, flujo de consentimiento, locale, breakpoint o layout de cuenta requiere regeneración y pruebas.
Revierte plantilla y configuración de entrega a una generación compatible; no edites URLs de assets inmutables que documentos más antiguos puedan referenciar.