Un informe marca fulls com a bloquejants perquè el navegador normalment espera el CSS abans de pintar. Aquell comportament evita mostrar una pàgina sense disseny. L’objectiu no és fer asíncron tot, sinó lliurar aviat els estils del primer viewport i posposar allò irrellevant.
Mapar cada full amb el contingut visible
En una visita freda i desconnectada registra URL, pes i iniciador de CSS. Identifica’n el propietari: tema, tema fill, constructor, formulari, WooCommerce o giny.
Compara plantilles. Un full de formulari pot no ser crític a la portada i ser imprescindible a contacte. WooCommerce pot ser necessari per al minicistell global fins i tot en articles.
No classifiquis pel nom. main.css pot barrejar estructura crítica i components rars.
Utilitzar Coverage com a prova
La cobertura de Chrome mostra regles utilitzades durant una visita. Abans de registrar, obre menú, modal, errors, capçalera fixa i consentiment.
Allò no utilitzat en una traça es pot activar amb hover, focus, breakpoint o contingut dinàmic. Coverage detecta paquets grans amb una porció crítica petita; no demostra que la resta es pugui eliminar globalment.
Establir una referència visual
Captura mòbil i escriptori abans del canvi, inclòs el primer viewport mentre carrega amb limitació. Revisa alçada de capçalera, hero, salts de línia, fallback de font, controls i CLS.
Conserva còpia reversible de codi i ajustos: el lliurament CSS pot afectar totes les pàgines.
Extreure CSS crític estable
Inclou només l’estructura necessària per pintar el primer viewport. No copiïs inline un altre full complet.
L’extracció automàtica és un inici, però classes dinàmiques, blocs diferents i barra d’administrador fan poc fiable un resultat únic. Agrupa pàgines per disseny real i verifica cada grup.
No insereixis fonts base64 ni imatges grans al bloc: engreixen HTML i impedeixen memòria cau independent.
Carregar estils no crítics amb fallback
Una tècnica utilitza preload convertit en stylesheet:
<link
rel="preload"
href="/wp-content/themes/site/non-critical.css"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
>
<noscript>
<link rel="stylesheet" href="/wp-content/themes/site/non-critical.css">
</noscript>Utilitza-la només si el fitxer no és necessari inicialment. <noscript> manté el disseny sense JavaScript.
Comprova Content Security Policy: els esdeveniments inline poden estar bloquejats. Si un connector ja aplica lliurament asíncron, no afegeixis una altra capa personalitzada.
Preferir eliminar encuats globals incorrectes
Si un connector de reserves carrega CSS a tots els articles i només apareix en una pàgina, limitar-ne l’enqueue resulta més net que diferir-lo a tot arreu.
Utilitza ajustos admesos o un handle verificat. No retiris un paquet combinat si un altre element visible en depèn; dividir-lo en origen pot ser més segur.
Tractar amb cura el CSS generat pels constructors
Elementor i altres constructors poden crear fulls per pàgina, estils globals i fragments inline. Una pàgina acabada d’editar pot sol·licitar una altra versió o regenerar-la a la primera visita. Abans de diferir-la, identifica si conté el disseny principal, ginys inferiors o tots dos.
No modifiquis directament un fitxer amb nom generat. Canvia l’ajust o plantilla d’origen i utilitza la funció de regeneració admesa. Conserva la relació entre la pàgina i el full per no servir CSS d’una versió anterior des de CDN.
Compara visitant desconnectat, editor i pàgina de staging. La barra d’administració pot afegir estils que no han de formar part del CSS crític públic. Si el constructor genera un full diferent per idioma, valida català, castellà i anglès de manera independent.
Evitar CSS crític obsolet
El bloc inline s’ha d’actualitzar quan canvia capçalera, hero, tipografia o consentiment. Si roman antic, pot pintar primer un disseny i corregir-lo quan arriba el full complet.
Registra quines plantilles comparteixen cada bloc, quan es va generar i com s’invalida. Després d’un desplegament, inspecciona l’HTML real i confirma que no conviuen dues versions de CSS crític creades per connectors diferents.
Verificar tot el recorregut
Neteja memòria cau d’actius i pàgina i repeteix proves fredes observant el pintat. Una puntuació més alta amb flaix, menú temporalment inútil o compra sense estil és una regressió.
Prova menú mòbil, errors de formulari, focus de teclat, consentiment i avisos WooCommerce. Confirma que cada fitxer diferit carrega una vegada, respon correctament i queda en memòria cau en navegació posterior.
Revisa també pàgines sense JavaScript i connexions lentes: el fallback no ha de quedar incomplet.
Demana una avaluació si el constructor regenera estils, el CSS crític canvia a cada plantilla o apareixen flaixos intermitents. Una URL pública basta per revisar inicialment; l’accés segur s’acorda després de definir l’abast.