Guida all’Ottimizzazione di Bootstrap 5: Migliora la Velocità del Tuo Sito Web

Hai mai avuto l’impressione che il tuo Bootstrap 5 sia un po’ come quell’armadio che straborda di vestiti mai indossati? Bootstrap è fantastico, ma diamine, può portarsi dietro un carico di roba inutile che molto probabilmente non utilizzerai mai.

Quindi, se sei stanco di chilometri di CSS Bootstrap, allaccia la cintura, perché stiamo per fare un viaggio nell’arte dell’ottimizzazione di Bootstrap 5. In questo piccolo e caotico percorso, ti mostrerò come scovare solo il buono (e buttare il brutto) di Bootstrap 5.

Quante volte abbiamo sentito la frase “Non tenere ciò che non ti serve”. Solo che questa volta, stiamo parlando di codice. Imparerai a mettere a dieta il tuo Bootstrap, ad allenarlo per un’esecuzione più veloce e a farlo brillare come uno specchio digitale. Quindi, affila le dita e apri l’IDE, perché stiamo per dare una bella pulita al garage di Bootstrap e renderlo più scattante che mai!

Nel proseguo di questa guida all’ottimizzazione di Bootstrap 5, ti mostrerò come raccogliere solo le parti di Bootstrap di cui hai veramente bisogno, evitando di trascinarti dietro tutto il suo guardaroba. Poi, ti guiderò attraverso l’aggiunta di un po’ di magia al tuo editor preferito, che sia Visual Studio Code o PHPStorm. Infine, non ci fermeremo qui: scoprirai anche come fare un “purge CSS” per liberarti di tutta quella robaccia che accumula nel tuo stile.

Quindi, se sei pronto a rendere il tuo Bootstrap 5 scattante e scintillante, continua a leggere! Sono qui per guidarti, con un po’ di cazzimma e un sacco di codice.

Capitolo 1: Bootstrap 5 – Compilazione Selettiva SCSS

Ok, è ora di mettere Bootstrap a dieta! Immagina Bootstrap 5 come un buffet all-you-can-eat – offre una miriade di opzioni deliziose, ma non vuoi riempirti inutilmente di cibo. La stessa idea si applica a Bootstrap 5: ha un sacco di funzionalità fantastiche, ma spesso finiamo per caricare molto più codice di quanto effettivamente utilizziamo.

Normalmente, per fare in fretta, molti sviluppatori aggiungono Bootstrap al loro progetto tramite CDN. Questa pratica permette di includere tutte le classi CSS e gli scripts e servirli al client direttamente dalla rete. Questo però, come abbiamo detto, porta inevitabilmente all’appesantire la pagina con risorse che non saranno utilizzate.

Per quanto riguarda il download dei files compilati, Bootstrap 5 ci vieni in aiuto  e ci fornisce la possibilità di scelta tra diversi set up. Trovate tutto a questo link.
Nei files forniti però non c’è la possibilità di includere o escludere determinate componenti in modo più granulare e le scelte spesso si esauriscono in “importo solamente il grid system”.

Quindi ci serve qualcos’altro che ci permetta di avere un controllo maggiore su ciò che ci serve per il nostro progetto.

Ecco dove entra in gioco la compilazione selettiva SCSS. È come avere un cameriere digitale che ti offre solo ciò che hai davvero voglia di mangiare. Invece di caricare l’intero pacchetto di Bootstrap, puoi selezionare solo le parti che ti servono. Ecco come farlo:

Passo 1: Preparazione dell’ambiente

Per iniziare, assicurati di avere Bootstrap 5 installato nel tuo progetto. Andiamo nella sezione download del sito ufficiale di Bootstrap e clicchiamo su “Download Source” (link alla versione 5.2).

Passo 2: Organizza il Tuo Progetto

Crea una struttura di progetto pulita e organizzata. Avrai bisogno di una cartella per i tuoi file SCSS personali e una per i file CSS compilati.

Per una gestione pulita dei file SCSS e dei file CSS compilati, ti consigliamo di strutturare il tuo progetto come segue:

Cartella assets

  Cartella css

    Cartella src //Questa cartella conterrà tutti i tuoi file SCSS personalizzati.

      main.scss //In questo file includerai solo i moduli di Bootstrap di cui hai bisogno.

      Cartella vendors //Contiene le librerie o i pacchetti di terze parti utilizzati nel progetto

        Cartella bootstrap //Qui andranno i file SCSS di Bootstrap, suddivisi in moduli.

    Cartella dist //Qui verranno generati i file CSS compilati.

Non appena hai creato questa struttura non ti dimenticare di aprire la cartella che hai scaricato nel passo 1, copiare il contenuto di scss in assets/css/src/vendors/bootstrap.

Passo 3: File di Configurazione SCSS

Ora apriamo il file main.scss e includiamo i files necessari per una corretta configurazione:

@import "./vendors/bootstrap/mixins/banner";
@include bsBanner("");

// scss-docs-start import-stack
// Configuration
@import "./vendors/bootstrap/functions";
@import "./vendors/bootstrap/variables";
@import "./vendors/bootstrap/variables-dark";
@import "./vendors/bootstrap/maps";
@import "./vendors/bootstrap/mixins";
@import "./vendors/bootstrap/utilities";

// Layout components
@import "./vendors/bootstrap/root";
@import "./vendors/bootstrap/reboot";

// Qui possiamo inserire tutte le componenti che ci servono
@import "./vendors/bootstrap/type";
@import "./vendors/bootstrap/images";
@import "./vendors/bootstrap/containers";
@import "./vendors/bootstrap/grid";
@import "./vendors/bootstrap/forms";
@import "./vendors/bootstrap/buttons";
@import "./vendors/bootstrap/transitions";
@import "./vendors/bootstrap/nav";
@import "./vendors/bootstrap/navbar";
@import "./vendors/bootstrap/carousel";

// Helpers
@import "./vendors/bootstrap/helpers/visually-hidden";

// Utilities
@import "./vendors/bootstrap/utilities/_api";

Nella sezione  Layout & components come puoi vedere puoi inserire tutte le componenti che utilizzerai nel tuo progetto. Nell’esempio io ho incluso il grid system, il carousel, la navbar e altro, ma tu sentiti libero di icludere solamente ciò che ti serve.

Capitolo 2: Compilatori Sass nell’IDE

In questo capitolo, ti guiderò attraverso il processo, sia che tu preferisca l’affascinante mondo di Visual Studio Code o la robustezza di PHPStorm.

Integrazione in Visual Studio Code

Visual  Studio Code anche se non è propriamente un IDE è molto popolare tra gli sviluppatori, in quanto fornisce un ambiente di sviluppo leggero, altamente personalizzabile e adatto a una vasta gamma di linguaggi di programmazione (ed è gratuito!). Vediamo come aggiungere l’estensione per compilare i file .scss.

1. Installazione di Estensioni: Vai al menu delle estensioni in Visual Studio Code (Ctrl+Shift+X) e cerca “Live Sass Compiler“. Installa questa estensione.
2. Configurazione delle Impostazioni: Dopo l’installazione, apri il file settings.json per configurare l’estensione. Qui un esempio di configurazione:

"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "PATH_TO_DIST_FOLDER"
  }
]

Dove PATH_TO_DIST_FOLDER indica il percorso della cartella che abbiamo creato: assets/css/dist.

Ora non ci resta che abilitare la live compilation di Live Sass Compiler cliccando su Watch Saas nella barra in basso di Visual Studio Code.

Se hai seguito le istruzioni correttamente, ogni volta che salvi il file main.scss, verrà automaticamente generato il file main.css compilato nella cartella dist. Questo file generato conterrà tutte le classi CSS di Bootstrap di cui abbiamo bisogno e sarà incluso nel nostro progetto.

Integrazione in PhpStorm

PhpStorm è un’IDE sviluppata da JetBrains ed è una scelta popolare tra gli sviluppatori che necessitano di strumenti avanzati specifici per lo sviluppo Web. Tutte le funzionalità presenti in WebStorm sono incluse in PhpStorm, a cui è stato aggiunto il pieno supporto per PHP e il supporto per i database/SQL, rendendolo a tutti gli effetti la scelta migliore per i programmatori professionisti.

1. Configurazione del Compilatore: In PHPStorm, puoi utilizzare il plugin “File Watchers” per configurare il compilatore SCSS. Vai su “File” -> “Settings” -> “Tools” -> “File Watchers” e clicca su “+” per aggiungere un nuovo watcher.
2. Configura il Watcher: Configura il watcher come segue:
   • Nome: Scegli un nome significativo per il watcher.
   • File Type: Scegli “SCSS”.
   • Scope: Open Files.
   • Program: Specifica il percorso al tuo compilatore SCSS (puoi installare Sass tramite npm o utilizzare altri compilatori come Koala).
   • Arguments: Usa $FileName$:$FileParentDir$/dist/$FileNameWithoutExtension$.css per specificare il nome del file di output.
   • Output Paths to Refresh: Aggiungi la cartella in cui vuoi che venga generato il file CSS.
3. Attiva il Watcher: Assicurati che il watcher sia attivo e salvare le impostazioni.

Ora, quando salvi il tuo file SCSS in PHPStorm, il compilatore verrà attivato automaticamente, generando il file main.css desiderato nella cartella dist.

Risultato

Abbiamo ottenuto il file main.css che contiene solamente le classi di Bootstrap che abbiamo deciso noi, risparmiando un sacco di risorse al caricamento della pagina.

Ricorda che a questo punto puoi decidere di minificare il file CSS ottenuto per risparmiare ulteriori risorse e rendere il caricamento ancora più veloce. Sia Visual Studio Code che PhpStorm permettono di minificare i contenuti dei file CSS direttamente dall’ambiente di sviluppo (puoi trovare estensioni per VisualStudioCode oppure utilizzare un altro File Watchers su Php Storm).

Capitolo 3: Pulizia CSS – Sbarazzati del CSS Inutile con il Purge CSS

Ora che hai alleggerito Bootstrap 5 e hai integrato il compilatore nel tuo ambiente di sviluppo, sei sulla buona strada per un sito web velocissimo. Tuttavia, c’è un piccolo dettaglio che potrebbe sfuggire: spesso, anche se hai ottimizzato Bootstrap, potresti ancora finire per portarti dietro più cose di quante ne usi realmente. Ti spiego perché questo può accadere.

Immagina, per esempio, di aver importato l’intero sistema di griglia di Bootstrap, ma nella tua progettazione utilizzi solo le classi “col-4” e “col-12“. Tutte le altre colonne sarebbero superflue per te. Oppure, potresti utilizzare i bottoni di Bootstrap, ma non hai alcun interesse per i loro sfondi colorati o altri stili predefiniti.

In situazioni come queste, anche se hai tagliato il grasso da Bootstrap e ottimizzato la sua performance, potresti ancora caricare più risorse di cui hai effettivamente bisogno. Ecco perché è importante considerare attentamente quali parti di Bootstrap sono davvero necessarie per il tuo progetto e ottimizzarle in modo specifico per soddisfare le tue esigenze.

Cos’è il PurgeCSS?

PurgeCSS è un processo che elimina tutto il codice CSS non utilizzato dal tuo sito web. Immagina il tuo CSS come un armadio e il tuo sito web come il tuo guardaroba. Con il tempo, l’armadio si riempie di abiti che non indossi mai. Il Purge CSS è come un mago che guarda il tuo guardaroba e rimuove tutti quegli abiti che non hai mai messo. Trovi qui il link alla repo ufficiale su GitHub.

Come Funziona

Ecco come eseguire il PurgeCSS:

Installazione di PurgeCSS: Prima di tutto, dovrai installare il Purge CSS nel tuo progetto. Puoi farlo facilmente tramite npm:

npm install purgecss --save-dev

Esecuzione di PurgeCSS: Ora, puoi eseguire Purge CSS nel tuo ambiente di sviluppo preferito. Ecco un esempio di come farlo da terminale:

purgecss --css dist/main.css --content PATH_TO_YOUR_HTML/template.html --output CARTELLA_DESTINAZIONE/

Utilizzando questo metodo, il file main.css verrà alleggerito da tutte le classi che non sono presenti nemmeno una volta nel file template.html, ottimizzando così il codice e lo stile della pagina web.

Tieni presente però che se hai più file html, dovresti sottoporli tutti al PurgeCSS, perché potrebbero contenere classi che sono usate solo in quel file specifico e rischieresti di eliminarle dal foglio di stile.

Conclusione

Ecco fatto! Hai imparato a ottimizzare Bootstrap, integrare un compilatore nel tuo IDE e utilizzare PurgeCSS per snellire il tuo CSS. Ora sei pronto per sviluppare siti web più veloci e performanti che mai.