I Cascading Style Sheets (in italiano fogli di stile), conosciuti soprattutto con l’abbreviazione CSS, è un linguaggio con il quale si definiscono separatamente laformattazione dei contenuti del sito, cioè la loro presentazione, come ad es. i colori o il layout. I documenti HTML e XML contengono solo le indicazioni sui contenuti e sulla loro struttura all’interno del sito, mentre gli altri elementi relativi alla forma sono stabiliti a parte nei cosiddetti file CSS. Quando si utilizzano i fogli di stile, il server web deve inoltrarli al browser insieme ai documenti HTML e ai contenuti multimediali integrati (foto, video, ecc.) al momento dell’apertura di una pagina. Questo processo incide sui tempi di caricamento del sito. Più i file CSS sono grandi e complessi, più il visitatore deve attendere per visualizzare la pagina per intero. Comprimendo il codice CSS in uso, potete ridurre notevolmente le dimensioni dei file CSS e migliorare la performance del vostro sito.
Il tempo di caricamento di una pagina web acquista con il tempo sempre più importanza, soprattutto per via del crescente utilizzo dei dispositivi mobili e delle connessioni dati. Allo stesso tempo è aumentato il campo di impiego del codice CSS: infatti, questo linguaggio ricopre sempre più le funzioni di JavaScript. Specialmente i template dei CMS come WordPress hanno spesso dei file CSS carichi che rallentano inutilmente il sito. Per questo motivo, vi presentiamo alcuni consigli e trucchi per comprimere il codice CSS e ridurre i tempi di caricamento del vostro sito:
Dato che la compressione di un file CSS è complicata, ricordatevi di creare una copia di sicurezza del file originale non minimizzato. Così facendo, potrete anche in seguito apportare delle piccole modifiche o risolvere gli errori.
Per chi volesse alleggerirsi il compito di ottimizzare il codice CSS manualmente, ci sono diverse applicazioni online e programmi offline con cui è possibile minimizzare i file CSS. Questi strumenti vi risparmiano il lavoro faticoso ed eliminano efficacemente almeno gli spazi, i tabulatori, i commenti e il ritorno a capo. Anche la conversione del codice dei colori è realizzabile con la maggior parte dei programmi. Il risultato può essere direttamente scaricato come file CSS o copiato e incollato sul vostro file. Vi presentiamo in sintesi tre applicazioni che svolgono queste funzioni:
L’applicazione online CSS Minifier è raggiungibile alla pagina http://www.cssminifier.com/. Basta copiare il codice CSS nel campo “input CSS” e iniziare il processo cliccando su “minify”. Nel campo “minified output” viene mostrato il risultato dell’operazione e potete copiare il codice manualmente o scaricarlo tramite “download as file”. CSS Minifier elimina dal codice i ritorni a capo, gli spazi e il punto e virgola finale dalle liste. Inoltre, il tool converte senza problemi i codici RGB nella variante HEX compressa.
L’applicazione web CSS Compressor si differenzia da CSS Minifier per la presenza di altre opzioni tra cui scegliere per la compressione del codice. Richiamate il sito http://csscompressor.com/ e copiate il vostro codice CSS nel campo “CSS Source Code Input“. Ora potete stabilire il grado di compressione. Cliccando su “Show advanced options” spuntate la casella con le dimensioni di ottimizzazione desiderate come ad esempio i colori (“Compress colors”) o gli spazi (“Remove unnecessary backlashes”). La compressione ha inizio cliccando su “Compress”. In più, nel campo “Compressed JavaScript”, il tool fornisce informazioni sulle dimensioni di input e output del vostro file CSS così come la minimizzazione raggiunta in percentuale.
Free CSS Toolbox è un software gratuito per sviluppatori web, scaricabile dalla pagina degli sviluppatori della Blumentals Software. Come già svela il nome, si tratta di una raccolta di tool con i quali è possibile anche la formattazione e la verifica dei codici CSS. Nel menu “CSS Fomatting Options” scegliete i parametri CSS che volete ottimizzare e iniziate la compressione cliccando su “Re-Format Now”. Il programma elimina così senza problemi gli spazi e l’ultimo punto e virgola, e anche la dimensione dei colori viene minimizzata. Free CSS Toolbox funziona su tutti i sistemi operativi Windows, a partire da XP.
Più il vostro sito web o shop online ha una struttura complessa, più si avrà bisogno di ricorrere ai fogli di stile, il più delle volte file CSS. Perciò non stupisce che il carico del vostro web server aumenti all’aumentare del numero e delle dimensioni dei file CSS. Quando si apre una pagina con un client (browser), devono sempre essere richiamati e inoltrati tutti i file CSS. Per questo motivo si consiglia di ottimizzare i fogli di stile. Tool online e offline, come quelli qui illustrati, permettono anche ai principianti della programmazione di eliminare informazioni non necessarie dai file CSS. Purtroppo, però, con questi programmi non è possibile ottimizzare al massimo il codice; per quello dovete pensarci voi o rivolgervi agli esperti.
Chi vuole costruire un sito web, dovrebbe essere consapevole dello scopo da raggiungere e delle funzioni che la pagina offrirà. Solo così potrete conferire un aspetto unitario alla vostra pagina. Infatti, nel web design si comincia sempre con la progettazione, che è alla base della realizzazione di ogni sito. A cosa bisogna fare attenzione e a cosa bisognerà dare un maggiore valore? Se investite...
Per i web designer la tipografia è un argomento piuttosto interessante da molto tempo. Oggi però, grazie a tecnologie avanzate, le cose stanno un po’ diversamente: con font creativi date un tocco particolare al vostro sito senza che l’utente abbia installato i rispettivi caratteri sul suo apparecchio. Nella ricerca di font adatti è necessario tuttavia prestare attenzione ad alcune cose.
Lo spazio di archiviazione aumenta ogni anno sempre di più grazie ai Gigabyte e Terabyte messi a disposizione. Sarebbe pertanto consigliabile ridurre le dimensioni dei dati, soprattutto se gestite una pagina web in autonomia. File compressi significano tempi di caricamento più veloci, utenti più felici e un migliore posizionamento su Google. In modo particolare sarebbe utile comprimere le immagini...
Se desiderate sviluppare una nuova applicazione web, vi troverete certamente dinanzi alla fatidica domanda se scrivere il codice completamente da zero o se, in alternativa, fare affidamento su di un framework. La raccolta di codici YAML contiene una struttura già pronta all’uso, che può essere adattata alle proprie esigenze. Il framework CSS YAML vi mette a disposizione una struttura responsive...
MyWebsiteOffri ai tuoi clienti servizi professionali e affidabili con l'hosting di 1&1 IONOS.
