Inline CSS Vs. fogli di stile esterni

Per inline CSS si intende l'inserimento diretto delle regole di stile nelle pagine HTML, all'interno dei tag style posizionati a loro volta tra i tag head, senza l'ausilio di uno style sheet esterno. L'utilizzo di questa tecnica potrebbe presentare dei vantaggi rilevanti per l'ottimizzazione, perché riduce il numero di file che dovranno essere caricati; si tratta però di una soluzione talmente valida da sconsigliare l'uso dei CSS esterni?

Quando si fa ricorso ad un file CSS esterno, il browser utilizzato carica innanzitutto la pagina Web e solo successivamente lo style sheet. Con l'inline CSS è richiesto invece il solo caricamento del documento HTML, ciò si traduce in minori latenze e minimizza i ritardi derivanti dal rendering dei blocchi CSS.

Dal punto di vista degli aspetti negativi correlati all'inline CSS abbiamo però del codice generalmente meno leggibile, un'architettura meno predisposta alle modifiche simultanee su più pagine (salvo il caricamento dinamico delle regole di stile da sorgente di dati che comunque presenta incognite di carattere differente) e l'impossibilità di effettuare il caching di un unico file CSS da parte del browser.

Un file CSS esterno viene caricato in cache e rimane valido per tutte le pagine che lo richiamano fino a successivo aggiornamento, l'inline CSS viene caricato per ciascuna pagina e, dato che difficilmente gli stessi utenti torneranno continuamente sulla medesima pagina, ciò rappresenta uno svantaggio in termini di ottimizzazione. Quindi, quali delle due procedure è preferibile?

L'approccio inline è consigliato anche da Google che per ottenere prestazioni migliori suggerisce di considerare l'incorporamento del CSS critico direttamente nel documento HTML in modo da eliminare roundtrip aggiuntivi.

In linea generale è però possibile sostenere che l'inline CSS andrebbe privilegiato quando le regole di stile utilizzate sono poche, anche se non potremo sfruttare il caching del CSS esterno esse influiranno in modo quasi impercettibile sulle latenze; con l'aumentare della complessità i file CSS esterni potrebbero risultare invece preferibili.

In alcuni casi, ad esempio quando si ha l'esigenza di ottimizzare in modo particolare una Home o una landing, è possibile adottare un approccio differenziato, per esempio utilizzando l'inline per tali pagine e i CSS esterni per tutte le altre, ciò dovrebbe facilitare anche l'esecuzione di interventi per l'aggiornamento delle regole di stile.

Per approfondire: PageSpeed rules and recommendations