paitadesignblog

HTML, CSS e tutto il resto

Come velocizzare il caricamento di pagine web? Comprimere CSS e JavaScript!

Minify your css and js

Da quando Google ha inserito tra i fattori di ranking il tempo di caricamento delle pagine web, ogni webdesigner deve porre maggiore attenzione all’ottimizzazione di tutte le risorse caricate. Siti più veloci, inoltre, non solo migliorano l’esperienza utente, ma dati recenti mostrano che il miglioramento della velocità del sito riduce i costi operativi.

Tra tutte le "best practices" per velocizzare il carimento di un sito, rivolgiamo per prima cosa la nostra attenzione a i file CSS e JavaScript, e ai metodi per comprimere il codice. Molto spesso infatti, per i grandi progetti, i fogli di stile raggiungono un numero elevato di righe, e aumentano con il numero delle sezioni della pagina, sotto forma di file esterni richiamati con la regola @import. La stessa cosa avviene con i file JavaScript. Tralasciamo il discorso sul codice HTML, perché una sua compressione non apporterebbe significativi benefici.
Vediamo come ottimizzare il loro peso grazie a due ottimi strumenti online.

JavaScript: minimizzare e comprimere!

Minifyjs è un ottimo compressore di codice JavaScript, la cui funzione è quella di prendere il codice sorgente originale, eliminare tutti i caratteri non necessari (sopratutto glie spazi bianchi), e mantenere intatte le funzionalità dello script. 

Free Javascript Compressor and JS Compression Tool

Riduciamo il peso dei CSS!

The CSS Compressor

Questo ottimo tool online, nella sua cassetta degli attrezzi può vantare ottimi strumenti per eliminare parti superflue o ridondanti, rendendo quindi il caricamento di una pagina più veloce.

Opzioni di compressione

Colori

  • Converte i colori in esadecimale
  • Converte le proprietà esadecimali da lunghe in forma breve
  • Converte da esadecimale in forma lunga in nomi di colore
  • Converte da RGB in esadecimale

Misure

  • Rimuove le misure pari a zero

Regole

  • Combina regole identiche
  • Combina selettori identici
  • Combina le proprietà
  • Rimuove le proprietà sovrascritte

Proprietà

  • Rimuove i valori inutili da margin e padding
  • Convertire in numeri le proprietà text-weight

Opzioni di output

  • Mostra le statistiche
  • Produce un output a colori
  • Produce un file di output della dimensione più piccola