Scopri come migliorare i tempi di rendering con una tecnica CSS fondamentale.
Il browser deve scaricare e analizzare i file CSS prima di poter mostrare la pagina, il che rende il CSS una risorsa di blocco della visualizzazione. Se i file CSS sono grandi o le condizioni di rete sono scadenti, le richieste di file CSS possono aumentare notevolmente il tempo necessario per la visualizzazione di una pagina web.
L'incorporamento degli stili estratti in <head> del documento HTML elimina la necessità di effettuare un'ulteriore richiesta per recuperarli. Il resto del codice CSS può essere caricato in modo asincrono.
Migliorare i tempi di rendering può fare un'enorme differenza in termini di prestazioni percepite, soprattutto in condizioni di rete scadenti. Sulle reti mobili, l'alta latenza è un problema indipendentemente dalla larghezza di banda.
Se la tua metrica First Contentful Paint (FCP) è scadente e noti che nei controlli di Lighthouse vedi l'opportunità"Elimina la risorsa che blocca la visualizzazione", ti consigliamo di provare i CSS più importanti.
Per ridurre al minimo il numero di round trip da visualizzare per la prima volta, cerca di mantenere i contenuti above the fold al di sotto dei 14 kB (compressi).
L'impatto sul rendimento che puoi ottenere con questa tecnica dipende dal tipo di sito web. In linea di massima, maggiore è il numero di CSS di un sito, maggiore sarà l'impatto possibile del codice CSS incorporato.
Panoramica degli strumenti
Esistono diversi ottimi strumenti in grado di determinare automaticamente il CSS fondamentale per una pagina. Questa è una buona notizia, perché eseguire questa operazione manualmente sarebbe una procedura noiosa. Richiede l'analisi dell'intero DOM per determinare gli stili da applicare a ciascun elemento nell'area visibile.
Critico
Critical estrae, minimizza e incorpora il CSS above the fold ed è disponibile come modulo npm. Può essere utilizzato con Gulp (direttamente) o con Grunt (come plugin) ed è disponibile anche un plug-in webpack.
È uno strumento semplice che richiede molto lavoro. Non è nemmeno necessario specificare i fogli di stile: la scheda Critica li rileva automaticamente. Supporta inoltre l'estrazione di CSS fondamentali per più risoluzioni dello schermo.
criticalCSS
CriticalCSS è un altro modulo npm che estrae CSS above the fold. È disponibile anche come interfaccia a riga di comando.
Non ha opzioni per incorporare e minimizzare il codice CSS critico, ma ti consente di forzare l'inclusione di regole che in realtà non appartengono al CSS critico e ti offre un controllo più granulare sull'inclusione delle dichiarazioni @font-face.
Penthouse
Penthouse è una buona scelta se il tuo sito o la tua app ha un numero elevato di stili o stili che vengono inseriti dinamicamente nel DOM (comune nelle app Angular). Utilizza Puppeteer in background e presenta anche una versione ospitata online.
Penthouse non rileva automaticamente i fogli di stile, devi specificare i file HTML e CSS per i quali vuoi generare CSS essenziali. Il lato positivo è che consente di eseguire molti job in parallelo.