Come Ottimizzare il CSS

Come Ottimizzare il CSS? Ecco la guida per ottimizzare il tuo CSS per un sito web più veloce.

Come Ottimizzare il CSS

Cosa faresti per rendere più veloce il tuo sito web? Potrebbero esserci molte cose, come aggiornare il tuo server, la RAM, l’archiviazione o l’hardware in generale. Ma lo sapevi che il motivo principale per un sito web lento risiede nel tuo codice sorgente?

La mancanza di un CSS ottimizzato è il colpevole più comune.

Ciò significa che ridurre la dimensione del file del foglio di stile CSS anche di pochi kilobyte può avere un effetto considerevole sul tempo di caricamento della pagina.

Ecco la guida per ottimizzare il tuo CSS per un sito web più veloce.

Minimizza CSS

Minimizzare CSS significa semplicemente comprimere il file CSS in un file più recente con uno spazio vuoto minimo. Ovviamente non è necessario farlo manualmente, poiché su Internet sono disponibili compressori automatici. Ecco uno di questi minifier CSS: http://www.cssminifier.com/

Metti CSS in alto e JS in basso

È buona norma mettere il foglio di stile CSS in alto (tra i tag <head> </head>) e il JavaScript in fondo. Assicurati che il tuo codice CSS sia caricato prima del resto della pagina. Un motivo per cui JavaScript viene posizionato in fondo è la sua maggiore dimensione e il suo conseguente effetto sulla velocità del sito web.

Divisione di file CSS

Puoi dividere i file CSS, cioè vari fogli di stile, se scegli come target più browser come IE, Chrome o Firefox. Ad esempio, invece di provare gli hack CSS in un singolo foglio di stile, puoi utilizzare le istruzioni condizionali di IE per caricare un foglio di stile diverso (ad esempio, mirando a IE6). In questo modo, non caricherai il codice IE durante l’utilizzo di Chrome e ridurrai le dimensioni del file CSS di un grande margine.

Riduci gli spazi vuoti

Dovresti sempre provare a ridurre lo spazio bianco nel tuo CSS perché l’aumento dello spazio bianco può occupare molti byte e può fare la differenza tra un sito più veloce e uno più lento in progetti su larga scala.

CSS Preload

Il precaricamento del CSS è una pratica molto consigliata per migliorare il punteggio di caricamento.

Utilizzando l’attributo rel=”preload” e l’attributo as=”style” possiamo abbattere drasticamente i tempi di caricamento.

Ecco l’esempio di come aggiungere il foglio di stile CSS per le icone di FontAwesome:

<!-- FONTAWESOME WITH PRELOAD -->
<link rel="preload" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</noscript>
Francesco Adorno

Specializzato in ottimizzazione e posizionamento su Google.it

Ciao, mi chiamo Francesco Adorno e sono un ex dipendente di una delle più grandi web agency in Italia, e dal 2012 mi sono specializzato nella SEO e nella visibilità per le piccole e medie imprese.

Bisogno di Aiuto?

Questo sito utilizza cookie di navigazione per offrirti l'esperienza più pertinente ricordando le tue preferenze e ripetendo le visite. Facendo clic su "ACCETTO", acconsenti all'uso di TUTTI i cookie.

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi

Questo sito utilizza cookie di navigazione per offrirti l'esperienza più pertinente ricordando le tue preferenze e ripetendo le visite. Facendo clic su "ACCETTO", acconsenti all'uso di TUTTI i cookie.

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi