Guida al CSS per un sito veloce e performante (ma anche bello)
Il CSS o Fogli di Stile a Cascata è il linguaggio informatico che governa l’estetica delle pagine web e regola la formattazione stilistica dei siti e delle relative pagine web. In pratica, è lo strumento chiave per i web designer che desiderano costruire pagine web esteticamente piacevoli, funzionali e accessibili, garantendo al contempo una manutenzione semplificata e una migliore performance complessiva del sito. Come tanti altri elementi, però, dobbiamo “maneggiarlo con cura”: se non implementiamo queste regole in modo corretto, infatti, il CSS può diventare pesante e rallentare le prestazioni del nostro progetto. Vediamo insieme le informazioni principali sui fogli di stile e quali sono gli interventi che possono alleggerire e ottimizzare il CSS per rendere il sito più veloce.
Che cos’è il CSS, il linguaggio per creare lo stile del sito
Prima di affrontare gli aspetti tecnici, partiamo con le necessarie definizioni e con la storia del CSS.
L’acronimo CSS sta per Cascading Style Sheets, traducibile in italiano con fogli di stile a cascata, ed è il codice usato per modellare il layout e lo stile visivo delle pagine web e di tutto il sito.
Più precisamente, è il linguaggio di stile che definisce la presentazione di un documento scritto in un linguaggio di markup come HTML: senza di esso, i siti sarebbero poco più che pagine di testo grezzo e immagini disordinate. Il CSS descrive come gli elementi devono essere visualizzati sullo schermo, su carta, nella lettura ad alta voce o su altri media, e si applica alla la presentazione di un documento scritto in HTML o XML (compresi vari linguaggi basati su XML come SVG o XHTML).
È uno strumento essenziale per i web designer e gli sviluppatori, poiché permette di separare il contenuto della pagina (HTML) dalla sua presentazione (stile e layout): ciò significa che, invece di incorporare stili direttamente all’interno del codice HTML, si possono definire regole stilistiche separate che determinano come gli elementi della pagina dovrebbero apparire.
Cosa si intende con CSS e come funzionano i fogli di stile
Secondo gli esperti, il CSS non è propriamente un linguaggio di programmazione, ma piuttosto un linguaggio di stile o, meglio ancora, una raccolta di regole di formattazione che controllano l’aspetto del contenuto di una pagina Web. La grande novità sta nel fatto che questo insieme è universalmente condiviso da tutti i browser, permettendo di applicare un singolo stile agli elementi dei documenti web e di istruire browser o un altro programma-utente sulla resa finale del documento da presentare all’utente.
C’è un’altra rilevante caratteristica distintiva dei CSS: questa tecnologia permette di disaccoppiare il contenuto dal suo design di presentazione. Vale a dire che il codice HTML, che costituisce la struttura di una pagina, viene mantenuto separato dalle regole stilistiche che ne definiscono l’aspetto, che possono essere alloggiate in un file distinto, noto come foglio di stile esterno, o integrate all’interno della sezione <head> del documento HTML.
Questa separazione tra struttura e presentazione si traduce in una gestione più efficiente del sito web: ad esempio, modificare l’aspetto di un sito diventa un’operazione centralizzata, che non richiede interventi ripetuti su ogni singola pagina, ma può essere condotta modificando un unico insieme di regole CSS. Di conseguenza, il codice HTML risulta più snello e ordinato, favorendo tempi di caricamento ridotti e un’esperienza utente migliorata, anche per coloro che si affidano a tecnologie assistive come gli screen reader.
Con i CSS, poi, la personalizzazione visiva raggiunge livelli di precisione e flessibilità senza precedenti. È possibile dettagliare ogni aspetto del testo, dalla scelta dei font e delle loro dimensioni, all’applicazione di stili come il grassetto o il corsivo, fino alla definizione di colori per il testo, lo sfondo e i link. Questo controllo minuzioso si estende anche agli elementi di blocco, come intestazioni, paragrafi e contenitori <div>, che possono essere formati con margini, bordi, posizionamenti specifici e sfondi colorati. La manipolazione di questi elementi è fondamentale per strutturare il layout di una pagina, permettendo di creare strutture complesse e responsive che si adattano ai diversi dispositivi di visualizzazione.
CSS e regole di stile: gli elementi e le caratteristiche principali
Tecnicamente, quindi, il CSS è un linguaggio dichiarativo che consente ai web designer e sviluppatori di separare il contenuto della pagina (come il testo e le immagini) dalla presentazione della pagina (come il design, i colori, i font e il layout).
Di fondo, questo linguaggio è composto da una serie di regole, note come “regole di stile”, che sono interpretate dai browser per applicare gli stili agli elementi del documento web.
Ogni regola di stile è composta da un selettore e da un blocco di dichiarazioni: il selettore punta agli elementi HTML che si desidera stilizzare, mentre il blocco di dichiarazioni contiene una o più dichiarazioni separate da punto e virgola, ciascuna delle quali include una proprietà dello stile e un valore assegnato a quella proprietà. Ad esempio, in
h1 {
color: blue;
font-size: 14px;
}
h1 è il selettore che si riferisce all’elemento HTML <h1>, e le dichiarazioni all’interno delle parentesi graffe definiscono che gli elementi <h1> dovrebbero essere visualizzati con il colore del testo blu (color: blue;) e una dimensione del font di 14 pixel (font-size: 14px;).
Guardiamo quali sono gli elementi principali che compongono il CSS e i concetti chiave da conoscere per creare la struttura e il design di una pagina web, consentendo ai designer di controllare con precisione come gli elementi HTML sono visualizzati nel browser. In linea di massima, un foglio di stile CSS si struttura sintatticamente come una sequenza di regole che possono eventualmente essere accompagnate da note di commento e da una o più direttive @-rule.
Le regole sono coppie costituite da un selettore e un blocco di dichiarazioni, racchiuso tra parentesi graffe; il selettore serve a individuare gli elementi del documento HTML in cui andrà applicata la regola, mentre la dichiarazione (separata con un punto e virgola dalle altre) si compone di una proprietà (un tratto di stile da applicare all’elemento da modificare) e del corrispettivo valore.
Tra le varie norme da rispettare ne citiamo due: ogni dichiarazione deve contenere solo una proprietà, ma è possibile specificare più valori; inoltre, gli spazi bianchi in una regola non influiscono sul risultato e spesso gli spazi vuoti sono utili per migliorare la leggibilità.
Più precisamente:
- Cascading. Il termine “cascading” (a cascata) presente nel nome stesso si riferisce alla maniera in cui le regole di stile si sovrappongono e come vengono applicate le priorità. Se più regole di stile hanno lo stesso selettore o si applicano allo stesso elemento, il browser deve decidere quale regola “vince” e viene applicata. Questo processo è determinato da diversi fattori, tra cui la specificità del selettore, l’importanza (regole contrassegnate con !important), l’origine della regola di stile (stile dell’utente, dello sviluppatore o del browser) e l’ordine in cui le regole appaiono nel CSS. Il sistema di cascata permette una grande flessibilità e controllo nella definizione degli stili, assicurando che le regole di stile siano applicate in modo coerente e prevedibile.
- Selettori. I selettori sono pattern che identificano gli elementi HTML ai quali le regole di stile devono essere applicate. Possono essere semplici, come i selettori di tag (es. pper i paragrafi), di classe (es. .classe-esempio), di ID (es. #id-esempio), o più complessi, come i selettori di attributo, pseudo-classi e pseudo-elementi.
- Dichiarazioni. Una dichiarazione è un singolo comando che assegna un valore a una specifica proprietà CSS. Una dichiarazione è sempre composta da una proprietà e un valore, separati da due punti (es. color: red;).
- Proprietà. Le proprietà sono i tipi di caratteristiche che si possono controllare con il CSS, come il colore, il margine, il bordo, il padding, il font, il background, eccetera. Ogni proprietà ha un set di valori validi che possono essere assegnati.
- Valori. I valori sono assegnati alle proprietà per definire l’aspetto degli elementi HTML. Possono essere dimensioni (es. px, em, %), colori (es. #FFFFFF, rgb(255,255,255), black), font (es. Arial, serif), e molti altri tipi di valori.
- Regole o Regole di Stile. Una regola di stile è una combinazione di un selettore e un blocco di dichiarazioni. Una regola indica al browser come visualizzare gli elementi selezionati (es. h1 { font-size: 14px; color: blue; }).
- Blocchi di Dichiarazioni. Un blocco di dichiarazioni è un insieme di una o più dichiarazioni racchiuse tra parentesi graffe {}. Un blocco di dichiarazioni segue un selettore e definisce come gli elementi selezionati devono essere stilizzati.
- Fogli di Stile. Un foglio di stile è un insieme di regole di stile, che possono essere incorporati direttamente in un documento HTML, collegati come file esterni, o inclusi come stili interni in un elemento <style>all’interno dell’head del documento.
- Commenti. I commenti in CSS sono utilizzati per spiegare il codice e sono ignorati dai browser. Sono utili per la documentazione e per rendere il codice più leggibile. I commenti in CSS sono racchiusi tra /*e */ (es. /* Questo è un commento */).
Come accennato, ci sono essenzialmente tre metodi differenti di implementazione del CSS in una pagina web o in un intero sito web:
- Stili in linea (Inline Styles). Gli stili in linea, o inline styles, sono regole di stile scritte direttamente nell’attributo styledi un elemento HTML. Questi stili hanno la massima priorità nella cascata perché sono applicati direttamente all’elemento e influenzano solo l’elemento specifico a cui sono applicati. Possono essere utili per testare rapidamente stili o per applicare stili che devono sovrascrivere tutte le altre regole CSS, ma sono generalmente evitati perché rendono il codice meno leggibile, più difficile da mantenere e non seguono il principio di separazione tra contenuto e presentazione; inoltre, il riuso di codice è minimo.
<p style="color:blue; font-size:14px;">Paragrafo con stili interni.</p>
- Fogli di stile interni (Internal Stylesheets). I fogli di stile interni sono blocchi di codice CSS situati all’interno di un elemento <style>nel <head> di un documento HTML. Questi stili si applicano solo alla pagina corrente (per la precisione, a tutti gli elementi della pagina che corrispondono ai selettori definiti nel CSS) e sono utili per stili specifici di una singola pagina, senza influenzare altre pagine, o quando si ha una piccola quantità di codice CSS. Consentono di mantenere il CSS separato dal contenuto HTML, pur essendo parte dello stesso documento, ma il riuso di codice è inferiore. Un esempio:
<style>
h1 {
color: red;
}
</style>
- Fogli di stile esterni (External Stylesheets). I fogli di stile esterni sono file CSS separati che vengono collegati a un documento HTML (contrassegnato dall’estensione .css.) tramite l’elemento <link> o la direttiva import (che serve anche a collegare tra loro più file .css). Questo metodo è il più efficiente per la gestione degli stili su un intero sito web, poiché permette di mantenere il CSS in file separati che possono essere caricati da più pagine, garantendo coerenza e facilitando la manutenzione. Inoltre, è la soluzione che garantisce il massimo riuso di codice, perché ogni pagina HTML desiderata richiama lo stesso file esterno. Un esempio:
<link rel="stylesheet" type="text/css" href="stile.css">
Qual è la differenza tra CSS e HTML?
Abbiamo citato più volte HTML, ovvero HyperText Markup Language, che sappiamo essere un linguaggio fondamentale per il web, ed è quindi utile comprendere che ruolo ha nella creazione delle pagine dei nostri siti e che “relazione” ha con i Cascading Style Sheets.
HTML è il linguaggio di markup che viene utilizzato per strutturare e organizzare il contenuto di una pagina web; definisce gli elementi base come testo, immagini, video, link e altri contenuti. Gli elementi HTML sono rappresentati da tag come <p> per i paragrafi, <img> per le immagini e <a> per i link: i tag HTML non solo organizzano il contenuto in una gerarchia logica e comprensibile sia per gli utenti che per i browser, ma forniscono anche informazioni semantiche che descrivono il tipo di contenuto presente nella pagina.
CSS, come descritto, è invece il linguaggio che descrive la presentazione visiva di questi elementi HTML.
Possiamo dire che HTML si occupa della struttura, mentre CSS si concentra sull’aspetto estetico, definendo il modo in cui gli elementi dovrebbero apparire sullo schermo. Con il CSS, i designer possono controllare il layout, i colori, i font, le dimensioni, i margini, i bordi, il background e altri aspetti visivi che rendono la pagina attraente e leggibile; inoltre, il CSS può anche essere utilizzato per creare animazioni e adattare il design della pagina a diversi dispositivi e dimensioni dello schermo, tramite il design reattivo.
La differenza fondamentale tra HTML e CSS è quindi il loro scopo: HTML è usato per creare la struttura di base della pagina, mentre CSS è utilizzato per controllare l’aspetto estetico e il layout. Senza HTML, non ci sarebbe una struttura su cui applicare lo stile, e una pagina web non potrebbe esistere. Senza CSS, la pagina esisterebbe ma avrebbe un aspetto molto basilare e meno coinvolgente, simile a un documento di testo semplice.
I vantaggi dei Cascading Style Sheets, i fogli di stile a cascata
I Cascading Style Sheets sono stati sviluppati quindi per separare i contenuti delle pagine HTML dagli elementi di formattazione o layout e consentire una programmazione più chiara e facile, sia per i programmatori sia per gli utenti, garantendo contemporaneamente anche il riutilizzo di codice e una manutenzione più semplice.
Oggi il CSS è largamente considerato un linguaggio potente e versatile che serve a migliorare l’estetica, la coerenza, l’usabilità e la performance di un sito web.
Prima di tutto, garantisce la coerenza del design su tutto il sito web: definendo uno stile in un unico file CSS, si può assicurare che tutti gli elementi corrispondenti su diverse pagine mantengano lo stesso aspetto, senza la necessità di duplicare lo stile in ogni pagina. Questo non solo semplifica la manutenzione del sito, ma riduce anche il carico di lavoro e il potenziale per inconsistenze.
Un altro vantaggio significativo del CSS è la sua capacità di migliorare l’accessibilità e l’usabilità di un sito web: con questi fogli è possibile creare layout reattivi che si adattano a diversi dispositivi e dimensioni dello schermo, garantendo che il sito sia facilmente navigabile sia su desktop che su dispositivi mobili.
Inoltre, l’uso del CSS può influenzare positivamente la velocità di caricamento di un sito web: separando il design dal contenuto, i file HTML possono essere significativamente più leggeri e, di conseguenza, più veloci da caricare.
Infine, il CSS è utile per la sua flessibilità e controllo creativo: permette di realizzare design complessi e visivamente attraenti, con effetti come animazioni, ombre, gradienti e molto altro, che possono aiutare a distinguere un sito web e a catturare l’attenzione dell’utente.
La storia del CSS, dalla prima versione alle ultime release
Il CSS è mantenuto dal World Wide Web Consortium (W3C) e la sua specifica è implementata dai browser web. Con il passare degli anni, il CSS è stato sviluppato in diverse versioni, aggiungendo sempre più funzionalità e capacità per creare layout web complessi e reattivi.
Tornando alle origini, l’ideazione dei fogli di stile si lega in maniera diretta con il linguaggio HTML, di cui è in qualche modo un ideale complemento all’insegna della filosofia separare il contenuto dalla presentazione. Nelle intenzioni del W3C, infatti, HTML dovrebbe essere visto e usato come linguaggio strutturale, senza informazioni grafiche o di stile sulla presentazione del documento, mentre invece il CSS ha il compito di arricchire l’aspetto visuale della pagina.
La prima versione ufficiale del CSS (chiamata successivamente CSS 1) è stata presentata nel dicembre del 1995; la specifica CSS 2 è stata rilasciata nel maggio 1998, a cui ha fatto seguito CSS 2.1 il 7 giugno 2011. È stata poi la volta delle specifiche (o per meglio dire del sistema di specifiche modulari) del CSS 3, costituite da sezioni separate dette “moduli”, che sono state pubblicate a intervalli temporali differenti fino al giugno 2018. Dall’inizio del 2020 un gruppo del W3C Community starebbe lavorando alla definizione della nuova versione, che dovrebbe chiamarsi CSS 4: sul suo effettivo rilascio, però, ci sono vari dubbi, essenzialmente perché non sembra esserci nessuna esigenza “tecnica” per la sua nascita, data la scalabilità pressoché infinita di CSS 3.
Ad ogni modo, la storia del CSS è un viaggio affascinante attraverso l’evoluzione del web design e della presentazione dei contenuti online. Tutto inizia nel 1994, quando Håkon Wium Lie, un ricercatore al CERN, propone l’idea di un linguaggio di stile per il web: il suo obiettivo era migliorare la flessibilità e l’accessibilità dei documenti web, permettendo agli utenti di definire come i contenuti dovevano essere visualizzati sui loro browser. Questa proposta fu accolta con entusiasmo da Bert Bos, un altro pioniere del web, che stava lavorando su un proprio linguaggio di stile chiamato Argo: i due unirono le forze e il risultato fu la prima bozza di quello che sarebbe diventato il CSS.
Nel dicembre del 1996, il World Wide Web Consortium (W3C), l’organizzazione internazionale che sviluppa standard aperti per garantire la crescita a lungo termine del Web, pubblicò la prima versione ufficiale del CSS, nota come CSS 1. Questa versione forniva un set di base di proprietà di stile che consentivano ai designer di controllare aspetti come font, colori, margini, e altro. Tuttavia, CSS1 aveva le sue limitazioni e non supportava alcune caratteristiche avanzate di layout che i designer richiedevano.
Per superare queste limitazioni, il W3C introdusse CSS 2 nel 1998, che aggiungeva nuove funzionalità come il posizionamento assoluto e relativo degli elementi, z-index per il controllo dell’ordine di sovrapposizione degli elementi, e la possibilità di creare layout più complessi. Nonostante questi miglioramenti, l’implementazione del CSS 2 nei browser fu inizialmente irregolare, portando a problemi di coerenza tra diversi browser.
Con l’avvento di CSS 3, introdotto negli anni 2010 e sviluppato in moduli separati per facilitarne l’adozione e l’implementazione, il CSS ha fatto un salto di qualità: questa versione ha infatti introdotto una moltitudine di nuove proprietà e concetti, come le media queries per i design reattivi, le animazioni, le transizioni, e le trasformazioni, che hanno permesso ai designer di creare esperienze utente dinamiche e interattive. Oggi il CSS continua a evolversi con l’aggiunta di nuove proprietà e funzionalità, e la sua implementazione è diventata molto più coerente tra i diversi browser, grazie agli sforzi di standardizzazione del W3C e al lavoro della comunità di sviluppatori.
CSS e SEO: un rapporto complesso e rilevante
Il CSS è insomma molto più di un semplice strumento per rendere un sito “carino” o “bello da vedere”: è una componente fondamentale che, se utilizzata correttamente, può migliorare significativamente la visibilità di un sito web nei risultati di ricerca, contribuendo così al successo complessivo di una strategia digitale.
Il rapporto tra CSS e SEO è infatti complesso e sfaccettato, perché i fogli di stile influiscono su molti dei fattori che gli algoritmi dei motori di ricerca utilizzano per indicizzare e classificare i siti web.
In primo luogo, il CSS contribuisce alla velocità di caricamento di una pagina, che è un fattore di ranking noto: un codice pulito e ottimizzato può ridurre i tempi di caricamento eliminando ridondanze, utilizzando tecniche di compressione e minimizzazione, e sfruttando la cache del browser. Questo non solo migliora l’esperienza dell’utente, ma segnala anche ai motori di ricerca che il sito è ben mantenuto e performante, aspetti premianti nei risultati di ricerca.
Inoltre, il CSS ha un impatto diretto sull’usabilità e l’accessibilità del sito: un design reattivo, che si adatta fluidamente a diverse dimensioni di schermo e dispositivi, è essenziale per raggiungere un pubblico più ampio e garantire un’esperienza utente positiva. Ancora, Il CSS permette di presentare il contenuto in modo che sia visivamente attraente per gli utenti, ma anche facilmente interpretabile dai motori di ricerca: un suo utilizzo corretto può aiutare a evidenziare informazioni importanti, come titoli e parole chiave, senza ricorrere a tecniche di occultamento che possono essere penalizzate dai motori di ricerca.
Tuttavia, un uso improprio del CSS può avere effetti negativi sulla SEO, trascendendo addirittura in tattiche Black Hat: ad esempio, se il CSS viene utilizzato per nascondere contenuto che è presente solo per influenzare i motori di ricerca, questo può essere considerato come una pratica ingannevole e portare a penalizzazioni. Inoltre, un eccessivo utilizzo di CSS in-line o incorporato direttamente nelle pagine HTML può aumentare la dimensione della pagina e influire negativamente sulla velocità di caricamento.
Come ottimizzare il CSS del sito
Chiusa questa parentesi generale, proviamo a vedere quali sono i consigli per migliorare la gestione del codice sulle nostre pagine e per evitare di gravare sulle performance del sito. In nostro supporto arrivano le guide del blog web.dev, che dedicano alcune lezioni alle best practices per il CSS.
Il primo suggerimento è di Demian Renzulli, Senior Web Ecosystems Consultant presso Google, ed è “differire il CSS non critico”.
Rinviare il caricamento di codice non cruciale
I file CSS sono risorse che bloccano il rendering, ci spiega il Google, perché devono essere caricati ed elaborati prima che il browser esegua il rendering della pagina; di conseguenza, le pagine Web che contengono stili inutilmente grandi richiedono più tempo per il rendering.
Con la tecnica del differimento è possibile ottimizzare il percorso critico di rendering e migliorare il First Contentful Paint, elemento importante per offrire un’esperienza veloce agli utenti.
Ridurre il CSS inutilizzato
Per spiegare il metodo di semplificazione del CSS, Renzulli porta l’esempio di una pagina che richiede un file CSS con otto classi, non tutte sono necessarie per rendere il contenuto “visibile”: una gestione più accorta farà caricare in modo sincrono solo gli stili critici, lasciando caricare gli altri (come quelli applicati ai paragrafi) in modo non bloccante.
Lo strumento per verificare l’impatto del codice sulla velocità del sito è Google Lighthouse, che segnala anche con un suggerimento chiamato Remove Unused CSS la presenza in pagina di almeno 2048 byte di regole CSS che non vengono utilizzate durante il rendering del contenuto above the fold. Il rischio infatti è che il browser debba attendere il caricamento e l’elaborazione di tutti i CSS prima di dipingere un singolo pixel sullo schermo.
Individuare il CSS critico
Per ottimizzare la pagina è comunque necessario sapere quali classi sono considerate “critiche”: Google ha sviluppato uno strumento – il Coverage Tool contenuto nei DevTools di Chrome – che permette di verificare la copertura della singola pagina e di capire, anche visivamente, quali sono le risorse CSS critiche e quelle che invece non lo sono.
Critiche (indicate in verde) sono le classi necessarie al browser per renderizzare il contenuto visibile (come i pulsanti titolo, sottotitolo e accordion); non critici (in rosso nel tool) sono invece gli stili che si applicano a contenuti non immediatamente visibili (come i paragrafi all’interno delle accordion).
Con queste informazioni possiamo ottimizzare il CSS in modo che il browser inizi a elaborare gli stili critici immediatamente dopo il caricamento della pagina, rimandando i CSS non critici a un momento successivo.
Minimizzare il codice CSS
Il secondo procedimento che possiamo attuare è la tecnica della minificazione (minify), ovvero la riduzione al massimo dei file CSS: a volte, il codice può contenere caratteri non necessari, come commenti, spazi bianchi e rientri, e tali caratteri possono essere rimossi in modo sicuro in produzione, per ridurre le dimensioni del file senza influire sul modo in cui il browser elabora gli stili.
Già in fase di stesura del codice è possibile evitare appesantimenti che possono essere rimossi – come, ad esempio, spazi a scopo di rientro o commenti, che vengono ignorati dal browser; stili che è possibile raggruppare o indicazioni imprecise per il colore di font e background – ma in alternativa ci sono tool di compilazione automatica e processi webpack per questo scopo.
Estrarre CSS critico
La terza tecnica presentata – da un’altra Googler, la sviluppatrice Milica Mihajlija – è l’estrazione del CSS critico: come dicevamo prima, il browser deve scaricare e analizzare i file CSS prima di poter mostrare la pagina, il che rende il codice una risorsa rendering-blocking. Se i file sono grandi o le condizioni della rete sono scarse, le richieste dei file CSS possono aumentare significativamente il tempo necessario per il rendering di una pagina Web.
Con questa tecnica possiamo estrarre il CSS per contenuti above the fold al fine di rendererizzarli all’utente il più rapidamente possibile: l’inserimento di stili estratti nell’<head> del documento HTML elimina la necessità di effettuare una richiesta aggiuntiva per recuperare questi stili, e il resto del codice può essere caricato in modo asincrono.
I vantaggi di questa operazione
Il miglioramento dei tempi di rendering può fare un’enorme differenza nelle prestazioni percepite dagli utenti, soprattutto in condizioni di rete scadenti; per le reti mobili, l’alta latenza è un problema indipendente dalla larghezza di banda.
Esistono numerosi ottimi strumenti che possono determinare automaticamente il CSS critico per una pagina, un processo complesso che richiede un’analisi dell’intero DOM per determinare gli stili applicati a ciascun elemento nella finestra. L’impatto sulle prestazioni che possiamo ottenere con questa tecnica dipende dal tipo di sito web: in generale, più CSS ha un sito, maggiore è il potenziale impatto dei CSS incorporati.
Mihajlija invita anche a ricordare che inserire una grande quantità di CSS ritarda la trasmissione del resto del documento HTML: se tutto ha la priorità, scrive, allora nulla lo ha. L’inserimento inline ha anche alcuni aspetti negativi perché impedisce al browser di memorizzare nella cache il CSS per riutilizzarlo ai successivi caricamenti di pagina, quindi è meglio usarlo con parsimonia.
Offrire contenuti rapidamente
Se il nostro sito ha valori scarsi di First Contentful Paint (FCP) e intravediamo la segnalazione “Elimina risorse di blocco rendering” negli audit di Lighthouse, è una buona idea provare la tecnica dei CSS critici. Per ridurre al minimo il numero di round trip per il primo rendering, l’obiettivo è mantenere il contenuto above-the-fold sotto 14 KB (compresso).
Questo valore non è ovviamente casuale: le nuove connessioni TCP non possono utilizzare immediatamente tutta la larghezza di banda disponibile tra il client e il server e passano tutte attraverso lo slow-start per evitare di sovraccaricare la connessione con più dati di quanti ne possano trasportare. In questo processo, il server avvia il trasferimento con una piccola quantità di dati e, se raggiunge il client in perfette condizioni, raddoppia la quantità nel successivo roundtrip. Per la maggior parte dei server, 10 pacchetti o circa 14 KB è la dimensione massima che può essere trasferita nel primo roundtrip.
Ottimizzare le immagini di sfondo CSS con media query
Molti siti richiedono risorse pesanti, come le immagini, che non sono ottimizzate per determinati schermi e inviano file CSS di grandi dimensioni che contengono stili che alcuni dispositivi non useranno mai, scrive Renzulli presentando l’ultimo metodo di ottimizzazione del CSS suggerito da Google.
L’uso di media query è una tecnica popolare per fornire fogli di stile e risorse su misura dei diversi display, ridurre la quantità di dati trasferiti agli utenti e migliorare le prestazioni di caricamento della pagina. Si tratta, in sintesi, di imparare a usare il codice per fornire immagini reattive o responsive senza sovraccaricarlo.
Per farlo, possiamo usare la regola @media possiamo e implementare uno sfondo reattivo – tecnica ampiamente supportata da tutti i browser – oppure usare una nuova funzionalità CSS: image-set(), che ha lo stesso scopo ma impegna meno righe di codice (ma al momento non è ancora supportata da tutti i browser).
In questo modo, possiamo servire immagini di sfondo su misura per schermi di dimensioni specifiche e salvare byte quando il visitatore accede al sito su dispositivi più piccoli, come i telefoni cellulari.
