Mi occupo di velocizzare siti internet; qui colleziono alcune guide utili, senza dover scrivere troppo
Rimuovere CSS inutilizzato
Appare in: Audit delle prestazioni
La sezione Opportunità del rapporto Lighthouse elenca tutti i fogli di stile con CSS inutilizzati con un potenziale risparmio di almeno 2 KiB. Rimuovi il CSS inutilizzato per ridurre i byte non necessari consumati dall’attività di rete:
In che modo il CSS inutilizzato rallenta le prestazioni ?
L’uso di un tag <link> è un modo comune per aggiungere stili a una pagina:
<! Doctype html>
<html>
<head>
<link href =”main.css” rel =”stylesheet”>
</head>
…
Il main.css scaricato dal browser è noto come foglio di stile esterno, poiché è memorizzato separatamente dall’HTML che lo utilizza.
Per impostazione predefinita, un browser deve scaricare, analizzare ed elaborare tutti i fogli di stile esterni che incontra prima di poter visualizzare o eseguire il rendering di qualsiasi contenuto sullo schermo di un utente. Non avrebbe senso per un browser tentare di visualizzare il contenuto prima che i fogli di stile siano stati elaborati, poiché i fogli di stile possono contenere regole che influiscono sullo stile della pagina.
Ogni foglio di stile esterno deve essere scaricato dalla rete. Questi viaggi di rete extra possono aumentare significativamente il tempo che gli utenti devono attendere prima di vedere qualsiasi contenuto sui loro schermi.
I CSS inutilizzati rallentano anche la strutturaun browser dell’albero di rendering di. L’albero di rendering è simile all’albero DOM, tranne per il fatto che include anche gli stili per ciascun nodo. Per costruire l’albero di rendering, un browser deve percorrere l’intero albero DOM e verificare quali regole CSS si applicano a ciascun nodo. Più CSS non viene utilizzato, maggiore è il tempo che un browser potrebbe potenzialmente impiegare a calcolare gli stili per ciascun nodo.
Come rilevare CSS inutilizzato?
La scheda Copertura di Chrome DevTools può aiutarti a scoprire CSS critici e non critici.
Chrome DevTools: scheda Copertura.
Puoi anche estrarre queste informazioni da Puppeteer.
CSS Inline critico e defer del CSS non critico
Simile a inlining codice in un <script>, tag gli stili inline critici necessari per la prima vernice all’interno di un <style> blocco alla testa della pagina HTML. Quindi caricare il resto degli stili in modo asincrono utilizzando il precaricamento collegamento di.
Prendi in considerazione l’idea di automatizzare il processo di estrazione e integrazione del CSS “Above the Fold” utilizzando lo strumento Critico.
