A diferencia del código Javascript, que tiene atributos que permiten cargarlo de forma asíncrona, en CSS no existía nada parecido hasta la fecha. Ahora, con un pequeño truco, vamos a solventar este inconveniente. Para cargar CSS, de manera asíncrona y sin demorar el render de la página, utilizaremos el atributo onload. Aquí os dejo cómo tendríais que enlazar el archivo CSS:
<link rel="stylesheet" href="/mi_css.css" media="print" onload="this.media='all'">Actualización y contexto
Contenido revisado el 24 de agosto de 2026.
Diferir una hoja de estilos puede mejorar el inicio de una página, pero no todo el CSS debe cargarse de forma asíncrona. Los estilos necesarios para la primera pantalla, la estructura y la legibilidad deben estar disponibles durante el renderizado inicial.
Qué puede diferirse
Las hojas de impresión pueden declarar media="print". También es posible cargar estilos destinados a componentes que aparecen mucho más abajo o que solo se activan bajo una condición concreta. El elemento <link> admite consultas en el atributo media, tal como recoge la referencia de MDN.
Riesgos que hay que medir
- Destello de contenido sin estilos mientras llega la hoja.
- Cambios de tamaño o posición que empeoran CLS.
- Contenido oculto o inoperable cuando JavaScript falla.
- Duplicación de descargas por combinar técnicas sin comprobar la caché.
Antes de aplicar el patrón, separa de verdad el CSS crítico del secundario y mide varias cargas frías. En aplicaciones modernas, la división por ruta y componente del propio sistema de compilación suele ser más predecible que un truco global aplicado a todas las hojas.
0 comentarios
Todavía no hay comentarios.
Deja un comentario