Da estilo a la primera pantalla cuanto antes
El CSS crítico es el conjunto de reglas necesario para dar estilo a la ventana visible inicial de una página concreta. Entregar esas reglas pronto puede permitir que la primera pantalla se renderice mientras se carga el resto de la hoja de estilos.
Incluir el CSS en línea tiene un coste: las reglas añaden peso al HTML y pueden duplicar una hoja de estilos que se descarga por separado. Compensa cuando elimina un retraso real del renderizado, no cuando se limita a mover todas las reglas al documento.
Localiza las reglas que necesita la ventana visible
Inspecciona la primera pantalla en anchos representativos de escritorio y móvil. Identifica su cabecera, navegación, título principal, imagen y controles, y comprueba qué reglas de maquetación, tipografía y componentes necesitan.
Una ficha de producto y un listado de categoría pueden necesitar reglas distintas. Los menús ocultos, los puntos de ruptura (breakpoints) y los fallbacks de fuentes pueden crear dependencias que una captura de escritorio no muestra.
Prueba los estilos extraídos
Mantén disponible la hoja de estilos completa para el resto de la página. En un navegador de pruebas, retrásala a propósito e inspecciona la pantalla inicial en busca de elementos sin estilo, reglas de maquetación ausentes y controles ilegibles. Comprueba el respaldo si falla algún mecanismo de carga basado en JavaScript.
Compara las visitas en frío con las repetidas. Mejorar la primera visita puede compensarse con CSS duplicado o con la pérdida de los beneficios de la caché. Usa la cascada de peticiones y la traza de renderizado para ver si el cambio elimina el retraso original.
Mantenlo sincronizado con el diseño
Vuelve a comprobar la extracción después de cambiar una fuente, un componente o un punto de ruptura. Un CSS crítico desactualizado puede provocar un parpadeo de estilos incorrectos o un desplazamiento cuando llega la hoja de estilos completa.
No existe un presupuesto universal de bytes que haga correcta una extracción. El resultado útil es una primera pantalla que se renderiza pronto, es estable y deja el resto de los estilos cargados de forma fiable.