Rimuovere il CSS inutilizzato ha rotto il mio layout: come trovare gli stili mancanti

Attiva «Rimuovi CSS inutilizzato», il report smette di lamentarsi dei byte inutilizzati e sul suo schermo il sito sembra a posto. Poi arrivano le segnalazioni. Il menu mobile si apre come un semplice elenco. Le icone sono diventate quadratini vuoti. Un'intera sezione della home è vuota. La pagina prodotto è rotta, ma solo per i clienti che hanno effettuato l'accesso. Oppure ieri andava tutto bene e durante la notte una pagina si è rotta.

Spegnere l'opzione risolve, e butta via uno dei guadagni più grandi su un tema pesante. Questa guida spiega cosa sfugge davvero allo strumento, come leggere il sintomo e come rimettere solo le regole che mancano.

Cosa fa una passata di CSS utilizzato

Lo strumento carica la pagina in un browser headless, a una sola dimensione di schermo, senza accesso, senza cliccare nulla. Registra quali regole CSS corrispondono a un elemento in quel momento, conserva quelle e scarta il resto. La pagina viene poi servita con quel foglio di stile ridotto al posto dei file completi del tema.

La debolezza è strutturale: l'istantanea è uno stato di una pagina su un dispositivo. Ogni regola che conta solo in un altro stato viene giudicata inutile e rimossa.

I sei punti ciechi, e la loro firma

1. Stati che compaiono dopo un clic. Un menu aperto, una finestra modale, un mini carrello, la seconda scheda di un blocco a schede: la loro classe di apertura viene aggiunta da JavaScript, quindi non era nella pagina durante l'istantanea. Firma: l'elemento si apre senza stile, o non compare affatto. Due casi trattati nel dettaglio: menu e overlay e il mini carrello di WooCommerce.

2. L'altro dispositivo. Le regole dentro una media query mobile corrispondono solo quando il rendering avviene a larghezza mobile. Se il CSS ridotto è stato generato a larghezza desktop e servito ai telefoni, il layout mobile perde le sue regole. Firma: rotto su un solo dispositivo.

3. Contenuti che arrivano dopo o per qualcun altro. Recensioni caricate da un widget, prodotti correlati caricati via AJAX, uno scroll infinito, la barra di amministrazione, un carrello pieno, un avviso per gli utenti connessi. Niente di tutto questo esisteva per il visitatore non connesso dell'istantanea. Firma: a posto per lei in una finestra privata, rotto per un cliente in un certo stato.

4. Font di icone. Un font di icone è dichiarato con @font-face e usato tramite classi. Se nessuna regola conservata usa quella famiglia di font, anche la dichiarazione viene scartata, e ogni icona aggiunta in seguito non ha più nulla con cui disegnarsi. Firma: quadratini vuoti o spazi bianchi al posto delle icone.

5. Animazioni d'ingresso. I page builder spesso nascondono un elemento al caricamento (opacity:0) e lasciano che uno script aggiunga la classe che lo fa comparire con un'animazione. Se la regola dietro quella classe o i suoi @keyframes sono stati rimossi, l'elemento resta invisibile per sempre. Firma: una sezione vuota che compare non appena l'ottimizzazione è spenta.

6. Un rendering andato storto. Durante la generazione, un foglio di stile non è arrivato: un timeout, una richiesta bloccata o un builder che in quel momento stava rigenerando la propria cache CSS. Il risultato sembra quasi giusto, con un componente privo dei suoi stili, e resta in cache fino alla generazione successiva. Firma: rotto solo su alcune pagine, a partire da un momento preciso, e risolto rigenerando.

Passo 1: confermare che la causa è il CSS utilizzato

Carichi la pagina rotta con l'ottimizzazione aggirata (la maggior parte degli strumenti offre un parametro URL o un interruttore per pagina) o spenta, dopo aver svuotato ogni livello di cache. Se la pagina è a posto, la causa è il CSS ridotto. Se è ancora rotta, cerchi altrove: un ritardo di JavaScript produce sintomi molto simili, e la guida sul ritardo di JavaScript tratta quel caso.

Poi riproduca il bug nello stato che lo provoca: la giusta larghezza del dispositivo, l'interazione (aprire il menu, passare sopra il carrello), il giusto stato del visitatore (connesso, carrello pieno), e scorra fino alla zona rotta.

Passo 2: trovare la regola sparita

Apra la versione non ottimizzata in una scheda e quella ottimizzata in un'altra. In entrambe, clic destro sull'elemento rotto, scelga Ispeziona e confronti il pannello Styles. Le regole presenti a sinistra e assenti a destra sono quelle mancanti; il pannello mostra il loro selettore e il file da cui provengono.

Per verificare direttamente un selettore, incolli questo nella console di ciascuna versione:

// Sostituisca con la classe sospetta (lo stato aperto, l'icona, l'animazione).
const needle = '.is-open';
[...document.styleSheets]
  .flatMap(s => { try { return [...s.cssRules]; } catch (e) { return []; } })
  .filter(r => (r.selectorText || r.name || '').includes(needle.replace(/^[.#]/, '')))
  .map(r => r.cssText.slice(0, 120));

Un risultato vuoto sulla pagina ottimizzata e un elenco sull'originale le dicono esattamente quale regola ripristinare. I fogli di stile serviti da un altro dominio possono sfuggire a questa verifica; il pannello Styles li mostra comunque.

Passo 3: rimettere ciò che manca, e solo quello

Adatti la soluzione al punto cieco:

• Stati dopo un clic (1): aggiunga le classi di stato alla safelist, per esempio is-open, active, show, o il prefisso proprio del componente. Quando un componente ha molti stati, tenere tutto il suo foglio di stile fuori dalla riduzione è più affidabile che inseguire ogni selettore.
• Altro dispositivo (2): si assicuri che lo strumento generi per mobile e per desktop, e rigeneri dopo averlo modificato.
• Contenuti tardivi (3): metta in safelist il prefisso del widget, oppure conservi intero il foglio di stile di quel plugin.
• Font di icone (4): metta in safelist le classi delle icone (spesso un prefisso come fa- o et-icon), così con esse viene conservata anche la dichiarazione del font.
• Animazioni (5): metta in safelist le classi di animazione del suo builder, oppure disattivi le animazioni d'ingresso in ciò che si vede senza scorrere, il che aiuta anche il Largest Contentful Paint.
• Generazione difettosa (6): svuoti prima la cache CSS del builder, poi rigeneri il CSS ridotto delle pagine interessate. Rigenerare sopra una cache del builder costruita a metà riproduce lo stesso buco.

Dopo la correzione: provare gli stati, non solo la pagina

• Mobile e desktop, ciascuno con menu, ricerca e carrello aperti.
• Connesso e non connesso, carrello vuoto e carrello pieno.
• Scorra tutta la pagina: è nelle sezioni tardive e nei blocchi animati che si nascondono i buchi.
• Dopo un aggiornamento di tema, builder o plugin, ricontrolli: i nuovi nomi di classe vanno rimessi in safelist.
• E, come sempre, un'ottimizzazione rischiosa alla volta, come nel nostro metodo per ottimizzare senza rompere.

Con Mantys Core

In sintesi

• Una passata di CSS utilizzato conserva ciò che corrispondeva durante un solo rendering: uno stato, una dimensione, senza accesso, senza interazione.
• Sei punti ciechi: stati dopo un clic, l'altro dispositivo, contenuti tardivi, font di icone, animazioni d'ingresso e una generazione andata storta.
• Confermi con l'ottimizzazione aggirata, poi confronti il pannello Styles delle due versioni per individuare la regola mancante.
• Rimetta solo quella regola, tramite safelist o conservando intero un foglio di stile, sui template che ne hanno bisogno.
• Provi gli stati, entrambi i dispositivi ed entrambi i tipi di visitatore, e ricontrolli dopo ogni aggiornamento.