Che tu utilizzi una libreria UI o crei i tuoi stili manualmente, la spedizione di una notevole quantità di ritardi CSS nel rendering, in quanto 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 questo spesso va a scapito di CSS gonfi e superflui, che possono rallentare i tempi di caricamento. Bootstrap 4 è di 187 kB, mentre Semantic UI, un'altra libreria UI, è di ben 730 kB non compresso. Anche quando minimizzato e compresso con g, 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 CSS above the fold. In questo modo, i contenuti above the fold possono essere visualizzati il prima possibile, anche se il codice CSS per altre parti della pagina non è stato ancora caricato. In questo codelab, imparerai a utilizzare il modulo npm di Critical.
Misura
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero
.
Per eseguire un controllo Lighthouse su questo sito:
- Premi "Control+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 Simulato Fast 3G, 4x CPU Slowdown.
- Seleziona la casella di controllo Cancella dati archiviati. Se questa opzione è selezionata, Lighthouse non caricherà le risorse dalla cache, simulando l'esperienza dei nuovi visitatori della pagina.
- Fai clic su Esegui controlli.
Quando esegui un controllo sul tuo computer, i risultati esatti possono variare, ma nella visualizzazione pellicola noterai che l'app ha una schermata vuota per un po' di tempo prima di eseguire il rendering dei contenuti. Questo è il motivo per cui il valore First Contentful Paint (FCP) è alto e il punteggio complessivo del rendimento non è ottimo.
Lighthouse ti aiuta a risolvere i problemi di prestazioni, perciò cerca soluzioni nella sezione Opportunità. L'eliminazione delle risorse che bloccano la visualizzazione è un'opportunità ed è qui che entra in gioco il punto critico.
Optimize
- Fai clic su Remix per modificare per rendere il progetto modificabile.
Per velocizzare le operazioni, Critical è già installato e nel codelab è incluso un file di configurazione vuoto.
Nel file di configurazione critical.js, aggiungi un riferimento a Critico e 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'efficacia dell'operazione nella console.
Configura Critica
La tabella seguente contiene alcune opzioni critiche utili. Puoi controllare tutte le opzioni disponibili su GitHub.
| Opzione | Tipo | Spiegazione |
|---|---|---|
base |
stringa | La directory di base per i file. |
src |
stringa | File sorgente 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 dell'area visibile in pixel. |
dimensions |
array | 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 CSS sono presenti query supporti, questo ti consente di generare codice CSS fondamentale che copre più dimensioni dell'area visibile. |
inline |
boolean | Se impostato su true, il CSS critico generato viene incorporato nel file sorgente HTML. |
minify |
boolean | Se impostato su true, la funzionalità Critical minimizza il CSS critico generato. Può essere omesso quando si estrae il codice CSS critico per più risoluzioni perché la metrica Critica la minimizza automaticamente per evitare l'inclusione di regole duplicate. |
Di seguito è riportato un esempio di configurazione per l'estrazione di CSS fondamentali per più risoluzioni. Aggiungilo a critical.js o prova a modificare le opzioni e modificale.
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 di origine HTML, estrae il codice CSS critico e quindi sovrascrive index.html con codice CSS critico incorporato in <head>.
L'array dimensions prevede due dimensioni dell'area visibile: 300 x 500 per gli schermi di dimensioni ridotte e 1280 x 720 per gli schermi di laptop standard.
L'opzione minify è omessa perché l'opzione Critica minimizza automaticamente il CSS estratto quando vengono specificate più dimensioni dell'area visibile.
Esegui critico
Aggiungi Critico 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, potrebbe essere necessario utilizzare l'opzione Schermo intero).
Per generare codice CSS fondamentale, nella console, esegui:
npm run critical
refresh
Ora, nel tag <head> di index.html, il codice CSS fondamentale generato è inserito tra i tag <style>, seguiti 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:
