Ottimizzare e minimizzare il codice di stile CSS

Da **Niko** Lun 18 Gen 2021 - 16:57

Ottimizzare e minimizzare il codice di stile CSS

Definizione del problema e della risorsa

Spesso capita che il vostro foglio di stile CSS contenga troppi codici, e che quindi, superato il limite massimo di righe, non se ne possano inserire ulteriori. Inoltre, spesso i rapporti dello strumento Google PageSpeed Insights riportano come errore quello di un codice CSS di stile non minimizzato ed ottimizzato.

Ad esempio molte volte ci sono alcune parti che non sono per niente utili, come per esempio le descrizioni e i commenti del creatore del codice di stile CSS:

body {
color: black; //* codice per lo sfondo
}

oppure

//* Personalizza il corpo del forum
.pun {
color: black;
}

Altre volte ancora ci sono spazi.. salti di linea.. e altri elementi che non servono assolutamente a nulla, se non a contribuire ad appesantire i codici CSS e il caricamento delle pagine.

Perchè minimizzare il codice CSS

Ottimizzazione e Minimizzazione (Minify)
La Minimizzazione è il processo di riduzione al minimo del codice e del markup nelle pagine Web e nei file di script. È uno dei metodi principali utilizzati per ridurre i tempi di caricamento e l'utilizzo della larghezza di banda sui siti Web. La minimizzazione migliora notevolmente la velocità e l'accessibilità del sito, traducendosi direttamente in una migliore esperienza utente.

Su tutta la linea, la minimizzazione del codice sorgente riduce le dimensioni del file e può accelerare il tempo necessario al browser per scaricare ed eseguire tale codice. Tuttavia, ciò che è di fondamentale importanza nella minimizzazione dei CSS è che CSS è una risorsa che blocca il rendering sul web.

Ciò significa che l'utente non sarà potenzialmente in grado di vedere alcun contenuto su una pagina web fino a quando il browser non avrà creato il CSSOM (il DOM ma con le informazioni CSS), il che avviene solo dopo aver scaricato e analizzato tutti i fogli di stile a cui fa riferimento il documento.

Minimizzazione vs Ottimizzazione

La Minimizzazione e la compressione del codice vengono spesso utilizzate in modo intercambiabile, forse perché entrambe affrontano l'ottimizzazione delle prestazioni che portano a riduzioni delle dimensioni. Ma sono cose diverse e vorrei chiarire come:

La Minimizzazione altera il contenuto del codice. Riduce la dimensione del file di codice eliminando spazi, caratteri e formattazione indesiderati, con il risultato di un minor numero di caratteri nel codice. Può ottimizzare ulteriormente il codice rinominando in modo sicuro le variabili per utilizzare ancora meno caratteri.
La compressione non altera necessariamente il contenuto del codice, beh, a meno che non consideriamo i file binari come immagini, che non tratteremo in questa esplorazione. Riduce le dimensioni del file comprimendo il file prima di inviarlo al browser quando viene richiesto.

 Queste due tecniche non si escludono a vicenda, quindi possono essere utilizzate insieme per fornire all'utente codice ottimizzato.

Strumenti per minimizzare e ottimizzare

Se non hai familiarità con la minimizzazione dei CSS e desideri affrontare le cose lentamente, puoi iniziare da qui e procedere con i passaggi successivi solo quando ti senti più a tuo agio. Sebbene questo approccio funzioni, è ingombrante e inadatto a progetti reali di qualsiasi dimensione, specialmente uno con diversi membri del team.

Esistono numerosi strumenti online gratuiti e semplici che possono minimizzare rapidamente i CSS. Ad esempio:

Tutti e tre gli strumenti forniscono una semplice interfaccia utente composta da uno o più campi di input e richiedono di copiare e incollare il CSS nel campo di input e fare clic su un pulsante per minimizzare il codice. L'output viene presentato anche sull'interfaccia utente per poterlo copiare e incollare nuovamente nel progetto.

Foglio di stile - Ottimizzare e minimizzare il codice di stile CSS Css-minifier-minified-output

Una volta ottenuto il codice ottimizzato e/o minimizzato non dovete fare altro che sostituirlo a quello originale :good:

Il risultato sarà lo stesso ma la velocità di caricamento e le performance saranno decisamente migliori!