CSS: cos’è e come ottimizzarlo per un sito veloce

SEO Scritto da: Gennaro Mancini pubblicato il 21 Agosto 2020

Il CSS è il linguaggio informatico che regola la formattazione stilistica dei siti e delle relative pagine web: come altri elementi, quando non implementato in modo corretto può diventare pesante e rallentare le prestazioni del nostro progetto. Vediamo insieme le informazioni principali sui fogli di stile e quali sono gli interventi che possono alleggerire e ottimizzare il CSS per rendere il sito più veloce.

Che cos’è il CSS

Prima di affrontare gli aspetti tecnici, partiamo con le necessarie definizioni e con la storia del CSS. L’acronimo CSS indica in inglese i Cascading Style Sheets, traducibili in italiano con fogli di stile a cascata, ed è il codice usato per modellare il layout e lo stile delle pagine web e di tutto il sito.

A cosa serve il linguaggio di stile

Secondo gli esperti, il CSS non è propriamente un linguaggio di programmazione, ma piuttosto un linguaggio di stile universalmente condiviso da tutti i browser che permette di applicare un singolo stile agli elementi dei documenti web e di istruire browser o un altro programma-utente sulla resa finale del documento da presentare all’utente.

Attraverso questo codice possiamo intervenire su ogni tipo di elemento, definendo ad esempio il tipo di font, le sue dimensioni e il colore, e poi ancora le immagini di sfondo, il posizionamento di elementi grafici, la gestione di colonne o di altri elementi sulla pagina. Inoltre, attraverso il CSS possiamo anche impostare la disposizione degli elementi in maniera responsive, ovvero adattare il layout in base ai diversi dispositivi degli utenti.

La storia del CSS

L’ideazione del CSS si lega in maniera diretta con il linguaggio HTML, di cui è in qualche modo un ideale complemento all’insegna della filosofia separare il contenuto dalla presentazione. Nelle intenzioni del W3C, infatti, HTML dovrebbe essere visto e usato come linguaggio strutturale, senza informazioni grafiche o di stile sulla presentazione del documento, mentre invece il CSS ha il compito di arricchire l’aspetto visuale della pagina.

I Cascading Style Sheets erano dunque necessari per separare i contenuti delle pagine HTML dagli elementi di formattazione o layout e consentire una programmazione più chiara e facile, sia per i programmatori sia per gli utenti, garantendo contemporaneamente anche il riutilizzo di codice e una manutenzione più semplice.

La prima versione ufficiale del CSS (chiamata successivamente CSS 1) è stata presentata nel dicembre del 1995; la specifica CSS 2 è stata rilasciata nel maggio 1998, a cui ha fatto seguito CSS 2.1 il 7 giugno 2011. È stata poi la volta delle specifiche del CSS 3, costituite da sezioni separate dette “moduli”, che sono state pubblicate a intervalli temporali differenti fino al giugno 2018. Dall’inizio del 2020 un gruppo del W3C Community sta lavorando alla definizione della nuova versione, che sarà chiamata CSS 4.

Le caratteristiche del CSS

Vediamo ora, in estrema sintesi, le basi del funzionamento di questo linguaggio. Il codice CSS può essere inserito nelle pagine web attraverso tre modi differenti:

Inserire un collegamento a un foglio esterno (contrassegnato dall’estensione .css) nel tag <head> della pagina HTML. Questa soluzione presuppone la creazione di un file specifico collegato attraverso il tag link o la direttiva import (che serve anche a collegare tra loro più file .css) e garantisce il massimo riuso di codice, perché ogni pagina HTML desiderata richiama lo stesso file esterno.
Utilizzare le dichiarazioni css tra gli specifici tag <style> e </style> all’interno dell'<head>. In questo caso, le istruzioni valgono solo per la pagina in cui sono presenti le dichiarazioni e quindi il riuso è inferiore.
In linea all’interno degli elementi, soluzione che rende minimo il riuso di codice.

In linea di massima, un foglio di stile CSS si struttura sintatticamente come una sequenza di regole che possono eventualmente essere accompagnate da note di commento e da una o più direttive @-rule.

Le regole sono coppie costituite da un selettore e un blocco di dichiarazioni, racchiuso tra parentesi graffe; il selettore serve a individuare gli elementi del documento HTML in cui andrà applicata la regola, mentre la dichiarazione (separata con un punto e virgola dalle altre) si compone di una proprietà (un tratto di stile da applicare all’elemento da modificare) e del corrispettivo valore.

Tra le varie norme da rispettare ne citiamo due: ogni dichiarazione deve contenere solo una proprietà, ma è possibile specificare più valori; inoltre, gli spazi bianchi in una regola non influiscono sul risultato e spesso gli spazi vuoti sono utili per migliorare la leggibilità.

Come ottimizzare il CSS del sito

Chiusa questa parentesi generale, proviamo a vedere quali sono i consigli per migliorare la gestione del codice sulle nostre pagine e per evitare di gravare sulle performance del sito. In nostro supporto arrivano le guide del blog web.dev, che dedicano alcune lezioni alle best practices per il CSS.

Il primo suggerimento è di Demian Renzulli, Senior Web Ecosystems Consultant presso Google, ed è “differire il CSS non critico”.

Rinviare il caricamento di codice non cruciale

I file CSS sono risorse che bloccano il rendering, ci spiega il Google, perché devono essere caricati ed elaborati prima che il browser esegua il rendering della pagina; di conseguenza, le pagine Web che contengono stili inutilmente grandi richiedono più tempo per il rendering.

Con la tecnica del differimento è possibile ottimizzare il percorso critico di rendering e migliorare il First Contentful Paint, elemento importante per offrire un’esperienza veloce agli utenti.

Ridurre il CSS inutilizzato

Per spiegare il metodo di semplificazione del CSS, Renzulli porta l’esempio di una pagina che richiede un file CSS con otto classi, non tutte sono necessarie per rendere il contenuto “visibile”: una gestione più accorta farà caricare in modo sincrono solo gli stili critici, lasciando caricare gli altri (come quelli applicati ai paragrafi) in modo non bloccante.

Lo strumento per verificare l’impatto del codice sulla velocità del sito è Google Lighthouse, che segnala anche con un suggerimento chiamato Remove Unused CSS la presenza in pagina di almeno 2048 byte di regole CSS che non vengono utilizzate durante il rendering del contenuto above the fold. Il rischio infatti è che il browser debba attendere il caricamento e l’elaborazione di tutti i CSS prima di dipingere un singolo pixel sullo schermo.

Individuare il CSS critico

Per ottimizzare la pagina è comunque necessario sapere quali classi sono considerate “critiche”: Google ha sviluppato uno strumento – il Coverage Tool contenuto nei DevTools di Chrome – che permette di verificare la copertura della singola pagina e di capire, anche visivamente, quali sono le risorse CSS critiche e quelle che invece non lo sono.

Critiche (indicate in verde) sono le classi necessarie al browser per renderizzare il contenuto visibile (come i pulsanti titolo, sottotitolo e accordion); non critici (in rosso nel tool) sono invece gli stili che si applicano a contenuti non immediatamente visibili (come i paragrafi all’interno delle accordion).

Con queste informazioni possiamo ottimizzare il CSS in modo che il browser inizi a elaborare gli stili critici immediatamente dopo il caricamento della pagina, rimandando i CSS non critici a un momento successivo.

Minimizzare il codice CSS

Il secondo procedimento che possiamo attuare è la tecnica della minificazione (minify), ovvero la riduzione al massimo dei file CSS: a volte, il codice può contenere caratteri non necessari, come commenti, spazi bianchi e rientri, e tali caratteri possono essere rimossi in modo sicuro in produzione, per ridurre le dimensioni del file senza influire sul modo in cui il browser elabora gli stili.

Già in fase di stesura del codice è possibile evitare appesantimenti che possono essere rimossi – come, ad esempio, spazi a scopo di rientro o commenti, che vengono ignorati dal browser; stili che è possibile raggruppare o indicazioni imprecise per il colore di font e background – ma in alternativa ci sono tool di compilazione automatica e processi webpack per questo scopo.

Estrarre CSS critico

La terza tecnica presentata – da un’altra Googler, la sviluppatrice Milica Mihajlija – è l’estrazione del CSS critico: come dicevamo prima, il browser deve scaricare e analizzare i file CSS prima di poter mostrare la pagina, il che rende il codice una risorsa rendering-blocking. Se i file sono grandi o le condizioni della rete sono scarse, le richieste dei file CSS possono aumentare significativamente il tempo necessario per il rendering di una pagina Web.

Con questa tecnica possiamo estrarre il CSS per contenuti above the fold al fine di rendererizzarli all’utente il più rapidamente possibile: l’inserimento di stili estratti nell’<head> del documento HTML elimina la necessità di effettuare una richiesta aggiuntiva per recuperare questi stili, e il resto del codice può essere caricato in modo asincrono.

I vantaggi di questa operazione

Il miglioramento dei tempi di rendering può fare un’enorme differenza nelle prestazioni percepite dagli utenti, soprattutto in condizioni di rete scadenti; per le reti mobili, l’alta latenza è un problema indipendente dalla larghezza di banda.

Esistono numerosi ottimi strumenti che possono determinare automaticamente il CSS critico per una pagina, un processo complesso che richiede un’analisi dell’intero DOM per determinare gli stili applicati a ciascun elemento nella finestra. L’impatto sulle prestazioni che possiamo ottenere con questa tecnica dipende dal tipo di sito web: in generale, più CSS ha un sito, maggiore è il potenziale impatto dei CSS incorporati.

Mihajlija invita anche a ricordare che inserire una grande quantità di CSS ritarda la trasmissione del resto del documento HTML: se tutto ha la priorità, scrive, allora nulla lo ha. L’inserimento inline ha anche alcuni aspetti negativi perché impedisce al browser di memorizzare nella cache il CSS per riutilizzarlo ai successivi caricamenti di pagina, quindi è meglio usarlo con parsimonia.

Offrire contenuti rapidamente

Se il nostro sito ha valori scarsi di First Contentful Paint (FCP) e intravediamo la segnalazione “Elimina risorse di blocco rendering” negli audit di Lighthouse, è una buona idea provare la tecnica dei CSS critici. Per ridurre al minimo il numero di round trip per il primo rendering, l’obiettivo è mantenere il contenuto above-the-fold sotto 14 KB (compresso).

Questo valore non è ovviamente casuale: le nuove connessioni TCP non possono utilizzare immediatamente tutta la larghezza di banda disponibile tra il client e il server e passano tutte attraverso lo slow-start per evitare di sovraccaricare la connessione con più dati di quanti ne possano trasportare. In questo processo, il server avvia il trasferimento con una piccola quantità di dati e, se raggiunge il client in perfette condizioni, raddoppia la quantità nel successivo roundtrip. Per la maggior parte dei server, 10 pacchetti o circa 14 KB è la dimensione massima che può essere trasferita nel primo roundtrip.

Ottimizzare le immagini di sfondo CSS con media query

Molti siti richiedono risorse pesanti, come le immagini, che non sono ottimizzate per determinati schermi e inviano file CSS di grandi dimensioni che contengono stili che alcuni dispositivi non useranno mai, scrive Renzulli presentando l’ultimo metodo di ottimizzazione del CSS suggerito da Google.

L’uso di media query è una tecnica popolare per fornire fogli di stile e risorse su misura dei diversi display, ridurre la quantità di dati trasferiti agli utenti e migliorare le prestazioni di caricamento della pagina. Si tratta, in sintesi, di imparare a usare il codice per fornire immagini reattive o responsive senza sovraccaricarlo.

Per farlo, possiamo usare la regola @media possiamo e implementare uno sfondo reattivo – tecnica ampiamente supportata da tutti i browser – oppure usare una nuova funzionalità CSS: image-set(), che ha lo stesso scopo ma impegna meno righe di codice (ma al momento non è ancora supportata da tutti i browser).

In questo modo, possiamo servire immagini di sfondo su misura per schermi di dimensioni specifiche e salvare byte quando il visitatore accede al sito su dispositivi più piccoli, come i telefoni cellulari.