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 velocizzano lo sviluppo, ma spesso ciò comporta l'addebito di CSS gonfi e superflui, che possono 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 minimizzata e compressa con gzip, Bootstrap pesa comunque circa 20 kB, ben oltre la soglia di 14 kB per il primo andata e ritorno.
Critical è uno strumento che estrae, minimizza e incorpora il codice CSS above the fold. In questo modo il rendering dei contenuti above the fold viene eseguito 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
Schermo intero
.
Per eseguire un controllo di Lighthouse su questo sito:
- Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Lighthouse.
- Fai clic su Dispositivo mobile.
- Seleziona la casella di controllo Rendimento.
- Deseleziona le altre caselle di controllo nella sezione Controlli.
- Fai clic su 3G rapido simulato, rallentamento della CPU 4x.
- Seleziona la casella di controllo Cancella dati archiviati. Se questa opzione è selezionata, Lighthouse non caricherà risorse dalla cache, simulando l'esperienza della pagina ai nuovi visitatori.
- Fai clic su Esegui controlli.
Quando esegui un controllo sul computer, i risultati esatti possono variare, ma nella visualizzazione della sequenza noterai che l'app ha una schermata vuota per un po' prima di eseguire il rendering dei contenuti. Questo è il motivo per cui il valore di First Contentful Paint (FCP) è elevato e perché il punteggio del rendimento complessivo non è ottimo.
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.
Ottimizza
- Fai clic su Remixa per modificare per rendere modificabile il progetto.
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 Critica, quindi richiama 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 critici
La tabella seguente contiene alcune utili opzioni fondamentali. Puoi controllare tutte le opzioni disponibili su GitHub.
| Opzione | Tipo | Spiegazione |
|---|---|---|
base |
stringa | La directory di base per i tuoi file. |
src |
stringa | File sorgente HTML. |
dest |
stringa | La destinazione del file di output. Se il linguaggio CSS è incorporato, il file di output è HTML. In caso contrario, l'output è un file CSS. |
width, height |
numeri | Larghezza e altezza dell'area visibile in pixel. |
dimensions |
matrice | Contiene oggetti con proprietà di larghezza e altezza. Questi oggetti rappresentano le aree visibili 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 codice CSS critico generato viene incorporato nel file sorgente HTML. |
minify |
booleano | Se impostato su true, il campo Critico minimizza il CSS critico generato. Può essere omesso durante l'estrazione del codice CSS critico per più risoluzioni, perché questo valore lo minimizza 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 sperimenta 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. Critical prima legge il file sorgente HTML, estrae il codice CSS critico e poi sovrascrive index.html con il codice CSS critico incorporato nel campo <head>.
L'array dimensions ha due dimensioni dell'area visibile: 300 x 500 per gli schermi extra piccoli e 1280 x 720 per gli schermi dei laptop standard.
L'opzione minify è omessa perché l'opzione Critica minimizza automaticamente il CSS estratto se sono specificate più dimensioni dell'area visibile.
Esegui critica
Aggiungi Criticità ai tuoi script in package.json:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- Fai clic su Terminale. Nota: se il pulsante Terminale non viene visualizzato, potresti dover utilizzare l'opzione Schermo intero.
Per generare CSS critici, nella console esegui:
npm run critical
refresh
Ora, nel tag <head> di index.html, il codice CSS critico generato è incorporato tra i tag <style>, seguito da uno script che carica il resto del codice CSS in modo asincrono.
Misura di nuovo
Segui i passaggi dall'inizio del codelab per eseguire di nuovo il controllo delle prestazioni di Lighthouse. I risultati ottenuti saranno simili a questi:
