Quando il CSS viene raggruppato in un unico file, anche dopo il tree-shaking, contiene inevitabilmente una grande quantità di codice CSS non utilizzato a causa dei diversi contesti @media (mobile, tablet, desktop, temi chiaro/scuro/altro, ecc.).
Questo è dannoso per i Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), oltre che per altre metriche fondamentali di performance e usabilità come First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) e l’evento DOMContentLoaded.
Esiste un modo per migliorare notevolmente il caricamento e il rendering del CSS: separare il CSS in file distinti, dove ciascun file contiene solo il codice necessario per uno specifico contesto.
Suddividi il tuo CSS in file distinti:
📄main.css - contiene il CSS necessario per tutte le condizioni @media
📄screen.css - contiene il CSS necessario solo per la condizione @media screen
📄print.css - contiene il CSS necessario solo per la condizione @media print
📂breakpoints
📄x-small.css - contiene il CSS necessario solo per il breakpoint X-Small
📄sm.css - contiene il CSS necessario solo per il breakpoint Small
📄md.css - contiene il CSS necessario solo per il breakpoint Medium
📄lg.css - contiene il CSS necessario solo per il breakpoint Large
📄xl.css - contiene il CSS necessario solo per il breakpoint Extra large
📄xxl.css - contiene il CSS necessario solo per il breakpoint Extra extra large
📂themes
📄light.css - contiene il CSS necessario solo per il tema chiaro
📄dark.css - contiene il CSS necessario solo per il tema scuroSuccessivamente, includi i file CSS in questo modo:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">Grazie a questo approccio, i browser moderni danno priorità al caricamento del CSS relativo alle condizioni @media correnti, pertanto il rendering della pagina inizia molto più rapidamente perché gli utenti non devono attendere il caricamento della parte di CSS non utilizzata.
Al contrario, quando tutto il CSS è raggruppato in un unico file e non vengono specificate condizioni negli attributi ‘media’ dei tag ‘link’, il browser attende il caricamento completo del CSS prima di avviare il rendering, rallentando drasticamente il processo.
In questo esempio, i breakpoint sono basati su Bootstrap 5. Questo approccio diventerà ancora più rilevante per Bootstrap in futuro, considerando che aggiungeranno il supporto per temi chiari/scuri e altri.
Se desideri contribuire a rendere il web migliore e più veloce, ti preghiamo di:
- condividi questo articolo,
- invia questo articolo agli sviluppatori dei framework che utilizzi,
- implementa questa suddivisione del CSS sui tuoi siti.
Condividi sui social media o salvalo per dopo:
Se desideri approfondire questa ottimizzazione e il comportamento del browser, consulta le seguenti risorse:
- L’articolo “Conditionally adaptive CSS. Browser behavior that might improve your performance” di Vadim Makeev. L’immagine di copertina di questo articolo proviene dal suo eccellente articolo, dove troverai ulteriori screenshot ed esperimenti.
- MDN Web Docs: Ottimizzazione delle prestazioni CSS.