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, rendendo CSS una risorsa che blocca la visualizzazione. Se i file CSS sono di grandi dimensioni o se le condizioni di rete sono scadenti, le richieste di file CSS possono aumentare significativamente il tempo necessario per il rendering di una pagina web.
L'incorporamento degli stili estratti in <head> del documento HTML elimina la necessità di effettuare un'ulteriore richiesta per recuperare questi stili. Il resto del CSS può essere caricato in modo asincrono.
Il miglioramento dei tempi di rendering può fare un'enorme differenza nelle prestazioni percepite, soprattutto in condizioni di rete scadenti. Sulle reti mobili, la latenza elevata è un problema indipendentemente dalla larghezza di banda.
Se hai un errore First Contentful Paint (FCP) e vedi il messaggio "Elimina le risorse di blocco della visualizzazione" nei controlli di Lighthouse, è una buona idea provare a usare i CSS essenziali.
Per ridurre al minimo il numero di round trip per la prima visualizzazione, 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 generale, maggiore è il CSS di un sito, maggiore sarà il possibile impatto dei CSS incorporati.
Panoramica degli strumenti
Esistono diversi ottimi strumenti in grado di determinare automaticamente il CSS fondamentale per una pagina. Questa è una buona notizia, perché farlo manualmente sarebbe una procedura noiosa. Richiede l'analisi dell'intero DOM per determinare gli stili applicati a ciascun elemento nell'area visibile.
Critico
Critical estrae, minimizza e incorpora il CSS above the fold ed è disponibile come modulo npm. Può essere usato con Gulp (direttamente) o con Grunt (come plug-in) ed è disponibile anche un plug-in webpack.
È uno strumento semplice che richiede molto impegno. Non è necessario specificare i fogli di stile, in quanto Critici li rileva automaticamente. Supporta anche l'estrazione di CSS fondamentali per diverse risoluzioni dello schermo.
criticalCSS
CriticalCSS è un altro modulo npm che estrae CSS above the fold. È disponibile anche come interfaccia a riga di comando.
Non offre opzioni per incorporare e minimizzare le risorse CSS fondamentali, ma 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 dietro le quinte e presenta anche una versione in hosting online.
Penthouse non rileva automaticamente i fogli di stile, devi specificare i file HTML e CSS per i quali vuoi generare CSS critici. L'aspetto positivo è che è in grado di eseguire molti job in parallelo.