Ottimizzazione CSS: 21 modi per velocizzare il tuo sito web

Ascolta questo articolo

css deve passare attraverso una pipeline relativamente complessa, proprio come HTML e JavaScript. Il browser deve scaricare i file dal server e quindi procedere ad analizzarli e ad applicarli al DOM. A causa degli estremi livelli di ottimizzazione, questo processo è solitamente piuttosto veloce: per piccoli progetti Web che non sono basati su framework, i CSS di solito rappresentano solo una piccola parte del consumo totale di risorse.

I frame rompono questo equilibrio. Includi uno stack GUI JavaScript come l'interfaccia utente jQuery e osserva la crescita esponenziale di CSS, JS e HTML. Spesso gli sviluppatori non si sentono male: quando si siedono su una potente workstation a otto core con Internet T3, a nessuno importa della velocità. Questo sta cambiando man mano che entrano in gioco latenze o dispositivi con limitazioni della CPU.

Ottimizzazione CSS richiede un approccio multidimensionale. Mentre il codice scritto a mano può essere ridotto utilizzando vari metodi, l'iterazione manuale del codice del framework è inefficiente. In questi casi, l'utilizzo del minimizzatore automatico dà risultati migliori.

I seguenti passaggi ti aiuteranno a ottimizzare il tuo CSS. Non tutti potrebbero essere direttamente applicabili al tuo progetto, tienilo a mente.

Il contenuto dell'articolo:

• Usa suggerimenti CSS di scelta rapida
• Rimuovi il codice CSS inutilizzato
• Lavora con i CSS in un modo più conveniente
• Sii sempre consapevole dei problemi relativi ai tuoi stili
• CSS critico in linea
• Analisi antiparallela
• Sostituisci le tue immagini con i CSS
• Usa combinazioni di colori
• Rimuovi zeri e uno non necessari
• Rimuovi i punti e virgola in più
• Usa gli sprite delle texture
• Elimina i pixel indesiderati
• Evita proporzioni impegnative
• Rimuovi gli spazi inutili
• Rimuovi i commenti indesiderati
• Usa la compressione automatica
• Esegui da NPM
• Tieni sotto controllo Sass e gli altri
• Imposta la memorizzazione nella cache
• cancellare la cache
• Non dimenticare le basi

Usa suggerimenti CSS di scelta rapida

La frase CSS più veloce è quella che non viene mai analizzata. L'utilizzo di suggerimenti abbreviati come la dichiarazione di campo mostrata di seguito ridurrà drasticamente le dimensioni dei file CSS. Molte altre scorciatoie possono essere trovate cercando su Google "CSS Shorthand".

Ecco un esempio:

p { margine superiore: 1px; margine destro: 2px; margine inferiore: 3px; margine sinistro: 4px; } p { margine: 1px 2px 3px 4px; }

Rimuovi il codice CSS inutilizzato

L'eliminazione di parti non necessarie del tuo markup si traduce ovviamente in un enorme aumento della velocità. Il browser Google Chrome ha questa funzione pronta all'uso.

Basta andare su Visualizza> Sviluppatore> Strumenti per sviluppatori, aprire la scheda Fonti nell'ultima versione e aprire il menu dei comandi. Successivamente, seleziona "Mostra copertura" e ammira la finestra di analisi della copertura che evidenzia il codice inutilizzato sulla pagina Web corrente.

Lavora con i CSS in un modo più conveniente

La navigazione attraverso l'analisi riga per riga non è necessariamente conveniente. Chrome Web Performance Audit restituisce informazioni simili: basta aprirlo dalla barra degli strumenti, scegliere Visualizza > Sviluppatore > Strumenti per sviluppatori > Verifica ed eseguirlo. Al termine, verrà visualizzato un elenco di elementi problematici.

Sii sempre consapevole dei problemi relativi ai tuoi stili

Tieni presente che l'analisi CSS automatizzata può sempre portare a errori. Esegui un test approfondito dell'intero sito Web dopo aver sostituito i file CSS con quelli minimizzati: non sai mai quali errori ha commesso l'ottimizzatore. E andando avanti, un host web decente può aiutarti a appianare le rughe sul tuo sito.

CSS critico in linea

Il caricamento di fogli di stile esterni richiede tempo a causa della latenza: qualcuno ricorda il "flash di contenuto senza stile"? In questo modo, le parti di codice più importanti possono essere inserite nel tag di intestazione.

Tuttavia, cerca di non esagerare. Tieni presente che il codice deve essere letto anche da persone che svolgono attività di manutenzione.

Ecco un esempio:

<html> 
<head> 
<style> .blue{color:blue;} </style>
</head> 
<body> 
<div class="blue"> Ciao mondo! </div>

Analisi antiparallela

@importare aggiunge struttura al tuo codice CSS. Sfortunatamente, i vantaggi non sono gratuiti: poiché le importazioni possono essere nidificate, non possono essere analizzate in parallelo. Il modo più parallelo utilizza una serie di tag che il browser può ottenere contemporaneamente.

Esempio:

@import url("a.css"); @import url("b.css"); @importazione url("c.css");

Sostituisci le tue immagini con i CSS

Alcuni anni fa, una serie di file PNG traslucidi per creare effetti traslucidi sui siti Web era all'ordine del giorno. Attualmente, i filtri CSS sono un'alternativa per risparmiare risorse. Ad esempio, lo snippet che accompagna questo passaggio garantisce che l'immagine in questione venga visualizzata come una versione in scala di grigi di se stessa.

Esempio:

img { -webkit-filtro: scala di grigi(100%); /* vecchio safari */ filtro: grayscale(100%); }

Usa combinazioni di colori

Il buon senso impone che i descrittori di colore a sei cifre siano il modo più efficiente per esprimere i colori. Non è così: in alcuni casi, le descrizioni abbreviate o i nomi dei colori potrebbero essere più brevi.

target { colore di sfondo: #ffffff; } destinazione { sfondo: #fff; }

Rimuovi zeri e uno non necessari

I CSS supportano un'ampia gamma di unità e formati numerici. Sono un obiettivo gradito per l'ottimizzazione: sia gli zeri finali che quelli finali possono essere rimossi, come mostrato nello snippet sottostante. Inoltre, tieni presente che zero è sempre zero e che l'aggiunta di una dimensione non aumenta il valore delle informazioni contenute.

imbottitura: 0,2 em margine: 20.0em valore: 0px; imbottitura: .2em; margine: 20em valore: 0;

Rimuovi i punti e virgola in più

Questa ottimizzazione è alquanto critica in quanto influisce sulle modifiche al codice. La specifica CSS consente di omettere l'ultimo punto e virgola in un gruppo di proprietà. Poiché i risparmi ottenuti da questo metodo di ottimizzazione sono minimi, lo menzioniamo principalmente per coloro che lavorano con l'ottimizzatore automatico.

P { . . . dimensione carattere: 1,33 em

Usa gli sprite delle texture

Il caricamento di più piccoli sprite è inefficiente a causa dell'overhead del protocollo. Gli sprite CSS combinano una serie di piccole immagini in un unico file PNG di grandi dimensioni, che viene poi suddiviso utilizzando le regole CSS. Programmi come texturepacker , semplifica notevolmente il processo di creazione.

.download { larghezza:80px; altezza: 31px; posizione di sfondo: -160px -160px; } .download:hover { larghezza:80px; altezza: 32px; posizione di sfondo: -80px -160px; }

Elimina i pixel indesiderati

Un modo ingegnoso per migliorare le prestazioni è una funzionalità dello standard CSS. Si presume che i valori numerici senza unità siano pixel: la rimozione dei pixel consente di risparmiare due byte per ciascun numero.

h2 {imbottitura: 0px; margine:0px;} h2 {padding:0; margine:0}

Evita proporzioni impegnative

L'analisi ha mostrato che alcuni tag costano più di altri. L'elenco che accompagna questo passaggio è considerato particolarmente esigente in termini di prestazioni: evitalo quando ti viene data l'opportunità di farlo.

border-radius box-shadow transform filter :nth-child position: fixed; eccetera.

Rimuovi gli spazi inutili

Gli spazi - tabulazioni, ritorni a capo e spazi - rendono il codice più facile da leggere, ma non fanno molto dal punto di vista di un parser. Eliminali prima della spedizione. Meglio ancora, delegare questo lavoro a uno script di shell o dispositivo simile.

Rimuovi i commenti indesiderati

Anche i commenti sono inutili per il compilatore. Crea il tuo parser per rimuoverli prima della consegna. Ciò non solo consente di risparmiare larghezza di banda, ma rende anche più difficile per aggressori e clonatori capire cosa c'è dietro il codice.

Usa la compressione automatica

Il team UI di Yahoo ha creato un'applicazione che fa molto lavoro di compressione. Viene fornito come file JAR e può essere eseguito con la JVM di tua scelta.

java -jar yuicompressor-xyzjar Utilizzo: java -jar yuicompressor-xyzjar [opzioni] [file di input] Opzioni globali -h, --help Visualizza queste informazioni --type Specifica il tipo di file di input

Esegui da NPM

Se preferisci integrare il prodotto in Node.JS, visita npmjs.com/package/yuicompressor . Il repository mal gestito contiene una serie di file wrapper e un'API JavaScript.

var compressore = require('yuicompressor'); compressor.compress('/path/to/file or String of JS', { //Opzioni compressore: set di caratteri: 'utf8', tipo: 'js',

Tieni sotto controllo Sass e gli altri

Sebbene le prestazioni del selettore CSS non siano così critiche come lo erano alcuni anni fa (vedi risorsa), framework come Sass a volte producono codice estremamente complesso. Rivedi i file di output di tanto in tanto e pensa a come ottimizzare i risultati. Hai risultati da condividere con il team? Archivia i file nell'archivio cloud pubblico.

Imposta la memorizzazione nella cache

Il vecchio detto dice che il file più veloce è quello che non va mai oltre il filo. L'interrogazione della cache del browser raggiunge questo risultato in modo efficiente. Sfortunatamente, l'impostazione delle intestazioni di memorizzazione nella cache deve essere eseguita sul server. Fai buon uso dei due strumenti mostrati negli screenshot, forniscono un modo rapido per analizzare i risultati delle tue modifiche.

cancellare la cache

I progettisti spesso non amano la memorizzazione nella cache per paura di problemi con le modifiche imminenti. Un modo accurato per risolvere questo problema prevede l'inclusione di tag con il nome del file. Sfortunatamente, lo schema descritto nel codice che accompagna questo passaggio non funziona ovunque, poiché alcuni proxy si rifiutano di memorizzare nella cache i file con percorsi "dinamici".

Non dimenticare le basi

L'ottimizzazione CSS è solo una parte dello sforzo di ottimizzazione. Se il tuo server non utilizza HTTP/2 e la compressione gzip, si perde molto tempo durante il trasferimento dei dati. Fortunatamente, risolvere questi due problemi è abbastanza semplice. Il mio esempio mostra diverse impostazioni per un server Apache ampiamente utilizzato utilizzando un file .htaccess. Se ti trovi su un sistema diverso, fai riferimento alla documentazione del server.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css

Sarò molto felice se questo articolo ti sarà utile. Bene, continuerò ad aggiungere nuovi materiali pertinenti su questo argomento.

Leggendo questo articolo:

• Come eseguire il reindirizzamento 301 nel file .htaccess - esempi dettagliati
• Ottimizzazione delle prestazioni delle pagine web

Grazie per aver letto: AIUTO SEO | NICOLA.TOP