Ja has aplicat la minificació de CSS, la compressió Gzip o Brotli i potser la memòria cau del navegador. Si la pàgina continua mostrant una pantalla en blanc abans de pintar el contingut, el següent pas és el CSS crític.
El CSS crític és el conjunt mínim d'estils necessaris per renderitzar el que l'usuari veu primer —la capçalera, el hero, el títol— sense esperar que es descarreguin tots els fitxers CSS del lloc. En aquesta guia repassem què és, quan convé implementar-lo, com fer-ho segons el teu stack i què comprovar per no trencar el disseny ni empitjorar el manteniment.
Què és el CSS crític en un web d'empresa
Quan un navegador carrega una pàgina, els fitxers CSS solen ser render-blocking: el navegador no pinta res fins que els processa. Si el teu tema o CMS carrega 400 KB de CSS a la capçalera, el visitant veu una pantalla en blanc encara que l'HTML ja hagi arribat.
- El CSS crític són els estils imprescindibles per la zona visible sense fer scroll (above the fold).
- S'incrusta a l'HTML dins d'una etiqueta
<style>al<head>. - La resta del CSS es carrega de forma diferida (asíncrona o al final) per no bloquejar la renderització.
- L'objectiu és millorar el First Contentful Paint (FCP) i el Largest Contentful Paint (LCP), dues mètriques clau dels Core Web Vitals.
No substitueix l'optimització d'imatges ni un bon CDN, però complementa aquestes optimitzacions quan el CSS bloqueja la primera pintura.
Senyals que el teu web necessita CSS crític
- PageSpeed Insights o Lighthouse marquen "Eliminate render-blocking resources" en CSS.
- A DevTools → Network, diversos fitxers .css es carreguen abans de la primera pintura.
- El web mostra pantalla en blanc 1–2 segons en mòbil tot i tenir bon hosting.
- Utilitzes WordPress o un CMS amb molts plugins que afegeixen CSS a cada pàgina.
- El teu FCP o LCP superen els llindars recomanats per Google.
- Has minificat el CSS però el bloqueig de renderització persisteix.
Si et reconeixes en dos o més punts, extreure CSS crític sol ser el següent pas lògic després de la minificació.
Com implementar CSS crític segons el teu tipus de web
WordPress i CMS habituals
Plugins com WP Rocket, Autoptimize o Perfmatters generen CSS crític automàticament per URL. Activa l'opció, prova en staging i revisa que menús, formularis i sliders segueixin funcionant. Si una pàgina concreta es trenca, exclou-la de l'optimització en lloc de desactivar tot el mòdul.
Webs a mida amb build modern (Vite, Webpack, Laravel Mix)
Eines com critters, critical o plugins de Vite extreuen el CSS crític durant el build. Configura el pipeline per injectar el resultat a les plantilles de producció i carregar el CSS complet de forma diferida amb media="print" onload="this.media='all'" o rel="preload".
HTML estàtic o hosting compartit
Serveis online com criticalcss.com o la CLI critical de npm permeten generar el CSS crític per URL. Copia el resultat en un <style> al head i carrega el CSS complet de forma asíncrona.
Combinar amb altres optimitzacions
El CSS crític funciona millor juntament amb el lazy loading, fonts web optimitzades i un pressupost de rendiment clar. No intentis extreure CSS crític d'un web amb estils inline massius o CSS-in-JS sense abans avaluar si convé refactoritzar.
Errors freqüents en implementar CSS crític
- Extreure CSS crític una sola vegada i no regenerar-lo després de cada canvi de disseny.
- Incloure massa estils al bloc crític, anul·lant el benefici de mida.
- Oblidar estils de fonts web, provocant canvis bruscos de tipografia (FOIT/FOUT).
- No provar en mòbil: l'above-the-fold canvia segons el viewport.
- Trencar el CSS diferit si el JavaScript que l'activa falla o es bloqueja.
- Ignorar el manteniment: cada plantilla nova necessita el seu propi CSS crític o una estratègia automatitzada.
Checklist ràpid abans de donar per tancada l'optimització
- Mesura FCP i LCP actuals amb PageSpeed Insights o WebPageTest.
- Identifica els fitxers CSS que bloquegen la renderització a DevTools.
- Genera CSS crític per les 3–5 plantilles més visitades (inici, serveis, contacte).
- Incrusta el CSS crític al
<head>i carrega el CSS complet de forma diferida. - Verifica que la minificació segueix activa sobre el CSS diferit.
- Prova menú mòbil, formulari de contacte, cercador i qualsevol interacció clau.
- Mesura de nou i documenta la millora en FCP/LCP.
Conclusió: pinta abans, carrega després
El CSS crític no és màgia: és prioritzar el que el visitant veu primer. En webs corporatives amb molt CSS acumulat, pot retallar segons de pantalla en blanc i millorar la percepció de velocitat sense redissenyar el lloc. Si vols revisar el rendiment del teu web o implementar CSS crític de forma segura, escriu-nos i t'ajudem a prioritzar les optimitzacions amb més impacte.
