Evitare CSS "dispendiosi" nei tuoi progetti

Sembra che i web designer cerchino costantemente di ottimizzare le loro creazioni. A breve termine questo avvantaggia le prestazioni. A lungo termine può anche semplificare la manutenzione.

Molto spesso, ciò significa ottimizzare le immagini, implementare la memorizzazione nella cache delle pagine e fornire file tramite una rete di distribuzione dei contenuti (CDN). Sono tutte misure efficaci. Ma un elemento che non riceve abbastanza attenzione è il potenziale rigonfiamento nel CSS di un sito web.

Sebbene tu possa minimizzare i tuoi fogli di stile o servirli su un CDN, si può fare di più. In particolare, eliminare lo spreco di markup che non viene utilizzato e rafforzare gli stili che sono ancora rilevanti.

È meglio farlo fin dall'inizio del processo di compilazione. Ma è anche possibile alleggerire il carico sui siti web esistenti. Diamo un'occhiata alle sfide coinvolte, insieme ad alcuni strumenti e tecniche che possono rendere più veloce un sito web.

Gestire il rigonfiamento integrato in temi e framework

In passato i siti Web erano essenzialmente costruiti da zero. Questo è stato un ottimo approccio in quanto i designer potevano includere solo gli stili e gli script necessari. Se eseguito con cura, questo processo potrebbe portare a un sito Web ottimizzato.

Naturalmente, ci sono una serie di ragioni per cui questa pratica è stata abbandonata da molti di noi. Semplicemente non è efficiente in termini di tempo e vincoli di budget.

I siti Web moderni sono spesso costruiti su un prodotto predefinito. Potrebbe essere un framework CSS come Bootstrap o un elaborato tema WordPress. In alcuni casi, un tema CMS può anche includere un framework.

Questi prodotti sono pensati per essere taglia unica. Includendo tutto ciò di cui potresti aver bisogno, rende lo sviluppo molto più rapido. Sfortunatamente, non si può dire lo stesso per il loro impatto sulle prestazioni.

Quindi, cosa si può fare per migliorare la situazione?

Utilizzare framework basati su componenti o leggeri, ove possibile

In teoria, è possibile ottenere entrambi i vantaggi di un framework evitando il rigonfiamento. Ciò può essere ottenuto utilizzando pacchetti basati su componenti che consentono di caricare funzionalità specifiche escludendo altre. Il summenzionato Bootstrap consente questo tipo di personalizzazione, fino a un certo punto.

Un'altra alternativa è Tailwind CSS, che fornisce stili di base e presuppone che ci si costruirà sopra. Se stai cercando un ottimo punto di partenza, al contrario di un prodotto più finito, questo potrebbe essere adatto.

Non c'è niente di sbagliato nell'usare un framework. Ma cercane uno che: a) ti permetta di scegliere quali componenti caricare o; b) offre un foglio di stile barebone che può essere facilmente personalizzato. In ogni caso, il tuo progetto trarrà vantaggio dal carico ridotto.

Cosa fare con i temi CMS?

Prodotti come i temi commerciali di WordPress possono essere complicati, poiché spesso includono un carico di stili, che tu ne abbia bisogno o meno.

È possibile che un tema specifico sia ben organizzato al punto in cui è abbastanza facile rimuovere dalla coda i fogli di stile che non si desidera. Potrebbe anche esserci un pannello delle opzioni del tema che ti consente di farlo con pochi clic. Tuttavia, questa è più probabilmente l'eccezione che la regola.

Il modo migliore per evitare un tema gonfio è crearne uno tuo. Ad esempio, un tema iniziale di WordPress offrirà alcuni CSS barebone che puoi personalizzare. Questo aiuta a garantire un foglio di stile più snello e toglie almeno una piccola parte del sovraccarico associato a un CMS.

Declutter fogli di stile esistenti

Spostando la nostra attenzione su un sito Web esistente, il decluttering e il refactoring CSS possono essere eseguiti in due modi:

Revisione manuale degli stili

Avviare il tuo editor di codice preferito e aprire i fogli di stile del tuo sito è sempre un buon punto di partenza. Sì, può essere un'esperienza noiosa. Ma è anche un modo efficace per prendersi cura del frutto basso.

Non è necessario esaminare ogni riga di CSS. Invece, l'idea è di trovare tutti gli oggetti che sai non vengono utilizzati o non sono efficienti come potrebbero essere.

Ad esempio, supponiamo che tu gestisca un sito Web WordPress con alcuni stili personalizzati per sovrascrivere quelli di un plug-in. E se non utilizzi più quel particolare plugin? In questo caso, gli stili possono essere facilmente rimossi.

O forse ci sono una selezione di stili che usi solo sporadicamente, come durante le vacanze invernali. Potrebbe essere utile spostare quegli stili in un file separato e chiamarli solo quando necessario.

Poi ci sono i selettori CSS che non sono scritti molto bene. Forse hanno un numero di prefissi del browser non più necessari o proprietà duplicate non necessarie. Questa è un'area pronta per la pulizia.

Se il design del tuo sito ha più di un paio d'anni, potresti essere sorpreso dalla quantità di stile in eccesso che puoi trovare.

Usa uno strumento automatizzato

Esistono numerosi strumenti che eseguiranno la scansione del tuo sito (o almeno una parte di esso) e riporteranno un elenco di CSS inutilizzati. Tuttavia, non trattenere il respiro mentre aspetti la perfezione.

Proprio come gli strumenti di accessibilità automatizzata, gli scanner CSS inutilizzati possono darti solo così tante informazioni. Pertanto, è meglio prendere i risultati con le pinze e usarli come guida, non come risposta definitiva alla tua domanda.

Chris Coyier di CSS-Tricks ha scritto un articolo eccezionale su questo particolare problema che vale la pena dare un'occhiata. Non solo testa alcuni di questi strumenti, ma esamina anche i problemi più grandi a portata di mano, come le query sui media.

Tuttavia, se sei interessato a provare uno o più di questi strumenti, alcune delle scelte più popolari sono:

• JitBit
• Purge CSS
• PurifyCSS
• CSS inutilizzato

Una combinazione di uno strumento automatizzato e di una revisione manuale è probabilmente la migliore linea d'azione. Fare entrambe le cose ti darà un quadro più completo delle potenziali ottimizzazioni delle prestazioni. Potresti non catturare ogni singolo oggetto, ma c'è comunque un'opportunità per avere un impatto misurabile. Puoi eseguirne alcuni prima e dopo i test con uno strumento come GTmetrix per vedere i risultati.

Quando si tratta di CSS: non sprecare, non vuoi

È incredibile quanto può diventare grande un foglio di stile, specialmente quando si utilizza un framework CSS pronto. Certo, è bello che l'autore abbia fatto molto del duro lavoro per te in termini di elementi di stile. Allo stesso tempo, lascia molto sul tavolo quando si tratta di rendering della pagina e tempi di caricamento.

Questo è qualcosa a cui vale la pena prestare attenzione fin dall'inizio di un progetto. Cercando di ridurre il peso di un foglio di stile, stai aiutando a strappare fino all'ultima goccia di ottimizzazione dal tuo sito.

Se il tuo sito web è già disponibile per essere visto dal mondo, ci sono ancora passi positivi che puoi intraprendere. Esamina il CSS e cerca gli elementi da semplificare o rimuovere. Utilizza uno dei tanti strumenti automatizzati disponibili per trovare oggetti che potresti esserti perso.

La conclusione è che ridurre i CSS all'essenziale non è un processo perfetto. Tuttavia, vale comunque la pena dedicare tempo e fatica.