⚡ Critical CSS desde Cero usando PLAYWRIGHT 🎭 y NODE.JS ¡MEJORA el rendimiento de tu WEB fácilmente!
233Playwright es la alternativa a Puppeteer y te permite automatizar el uso de navegadores Chromium, Webkit o Firefox. Usando Node.js y Playwright, puedes conseguir el Critical CSS de una página web muy fácilmente.
En este vídeo creamos un script que extrae y minifica el Critical CSS de una web.
▶ No te pierdas más directos en: https://www.twitch.tv/midudev
El Critical Path de una web, o en castellano, la ruta crítica es la secuencia mínima que una página tiene que seguir para poder hacer su primer pintado. ¿Y por qué es importante? Porque según la longitud de ese camino crítico, el usuario verá más tarde la página web.
Por eso, a la hora de hacer optimizaciones a la performance de nuestro site, uno de los objetivos principales será minimizar al máximo el número de recursos o solicitudes que tenemos que hacer para poder realizar el primer renderizado de nuestra página.
No en vano Lighthouse, la referencia de Google para tomar métricas de performance sobre la experiencia del usuario, tiene muy presente esto y una de sus comprobaciones es, precisamente, averiguar los pasos necesarios para renderizar la página del usuario. En el informe genera un diagrama como este:
Initial navigation
|---es/ (fotocasa.es)
|---css/styles.css (cdn.fotocasa.es) - 1147.25ms, 70.77KB
|---css/more-styles.css (cdn.fotocasa.es) - 1155.12ms, 71.20KB
|---2.2.0/jquery.min.js (ajax.googleapis.com) - 2699.55ms, 99.92KB
|---images/logo.jpg (cdn.fotocasa.es) - 3200.39ms, 73.59KB
¿Por qué el CSS bloquea el renderizado de nuestra página?
Como véis, el CSS es un recurso que bloquea el renderizado de nuestra página. Del propio HTML lo podríamos esperar ya que, sin él, no podríamos tener el DOM montado pero… ¿del CSS?
La explicación es que una página no puede ser renderizada si no ha construido el árbol de renderizado. Y el árbol de renderizado está compuesto por HTML y el CSSOM (una especie de DOM para CSS). Imaginad que no lo hiciese. No sólo veríamos siempre nuestras páginas sin estilos para, de repente, aparecer bien pintada, si no que podría incurrir en problemas en nuestro Javascript ya que los cálculos de dónde se encuentran nuestros elementos y cuanto ocupan podrían no ser correctos.
Por ello, el navegador por defecto descarga los recursos CSS de forma síncrona y bloqueando el renderizado de nuestras páginas pero, nosotros, podríamos forzar a que se cargase de forma asíncrona. Al hacerlo, incurriríamos en el problema de mostrar nuestra página sin estilar y, de repente, mostrarla con los estilos y os puedo asegurar que el efecto es bastante incómodo para el usuario.
Una de las formas de solucionar esto meter los estílos críticos de tu página en línea, dentro de unas etiquetas style. Los estilos críticos serían los que el usuario ve nada más entrar en tu sitio y deberían ser mucho menos que los que realmente estás cargando para poder mostrarle la página al usuario. Chrome tiene una herramienta llamada Code Coverage que puede ayudarte a visualizar cuanto CSS estás cargando respecto al que realmente necesita el usuario para renderizar la parte crítica.
El problema de extraer el CSS crítico de nuestra página son varios:
1. Es complicado hacer esto manualmente…
2. y es más complicado hacerlo para las diferentes rutas de nuestra página que necesitan un CSS distinto.
Pero con lo que enseñamos en este vídeo vas a conseguir hacerlo.