Estrai e incorpora CSS critici con le informazioni critiche

Milica Mihajlija
Milica Mihajlija

Che si tratti di una libreria UI o di una creazione manuale dei tuoi stili, la spedizione di una notevole quantità di CSS ritarda il rendering perché il browser deve scaricare e analizzare i file CSS prima di poter mostrare la pagina.

Questa galleria di gelati adattabile è realizzata con Bootstrap. Le librerie UI come Bootstrap accelerano lo sviluppo, ma spesso a scapito di CSS ingombrante e non necessario, che può rallentare i tempi di caricamento. Bootstrap 4 pesa 187 kB, mentre la Semantic UI, un'altra libreria UI, è di ben 730 kB non compressa. Anche se è stato minimizzato e compresso con gzip, Bootstrap pesa ancora circa 20 KB, ben oltre la soglia di 14 KB per il primo viaggio di andata e ritorno.

Critical è uno strumento che estrae, minimizza e incorpora il codice CSS above the fold. In questo modo, i contenuti in primo piano vengono visualizzati il prima possibile, anche se il CSS per altre parti della pagina non è ancora stato caricato. In questo codelab imparerai a utilizzare il modulo npm di Critical.

Misura

  • Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi A schermo intero schermo intero.

Per eseguire un controllo Lighthouse su questo sito:

  1. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  2. Fai clic sulla scheda Lighthouse.
  3. Fai clic su Dispositivo mobile.
  4. Seleziona la casella di controllo Rendimento.
  5. Deseleziona le altre caselle di controllo nella sezione Controlli.
  6. Fai clic su 3G rapido simulato, rallentamento della CPU 4x.
  7. Seleziona la casella di controllo Cancella dati archiviati. Se questa opzione è selezionata, Lighthouse non carica le risorse dalla cache, il che simula l'esperienza dei visitatori che visitano la pagina per la prima volta.
  8. Fai clic su Esegui controlli.

Riquadro Controlli di Chrome DevTools, basato su Lighthouse

Quando esegui un controllo sulla tua macchina, i risultati esatti possono variare, ma nella visualizzazione della sequenza di immagini noterai che l'app ha uno schermo vuoto per un po' di tempo prima di eseguire il rendering dei contenuti. Questo è il motivo per cui il First Contentful Paint (FCP) è elevato e il punteggio delle prestazioni complessive non è elevato.

Audit Lighthouse che mostra un punteggio di prestazioni di 84, FCP di 3 secondi e una visualizzazione della sequenza di immagini del caricamento dell'app

Lighthouse ti aiuta a risolvere i problemi di rendimento, pertanto cerca soluzioni nella sezione Opportunità. L'opzione Eliminare le risorse che bloccano la visualizzazione è un'opportunità ed è qui che entra in gioco l'importanza fondamentale.

Sezione "Opportunità" dell'audit Lighthouse che elenca "Elimina le risorse di blocco della visualizzazione"

Ottimizza

  • Fai clic su Remix per modificare per rendere il progetto modificabile.

Per velocizzare le operazioni, l'API Critical è già installata e nel codelab è incluso un file di configurazione vuoto.

Nel file di configurazione critical.js, aggiungi un riferimento a Critical e poi invoca la funzione critical.generate(). Questa funzione accetta un oggetto contenente la configurazione.

const critical = require('critical');

critical.generate({
    // configuration
},(err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

La gestione degli errori non è obbligatoria, ma è un modo semplice per valutare l'esito positivo di un'operazione nella console.

Configura critico

La tabella seguente contiene alcune opzioni di Criteri importanti utili. Puoi controllare tutte le opzioni disponibili su GitHub.

Opzione Tipo Spiegazione
base stringa La directory di base per i tuoi file.
src stringa File di origine HTML.
dest stringa La destinazione del file di output. Se il codice CSS è incorporato, il file di output è HTML. In caso contrario, l'output è un file CSS.
width, height numeri Larghezza e altezza della visualizzazione in pixel.
dimensions matrice Contiene oggetti con proprietà di larghezza e altezza. Questi oggetti rappresentano le visualizzazioni che vuoi scegliere come target con il CSS above-the-fold. Se nel tuo CSS sono presenti query supporti, questo ti consente di generare un CSS fondamentale che copra più dimensioni dell'area visibile.
inline booleano Se impostato su true, il CSS critico generato viene inserito nel file sorgente HTML.
minify booleano Se impostato su true, il valore critico minimizza il CSS critico generato. Può essere omesso durante l'estrazione del CSS critico per più risoluzioni perché Critical lo riduce automaticamente per evitare l'inclusione di regole duplicate.

Di seguito è riportato un esempio di configurazione per l'estrazione di CSS critici per più risoluzioni. Aggiungilo a critical.js o prova e modifica le opzioni.

critical.generate({
  base: 'public/',
  src: './index.html',
  dest: './index.html',
  inline: true,
  dimensions: [
    {
      height: 500,
      width: 300,
    },
    {
      height: 720,
      width: 1280,
    },
  ]
}, (err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

In questo esempio, index.html è sia il file di origine sia il file di destinazione perché l'opzione inline è impostata su true. Innanzitutto, Critical legge il file sorgente HTML, estrae il CSS fondamentale e poi sovrascrive index.html con il CSS fondamentale incorporato in <head>.

L'array dimensions ha due dimensioni del viewport specificate: 300 x 500 per schermi extra piccoli e 1280 x 720 per schermi di laptop standard.

L'opzione minify viene omessa perché Critical riduce automaticamente le dimensioni del CSS estratto quando sono specificate più dimensioni dell'area visibile.

Esegui critica

Aggiungi il livello Critico ai tuoi script in package.json:

scripts: {
  "start": "node server.js",
  "critical": "node critical.js"
}
  1. Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potresti dover utilizzare l'opzione Schermo intero).

Per generare il CSS critico, nella console esegui:

npm run critical
refresh
Messaggio di successo che indica &quot;CSS critico generato&quot; nella console
Messaggio di successo nella console

Ora nel tag <head> di index.html, il CSS critico generato viene incorporato tra i tag <style>, seguito da uno script che carica il resto del CSS in modo asincrono.

index.html con CSS critico incorporato
CSS critico incorporato

Misura di nuovo

Segui i passaggi dall'inizio del codelab per eseguire di nuovo il controllo delle prestazioni di Lighthouse. I risultati che ottieni saranno simili a questo:

Audit Lighthouse che mostra un punteggio di rendimento pari a 100, FCP di 0,9 secondi e una visualizzazione migliorata della sequenza di immagini del caricamento dell&#39;app