# Render Blocking 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](https://developers.google.com/web/tools/lighthouse/?hl=es), [WebpageTest](https://www.webpagetest.org/), etc
Ejemplo con
## ¿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***
```css
@import url("style.css")
```
***BIEN***
```markup
```
### 2 - Utilizar los media type
Podemos utilizar la property media de los link para especificar que CSS mostrar
```markup
```
### 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
2\) Módulos de NPM
*
*
#### ¿Si ya poseo un criticalCSS y tengo otros CSS?
1\) Cargar los estilos críticos y luego mostrar el resto en el evento *"**load**"*
```javascript
```
2\) Utilizar el [preload](https://developers.google.com/web/fundamentals/performance/resource-prioritization?hl=es-419) del link
```markup
```
**Podríamos combinar ambos utilizar el preload en caso que soporte el browser sino el otro...**
**Siempre tener en cuenta el tag \