Cuándo tiene (o no) sentido precargar hojas de estilo

Cuándo tiene (o no) sentido precargar hojas de estilo

Me encuentro regularmente con hojas de estilo precargadas y mucha desinformación en torno a ellas. Precargar un recurso (generalmente) cambia su prioridad y el momento en que se programa su descarga. Sin embargo, como muchas estrategias de optimización que encuentro a diario, precargar hojas de estilo no tiene mucho sentido la mayor parte del tiempo. En este artículo, exploraré cuándo tiene sentido precargar hojas de estilo y cuándo podría no ser la mejor opción.

La idea de precargar hojas de estilo:

Antes de profundizar en las consideraciones, revisemos brevemente el concepto de precargar hojas de estilo. Las hojas de estilo son render blocking. Esto significa que mientras se descargan las hojas de estilo, el navegador no renderizará la página y todo lo que verá el visitante es una pantalla en blanco. 

Para minimizar el tiempo que lleva descargar una hoja de estilos, los desarrolladores a veces recurren a precargar hojas de estilo. La precarga implica obtener recursos críticos por adelantado, minimizando la latencia asociada con su carga cuando realmente se necesitan. Esto se logra típicamente usando la etiqueta <link> con el atributo rel="preload".

Caso 1: precargar la hoja de estilos justo antes de declararla.

A veces los desarrolladores, en todo su entusiasmo, intentan minimizar el impacto del CSS precargándolo en el HTML justo antes de la declaración real de CSS. Esto se verá algo así:

<link rel="preload" as="style" href="style.css">
<link rel="stylesheet" href="style.css">

¡Ahora bien, esto no tiene sentido en absoluto y, en el mejor de los casos, no ralentizará la página! Un navegador leerá el HTML y comenzará a cargar todos los recursos críticos de la página, principalmente en el orden en que los encuentre. Esto significa que si eliminaras la línea de precarga, el navegador habría encontrado la hoja de estilos de todos modos y habría comenzado a descargarla sin importar qué. ¡Solo agregaste una línea extra, eso es todo! Pero se pone peor. Las hojas de estilo precargadas obtienen una prioridad más baja que las hojas de estilo normales. ¡Así que en la peor de las circunstancias, en realidad ralentizarías tu página!

3 hojas de estilo precargadas

3 hojas de estilo normales

Caso 2: precargar la hoja de estilos con un encabezado link.

Esta idea es interesante. Podemos usar el encabezado de servidor server link para precargar una hoja de estilos. Eso se vería algo así:

La idea aquí es hacer que el navegador ponga en cola la hoja de estilos antes de que comience a analizar el HTML. ¡Esta es una idea bastante buena y me gusta cómo funciona la mente del desarrollador que pensó en esto! Pero desafortunadamente, en la vida real obtendrás muy poco beneficio de esto. Estamos hablando de unos pocos microsegundos. Esos son resultados bastante decepcionantes, pero no te preocupes. ¡Podemos usar este paso para hacer algunas mejoras reales!

Caso 3: 103 early hints para hojas de estilo

¡Esta es la única idea que realmente te dará algunos resultados en Core Web Vitals! Enviar early hints para hojas de estilo mejorará métricas como el First Contentful Paint y el Largest Contentful Paint.

Los encabezados 103 early hint se envían antes de la respuesta HTML real. Eso significa que mientras estás descargando el HTML, el navegador también puede comenzar a descargar hojas de estilo en paralelo.  El mejor escenario es que para cuando el HTML haya terminado de descargarse, las hojas de estilo también podrían haberse descargado. Esto significa que hay cero tiempo de render blocking por parte de esas hojas de estilo. ¡Y esto puede suceder y sucede en redes más lentas! En redes más rápidas el efecto es menos obvio, pero usar 103 early resource hints sigue siendo más rápido en casi todos los casos!

Una respuesta 103 early hint se parece mucho a un encabezado link preload. Para usar 103 early hints necesitarás configurar tu servidor web o tu CDN.  

HTTP/1.1 103 Early Hints
Link: </style.css>; rel=preload; as=style

Algunas CDN como CloudFlare te permitirán activar un 103 early hint simplemente configurando un encabezado link preload (como se describe en la idea 2)

Caso 4: precargar hojas de estilo para lograr CSS asíncrono

Un truco bien conocido para hacer que el CSS sea non-render-blocking es precargar la hoja de estilos y, una vez cargada, agregarla a la página. La idea es simple y se ve así:

<link 
   rel="preload" 
   href="style.css" 
   as="style"

Se basa en el código de precarga normal <link rel="preload" as="style" href="style.css"> y agrega un event listener onload onload="this.onload=null;this.rel='stylesheet'" que cambia el enlace a su forma final <link rel="stylesheet" href="style.css">

Esta es otra idea que simplemente tiene sentido. Si una hoja de estilos no es render blocking, el navegador puede continuar analizando y renderizando la página sin necesidad de detenerse y esperar a la hoja de estilos. Sin embargo, ¡ten cuidado!

• No uses CSS asíncrono en el viewport visible. Esto probablemente causará un Cumulative Layout Shift y eso conducirá a una mala User Experience
• Considera el trade-off. El CSS asíncrono probablemente causará un re-renderizado de diferentes partes de la página. Esto afectará métricas como el Interaction to Next Paint. 

Caso 5: pre-cachear hojas de estilo

En raras ocasiones veo soluciones ingeniosas que intentan precalentar archivos de caché para visitas posteriores. Y aunque aplaudo el entusiasmo con el que se hacen esas soluciones. ¡Por favor, NO hagas esto!

La idea es simple: en la página de inicio podrías, si quisieras, ya pre-cachear los estilos para otra página. Digamos la página del producto. En algún momento después de la carga de la página, precargarías las hojas de estilo para agregarlas a la caché del navegador.

function preloadStylesheet(url) {
    var link = document.createElement('link');
    link.rel = 'preload';
    link.href = url;
    link.as = 'style';
    document.head.appendChild(link);
}

window.addEventListener('load', function () {
    preloadStylesheet('cart.css');
    preloadStylesheet('shop.css');
});

A primera vista, esto no parece tan malo. En cualquier página de producto, cart.css y shop.css ahora están disponibles y ya no serán render blocking. ¡Hay algunas razones para no hacer esto!

1.  Hay mejores formas, por ejemplo speculative prerendering o usando un service worker.
2. ¡Probablemente desperdiciarás recursos y el trade-off no valdrá la pena! Seamos realistas: si precargar recursos fuera fácil, los navegadores serían mejores en ello. 
3. Soluciones como esta son difíciles de mantener y probablemente causarán problemas en algún momento en el futuro
4. Necesitarás precargar todas las hojas de estilo, no solo unas pocas. Debido a que todas las hojas de estilo son render blocking y se descargan en paralelo, solo 1 hoja de estilos puede tener el mismo efecto que múltiples hojas de estilo.