CSS crítico y bloqueo del renderizado
Incluya en línea el CSS crítico de la parte visible inicialmente y posponga los estilos no críticos para eliminar el bloqueo del renderizado.
CSS crítico y bloqueo del renderizado es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Cómo representa el navegador una página
El navegador analiza el HTML para crear un DOM y el CSS para crear un CSSOM, los combina en un árbol de renderizado, ejecuta el layout y, después, pinta. El CSS bloquea el renderizado hasta que el CSSOM está completo; cada byte de CSS que forma parte de la ruta crítica retrasa el primer pintado.
¿Qué es el CSS crítico?
El CSS crítico es el conjunto mínimo de estilos necesarios para representar el contenido visible inicialmente. Incrustarlo en etiquetas <style> dentro de <head> elimina la solicitud de la hoja de estilos que bloquea el renderizado de la vista inicial.
Recursos que bloquean el renderizado
Cualquier <link rel="stylesheet"> en la cabecera bloquea el renderizado. Los scripts sin async/defer también bloquean el análisis del HTML. Reducir los recursos que bloquean el renderizado mejora directamente el Largest Contentful Paint (LCP) y el First Contentful Paint (FCP).
Extracción del CSS crítico
Herramientas como critical (npm), Penthouse y los extractores basados en Puppeteer representan una página en tamaños de ventana gráfica específicos y capturan los estilos que se aplican a los elementos visibles. La salida se incrusta y la hoja de estilos completa se carga de forma asíncrona.
Carga asíncrona del CSS no crítico
Cargue la hoja de estilos completa sin bloquear mediante media="print" con un intercambio en onload, o mediante el patrón rel="preload" + as="style" + onload="this.rel='stylesheet'".
<pre class="snippet"><link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript></pre>Las consultas de medios como indicaciones de carga
Los archivos CSS cargados con una consulta de medios que no coincide, por ejemplo, media="print", se descargan con baja prioridad y no bloquean el renderizado. Este es el truco clásico para cargar hojas de estilos sin bloquear la ruta crítica.
HTTP/2 y división del CSS
Con la multiplexación de HTTP/2, dividir el CSS en muchos archivos pequeños tiene menos sobrecoste que con HTTP/1. Cargue únicamente el CSS necesario para cada ruta —home.css, checkout.css— en lugar de un bundle monolítico que incluya los estilos de todas las páginas.
CSS y el escáner de precarga
El escáner de precarga del navegador detecta pronto las etiquetas <link> de las hojas de estilos y comienza a descargarlas antes de que el analizador HTML llegue a ellas. Asegúrese de que las hojas de estilos estén en <head>, no en body, para que el escáner de precarga las encuentre pronto.
Medición del impacto del bloqueo del renderizado
El panel Network de Chrome DevTools muestra el tiempo de bloqueo de los recursos en el gráfico de cascada. Lighthouse informa de «Eliminar los recursos que bloquean el renderizado» con el ahorro por recurso. WebPageTest muestra renderBlockingResources en su vista de tira de película.
CSS crítico en el servidor
Frameworks como Next.js y Astro incrustan automáticamente el CSS crítico durante el SSR. El servidor identifica qué estilos se aplican al HTML inicial y los incrusta; no se necesita un paso de extracción en el cliente.
Compromisos prácticos
Incrustar demasiado CSS aumenta el tamaño del HTML, ralentiza el TTFB y reduce la eficiencia de la caché (el HTML no se almacena en caché durante tanto tiempo como los archivos CSS). Procure que el CSS crítico incrustado tenga un tamaño de 14KB o menos para que quepa en la primera ventana de congestión TCP.
Comprobación de conocimientos
¿Por qué una hoja de estilos que bloquea el renderizado retrasa el First Contentful Paint?
Resumen
El CSS crítico incrusta los estilos del contenido visible inicialmente para eliminar los retrasos causados por el bloqueo del renderizado. Cargue el CSS restante de forma asíncrona mediante preload o trucos con consultas de medios. Mida el impacto con Lighthouse y DevTools, y procure que la carga útil del CSS crítico sea inferior a 14KB para obtener un rendimiento óptimo.
Preguntas frecuentes
¿La lección «CSS crítico y bloqueo del renderizado» es gratis?
Sí — el texto completo de «CSS crítico y bloqueo del renderizado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «CSS crítico y bloqueo del renderizado»?
Incluya en línea el CSS crítico de la parte visible inicialmente y posponga los estilos no críticos para eliminar el bloqueo del renderizado. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «CSS crítico y bloqueo del renderizado»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- CSS crítico y bloqueo del renderizado
- Layout, paint y composite: el pipeline de renderizado
- will-change y promoción de capas
- Cobertura CSS y estilos no utilizados