Extractor de CSS crítico: estilos above the fold en línea | We.Inc
Pega tu HTML y CSS, elige un tamaño de pantalla y conserva solo las reglas que dan estilo a lo que se ve antes de hacer scroll. Copia un bloque style en línea y el patrón preload.
Extractor de CSS crítico
El CSS crítico es el pequeño conjunto de reglas necesario para dibujar lo que un visitante ve antes de hacer scroll. Pega aquí el HTML y la hoja de estilos de una página, elige un tamaño de pantalla, y esta herramienta maqueta la página en un marco fijo, conserva las reglas que coinciden con elementos visibles y te da un bloque style en línea más un enlace a la hoja de estilos diferida.
Qué conserva el extractor
Tipo de regla
Se conserva cuando
Por qué
Regla de estilo
Su selector coincide con un elemento cuyo borde superior está dentro de la altura elegida
Ese elemento se pinta en la primera vista
html, body, :root, *
Siempre
Las fuentes base, los colores y las custom properties afectan a todo lo visible
Bloque @media
Se conserva solo con sus reglas internas que coinciden
Los demás tamaños de pantalla siguen recibiendo el primer pintado correcto
@font-face
Siempre (se puede desactivar)
El texto visible necesita su fuente declarada
@keyframes
Una regla conservada usa su nombre
Las animaciones de los elementos visibles siguen funcionando
Los navegadores esperan a cada hoja de estilos del head antes de dibujar nada. Poner en línea las pocas reglas que necesita la primera pantalla y luego cargar el archivo completo sin bloquear hace que la página aparezca antes. Esta herramienta hace esa selección por ti a partir del código que pegas. Funciona en tu navegador y nunca descarga una URL, así que pega el HTML y el CSS finales de la página en lugar de un enlace.
Pega el HTML de la página (basta con el contenido del body) y el CSS de su hoja de estilos.
Elige un tamaño de pantalla predefinido o escribe un ancho y una altura de pliegue en píxeles.
La herramienta renderiza tu HTML en un marco aislado a ese tamaño con los scripts desactivados y luego compara cada selector con los elementos en pantalla.
Copia el bloque style en línea para el head y el enlace preload que carga después la hoja de estilos completa. Las estadísticas muestran cuántas reglas se conservaron y el tamaño del resultado.
Ejecútalo con un tamaño de móvil y otro de escritorio y combina los dos resultados, porque el pliegue queda en un sitio distinto en cada uno.
Los estados interactivos como :hover y :focus se comparan con el propio elemento, así que un botón visible conserva su regla hover. Quítalas a mano si quieres el resultado más pequeño.
El contenido que JavaScript añade después de cargar no está en el HTML pegado, así que sus estilos no se detectan. Pega el HTML tal como queda una vez renderizado si tu página se construye en el navegador.
Mantén pequeño el bloque en línea. web.dev sugiere que el contenido above the fold no supere unos 14 KB comprimidos para que llegue en los primeros viajes de ida y vuelta.
Vuelve a ejecutar la extracción cada vez que cambie la parte superior de la página. Un CSS crítico desactualizado provoca un destello de contenido sin estilo en la primera carga.
Preguntas frecuentes
¿Es lo mismo que los paquetes Critical o Penthouse?
Sigue la misma idea de forma más sencilla. Esas herramientas de línea de comandos controlan un navegador headless real sobre tus páginas compiladas. Esta página usa tu propio navegador y el código que pegas, así que trata el resultado como una aproximación cercana y prueba la página después.
¿Por qué el enlace preload necesita onload?
rel=preload con as=style descarga la hoja de estilos sin aplicarla. El manejador onload cambia rel a stylesheet cuando llega el archivo, lo que la aplica sin bloquear el primer pintado. La copia en noscript cubre a los visitantes con los scripts desactivados.
¿Poner el CSS en línea perjudica la caché?
Las reglas en línea se reenvían con cada página HTML, y por eso el bloque debe ser pequeño. La hoja de estilos completa sigue siendo un archivo aparte, así que se guarda en caché como siempre tras la primera visita.
¿Puede leer mi sitio en vivo?
No. Una página estática en tu navegador no puede cargar el código de otro sitio, así que no se descarga nada. Abre tu página, mira su código fuente y su hoja de estilos, y pega ambos. Nada de lo que pegas se sube.
¿Y si mi CSS usa un framework como Tailwind?
Pega el archivo CSS compilado que genera tu build, no el código fuente con líneas @tailwind o @import. El extractor trabaja con reglas finales, y las clases de utilidad de tu HTML se comparan como cualquier otro selector.
Dónde está realmente el pliegue
No hay un único pliegue. Un móvil en vertical puede mostrar 650 píxeles de altura, mientras que un portátil muestra 800 y un monitor grande muestra más. Elige los tamaños que más usan tus visitantes y deja un margen bajo la línea, porque la gente suele empezar a hacer scroll de inmediato.
El extractor considera visible un elemento cuando su borde superior queda por encima de la altura elegida. Un hero alto que empieza en pantalla y termina por debajo se conserva, que es lo que quieres.
Poner el resultado en tu página
Coloca el bloque style en línea en el head, antes de cualquier otra cosa que se renderice. Sustituye tu enlace normal a la hoja de estilos por el patrón preload para que el resto del CSS cargue sin retrasar el primer pintado.
Comprueba el resultado con la red limitada en las herramientas de desarrollo de tu navegador. Si algo salta o cambia de estilo cuando llega el archivo completo, faltó una regla de un elemento visible; añádela al bloque en línea.
El patrón de carga que escribe la herramienta
Reglas críticas en línea y luego el resto sin bloquear
Este es el patrón que describe web.dev. El bloque style contiene las reglas extraídas; el enlace preload descarga el archivo completo y lo aplica al cargar, y la línea noscript es la alternativa.
Límites conocidos de un extractor en el navegador
Qué revisar a mano
Situación
Qué pasa
Qué hacer
Estilos añadidos por scripts
No se ven, los scripts no se ejecutan en el marco
Pega el HTML renderizado en lugar de la plantilla
Imágenes sin width y height
Pueden quedarse con altura cero y subir el contenido posterior
Añade los atributos width y height a las imágenes
Fuentes web
No se descargan, así que el texto puede partirse de otra forma
Deja un margen bajo tu altura de pliegue
Selectores que el navegador rechaza
El navegador los descarta antes de comprobarlos
Corrige la sintaxis; las estadísticas indican cuántas reglas se leyeron
Páginas muy largas
Solo se conserva la primera pantalla, como se pretende
Ejecútalo de nuevo con cada tamaño de pantalla que te importe
Extraer CSS crítico
La herramienta carga con una página de ejemplo de una panadería para que veas el resultado antes de pegar tu propio código.
HTML de la página
CSS de la hoja de estilos
Tamaño de pantalla
Tablet 820 x 1000
Portátil 1366 x 768
Escritorio 1920 x 1000
Ancho (px)
Altura del pliegue (px)
Conservar siempre las reglas @font-face
Tu página al tamaño elegido, sin scripts
La línea discontinua marca el pliegue.
Se leyeron {read} reglas y se conservaron {kept}. El CSS crítico ocupa {bytes} bytes antes de comprimir.
Maquetando la página...
Ninguna regla coincidió. Comprueba que el HTML y el CSS son de la misma página.