Render Blocking CSS

No bloqueemos el render por el CSS!!!

Introducción

El browser utiliza el DOM (Document Object Model) y el CSSOM (CSS Object Model) para mostrar una página. El DOM es el modelo del HTML que el browser necesita para renderizar la estructura de una página web, mientras que el CSSOM es el mapeo del CSS que el browser necesita para darle estilos a una página.

El CSS bloquea el render

El CSS bloquea el render por lo tanto, necesitamos que este lo mejor posible, ya que queremos tener una experiencia buena para el usuario.

¿Cómo verifico si lo estoy bloqueando?

Lo más fácil es utilizar una herramienta por ejemplo Lighthouse, WebpageTest, etc

Ejemplo con https://developers.google.com/speed/pagespeed/insights/

¿Cómo podemos solucionarlo?

1- No utilizar @import en los CSS

Esto afecta la performance ya que agrega un tiempo extra en ir a buscar el CSS

MAL

@import url("style.css")

BIEN

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

2 - Utilizar los media type

Podemos utilizar la property media de los link para especificar que CSS mostrar

<link href="style.css"    rel="stylesheet">
<link href="style.css"    rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print">

3 - Combinar CSS

Cada CSS en la página da un tiempo adicional, combinar los CSS en un main.css

4 - Critical CSS

Es una técnica para mostrar sólo el CSS del contenido que el usuario ve a primera vista.

Es el más efectivo de todos, ya que permite tener un CSS ligero que no bloquea el render mejorando así la performance y la experiencia al usuario ya que tenemos un primer pintado mucho más rápido.

Término Above the Fold

La expresión “above the fold”' define la parte del sitio web que los usuarios ven primero sin necesidad de desplazarse con el scroll. Si se desplazan hacia abajo, esta parte del sitio web se denomina “below the fold”. El término “fold” proviene de la imprenta y corresponde al pliegue de la página de, por ejemplo, un periódico.

¿Cómo implementarlo?

Existen varias formas de implementar criticalCSS

1) Sitios online https://www.sitelocity.com/critical-path-css-generator

2) Módulos de NPM

• https://www.npmjs.com/package/fg-loadcss

• https://www.npmjs.com/package/critical

¿Si ya poseo un criticalCSS y tengo otros CSS?

1) Cargar los estilos críticos y luego mostrar el resto en el evento "load"

<script>
window.addEventListener('load', () => {
  const element = document.createElement('link');
  element.setAttribute('rel', 'stylesheet');
  element.setAttribute('type', 'text/css');
  element.setAttribute('href', 'path/full.css');
  document.querySelector('head').appendChild(element);
});
</script>

2) Utilizar el preload del link

<link rel="preload" href="path/full.css" as="style" onload="this.rel='stylesheet'">

Podríamos combinar ambos utilizar el preload en caso que soporte el browser sino el otro...

Siempre tener en cuenta el tag <noscript> en caso que no haya javascript activo...

<noscript>
    <link rel="stylesheet" type="text/css" href="path/full.css">
</noscript>