Minimizza CSS

I file CSS possono contenere caratteri non necessari, come commenti, spazi vuoti e rientri. In produzione, questi caratteri possono essere rimossi in sicurezza per ridurre le dimensioni dei file senza influire sul modo in cui il browser elabora gli stili. Questa tecnica è chiamata minificazione.

Caricamento di CSS non minimizzato in corso...

Dai un'occhiata al seguente blocco CSS:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

Questi contenuti sono facili da leggere, ma costo di produrre un file più grande del necessario:

• Utilizza gli spazi per il rientro e contiene i commenti, che vengono ignorati dal browser, in modo che possano essere rimossi.
• Gli elementi <h1> e <h2> hanno gli stessi stili: invece di dichiararli separatamente: "h1 {...} h2 {...}", potrebbero essere espressi come "h1, h2{...}".
• Il valore di background-color #000000 può essere espresso solo come #000.

Dopo aver apportato queste modifiche, otterrai una versione più compatta degli stessi stili:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

Probabilmente non vorrai scrivere codice CSS in questo modo. Puoi invece scrivere il codice CSS come al solito e aggiungere un passaggio di minimizzazione al processo di compilazione. In questa guida scoprirai come fare utilizzando uno strumento di sviluppo molto conosciuto: webpack.

Misura

Applicherai la minimizzazione CSS a un sito che è stato utilizzato in altre guide: Fav Kitties. Questa versione del sito utilizza una fantastica libreria CSS, animate.css, per animare diversi elementi della pagina quando un utente vota un gatto Њ.

Per prima cosa, devi capire quale potrebbe essere l'opportunità che si potrebbe ottenere dopo aver minimizzato questo file:

1. Apri la pagina della misura.
2. Inserisci l'URL: https://fav-kitties-animated.glitch.me e fai clic su Esegui controllo.
3. Fai clic su Visualizza report.
4. Fai clic su Rendimento e vai alla sezione Opportunità.

Il report risultante mostra che dal file animate.css possono essere salvati fino a 16 kB:

Ora esamina i contenuti del CSS:

1. Apri il sito di Fav Kitties in Chrome. Potrebbe essere necessario attendere un po' di tempo prima che i server Glitch rispondano la prima volta.
2. Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
3. Fai clic sulla scheda Rete.
4. Fai clic sul filtro CSS.
5. Seleziona la casella di controllo Disattiva cache.
6. Ricarica l'app.

La pagina richiede due file CSS, rispettivamente di 1,9 kB e 76,2 kB.

1. Fai clic su animate.css.
2. Fai clic sulla scheda Risposta per visualizzare i contenuti del file.

Tieni presente che il foglio di stile contiene caratteri per gli spazi vuoti e il rientro:

Successivamente, aggiungerai alcuni plug-in webpack al processo di compilazione per minimizzare questi file.

Minimizzazione CSS con webpack

Prima di passare alle ottimizzazioni, scopri come funziona la procedura di creazione del sito di Fav Kitties:

Per impostazione predefinita, il bundle JS risultante prodotto da webpack conterrebbe i contenuti dei file CSS incorporati. Poiché vogliamo mantenere separati i file CSS, stiamo usando due plug-in complementari:

• mini-css-extract-plugin estrarrà ciascun foglio di stile nel proprio file, come uno dei passaggi del processo di compilazione.
• webpack-fix-style-only-entries viene utilizzato per risolvere un problema in wepback 4, al fine di evitare di generare un file JS aggiuntivo per ogni file CSS elencato in webpack-config.js.

Ora apporterai alcune modifiche al progetto:

1. Apri il progetto Fav Kitties in Glitch.
2. Per visualizzare la sorgente, premi Visualizza sorgente.
3. Fai clic su Remix per modificare per rendere modificabile il progetto.
4. Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potrebbe essere necessario utilizzare l'opzione Schermo intero).

Per minimizzare il CSS risultante, utilizza optimize-css-assets-webpack-plugin:

1. Nella console Glitch, esegui npm install --save-dev optimize-css-assets-webpack-plugin.
2. Esegui refresh, in modo che le modifiche vengano sincronizzate con l'editor di Glitch.

Quindi, torna all'editor di Glitch, apri il file webpack.config.js e apporta le seguenti modifiche:

Carica il modulo all'inizio del file: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

Successivamente, passa un'istanza del plug-in all'array plugins: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] Dopo aver apportato le modifiche, verrà attivata una nuova compilazione del progetto. Ecco l'aspetto del file webpack.config.js risultante:

Successivamente, potrai verificare il risultato di questa ottimizzazione con gli strumenti per il rendimento.

Verifica

• Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi Schermo intero .

Se ti sei perso in un passaggio precedente, puoi fare clic qui per aprire una versione ottimizzata del sito.

Per controllare le dimensioni e i contenuti dei file:

1. Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
2. Fai clic sulla scheda Rete.
3. Fai clic sul filtro CSS.
4. Seleziona la casella di controllo Disattiva cache, se non è già visualizzata.
5. Ricarica l'app.

Puoi esaminare questi file e vedere che le nuove versioni non contengono spazi vuoti. Entrambi i file sono molto più piccoli, in particolare, il file animate.css è stato ridotto del ~26%, con un risparmio di ~20 KB.

Come passaggio finale:

1. Apri la pagina della misura.
2. Inserisci l'URL del sito ottimizzato.
3. Fai clic su Visualizza report.
4. Fai clic su Rendimento e individua la sezione Opportunità.

Il report non mostra più "Minimizza CSS" come "Opportunità" ed è stato spostato nella sezione "Controlli superati":

Poiché i file CSS sono risorse che bloccano la visualizzazione, se applichi la minimizzazione su siti che utilizzano file CSS di grandi dimensioni, puoi notare miglioramenti in metriche come First Contentful Paint.

Passaggi successivi e risorse

In questa guida abbiamo parlato della minimizzazione dei CSS con webpack, ma lo stesso approccio può essere seguito con altri strumenti di creazione, come gulp-clean-css per Gulp o grunt-contrib-cssmin per Grunt.

La minimizzazione può essere applicata anche ad altri tipi di file. Consulta la guida per minimizzare e comprimere i payload di rete per saperne di più sugli strumenti per minimizzare JS e su alcune tecniche complementari, come la compressione.