Minimizza CSS

Demián Renzulli
Demián Renzulli
X GitHub Glitch

I file CSS possono contenere caratteri non necessari, ad esempio commenti, spazi vuoti e rientro. In fase di produzione, questi caratteri possono essere rimossi in sicurezza per ridurre le dimensioni del 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 a costo di produrre un file più grande del necessario:

  • Utilizza gli spazi per il rientro e contiene commenti che vengono ignorati dal browser, quindi possono essere rimossi.
  • Gli elementi <h1> e <h2> hanno gli stessi stili, anziché dichiararli separatamente: "h1 {...} h2 {...}" potrebbero essere espresse come "h1, h2{...}".
  • Il valore background-color (colore di sfondo) #000000 potrebbe 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 preferisci non scrivere CSS in questo modo. Puoi invece scrivere il codice CSS come di consueto e aggiungere un passaggio di minimizzazione al processo di creazione. In questa guida, imparerai a eseguire questa operazione utilizzando uno strumento di creazione molto diffuso: webpack.

Misura

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

Per prima cosa, devi capire quale sarebbe l'opportunità dopo minimizzare questo file:

  1. Apri la pagina di misurazione.
  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 è possibile salvare fino a 16 kB dal file animate.css:

Lighthouse: minimizza l&#39;opportunità CSS.

Ora esamina i contenuti del CSS:

  1. Apri il sito di Fav Kitties in Chrome. (i server Glitch potrebbe impiegare un po' di tempo per rispondere 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 Disabilita cache.
  6. Ricarica l'app.

Traccia non ottimizzata CSS DevTools

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:

Risposta non ottimizzata CSS DevTools

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

Minimizzazione CSS con webpack

Prima di passare alle ottimizzazioni, dedica un po' di tempo a capire come funziona il processo di creazione del sito Fav Kitties:

Per impostazione predefinita, il bundle JS risultante generato da Webpack includerà i contenuti dei file CSS incorporati. Poiché vogliamo mantenere file CSS separati, utilizziamo due plug-in complementari:

  • mini-css-extract-plugin estrarrà ogni foglio di stile nel proprio file, come uno dei passaggi del processo di compilazione.
  • webpack-fix-style-only-entries viene utilizzato per correggere un problema in Wepback 4, per 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 fonte, premi Visualizza origine.
  3. Fai clic su Remixa per modificare per rendere modificabile il progetto.
  4. Fai clic su Terminale. Nota: se il pulsante Terminale non viene visualizzato, potresti dover utilizzare l'opzione Schermo intero.

Per minimizzare il CSS risultante, utilizzerai 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 Glitch.

Quindi torna all'editor 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");

Quindi, 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:

Potrai poi 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 schermo intero.

Se ti sei perso in un passaggio precedente, puoi fare clic qui per aprire una finestra una versione 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 Disabilita cache, se non è già selezionata.
  5. Ricarica l'app.

Risposta non ottimizzata CSS DevTools

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 di ~26%, con un risparmio di ~20 KB.

Come ultimo passaggio:

  1. Apri la pagina di misurazione.
  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 "Minimizza CSS" come "Opportunità" ed è stata spostata in "Controlli superati" sezione:

Lighthouse hanno superato i controlli per la pagina ottimizzata.

Dal momento che i file CSS bloccano la visualizzazione, se applichi la minimizzazione a siti che utilizzano file CSS di grandi dimensioni, puoi notare dei miglioramenti in metriche come First Contentful Paint.

Passaggi successivi e risorse

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

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