Home
  1. Informatica
  2. Creare siti web
  3. Velocizzare il sito internet: consigli sulla compattazione del codice

Velocizzare il sito internet: consigli sulla compattazione del codice

Come ridurre il codice html, css e js, che compongono i file del nostro sito internet

Guida 'leggera' all'ottimizzazione delle pagine web per renderle più veloci e incrementare le visualizzazioni

    Livello: Iniziale
 

ARGOMENTI DELLA LEZIONE

Le nuove tecnologie di connessione permettono ai dati di viaggiare sempre più velocemente ed essere caricati sui nostri PC e smartphone in tempi inferiori. Ma non è sempre così e resta valida la regola dei motori di ricerca che premia i siti veloci perché alleggeriti di inutile peso.

Come si rende un sito più leggero? Riducendo il codice all'essenziale.

Nei file html, nei fogli di stile .css, nei file javascript .js, c'è sempre qualche inutile spazio vuoto, un rigo vuoto un ; inutile, commenti che si possono sintetizzare in meno parole. Vediamo subito come velocizzare il nostro sito.

Ridurre il codice html

Se per creare il sito internet usi un software come Expression Web 4 e simili, troverai tra le opzioni di pubblicazione, la possibilità di ottimizzare il codice html. Questi programmi eliminano i commenti da te creati nelle pagine, quelli che usi per memorizzare alcuni passaggi importanti e per meglio riconoscere i plug-in installati nel sito. Di solito usiamo scriverli tra questi simboli: <!-- commento -->. Oppure lasciamo qualche rigo di spazio tra una sezione e l'altra per meglio identificarle, ecc. Ciascuno spazio e ciascuna lettera, se non cancellati in fase di pubblicazione nel web, saranno caricati dal browser dell'utente finale che leggerà le pagine del sito internet da te costruito. Codice che l'utente non vedrà, ma peserà sul caricamento delle pagine.

Commenti su più righi, molti spazi tra un rigo di codice e l'altro, ecc. possono occupare anche alcuni kilobyte.

La soluzione di Expression Web 4

Vediamo come ridurre il codice delle pagine html e compattarle, attraverso l'uso di un applicativo. In Expression Web 4 troviamo le opzioni alla voce di menu 'Sito/Impostazioni pubblicazione...'

Si apre la schermata 'Impostazioni sito'. Tra le opzioni in basso, spunta la voce "Ottimizza HTML durante la pubblicazione". Clicca sul pulsante "Personalizza..." Si apre una seconda schermata intitolata 'Impostazioni di ottimizzazione HTML'. Hai la possibilità di spuntare tutte le voci o solo quelle che ritieni più opportune.

Questa procedura, informa Expression Web 4 di dover compattare le pagine html prima di pubblicarle nel tuo spazio web. La procedura riduce il peso dei soli files .html, rendendoli più veloci nella fase di caricamento da parte dei browser. Noterai un lieve incremento nei tempi di pubblicazione del sito sul server: è normale.

Compattare i file css

Quando un utente apre una pagina del tuo sito, non carica solo i file html, ma anche i fogli di stile, eventuali altri file legati alla pagina html. Maggiore è il numero di file collegati alla pagina html e maggiore sarà il tempo di attesa. Più i files collegati sono voluminosi, maggiore è il tempo di caricamento totale.

Ridurre i file CSS più voluminosi è semplice grazie ad alcuni applicativi disponibili nel web e software specializzati: gratuiti o a pagamento. Per i file più piccoli, compattarli con questi strumenti può essere controproducente. In entrambe i casi: con fogli di stile voluminosi o di piccole dimensioni, possiamo preventivare una riduzione di codice a monte. Cioè in fase progettuale.

Anzitutto possiamo ridurre il peso dei files in fase di scrittura. Ad esempio, anziché scriverli così:

.div {
width: 250px;
height: 250px;
color: white;
}

Possiamo scrivere lo stesso codice come segue:

.div {width:250px;height:250px;color:white}

Nota come rispetto alla prima scrittura, nella seconda, non ho solo risparmiato 4 righi, ma messo in pratica qualche altro accorgimento. Non ho scritto width: 250px; ma width: 250px;. Prima di chiudere la parentesi graffa, ho tolto l'ultimo inutile ;. Non pensare: "Ma è solo un punto e virgola!" Pensa al fatto che se hai da realizzare più di un foglio di stile e sono molto voluminosi, potresti arrivare a contare decine o centinaia di ; inutili. Ciascuno un byte, insieme qualcosa di più.

Inizialmente ti risulterà più difficile leggere il codice. Con il tempo ci farai l'abitudine. In compenso avrai files CSS più leggeri, anche se di pochi kilobyte. Ricorda sempre che la somma fa il totale. Col tempo, utenti e motori di ricerca premieranno il tuo sforzo con più visite e migliori posizionamenti.

Un altro piccolo espediente utile riguarda l'impostazione dei colori. Se usi l'esadecimale e devi impostare il colore nero o bianco, puoi scrivere #FFF o #000 invece di #FFFFF e #00000. Lo stesso vale per tutti i colori con lettera o numero identico.

Tra gli applicativi on line pronti all'uso, ti suggerisco i seguenti: https://cssminifier.com; http://www.cleancss.com/css-minify/; http://csscompressor.com/. Non sono in ordine di prestazione. Uno potrà sembrarti solo graficamente più attraente dell'altro. Fondamentalmente non cambierà di molto il risultato. Prima di usarli, comunque, leggi le istruzioni di compatibilità con la versione CSS che stai usando sul tuo sito.

Google Developers mette a disposizione una utile guida, che consiglio di leggere seguendo questo link.

Come ridurre il codice javascript

Anche il codice javascript, contenuto nei file .js, può essere ridotto di dimensioni. Il meccanismo è simile ai file CSS, ci troviamo però in presenza di un linguaggio di programmazione. Se non lo conosciamo, sarà meglio non mettere le mani e affidarci direttamente ad un software specializzato o ad un sito internet che incorpora un compattatore di javascript.

Nei linguaggi di programmazione, un punto e virgola fa la differenza tra il "funziona" e "non funziona più". Quindi affidiamoci ai minify javascript.

JSCompressor è uno di quei siti compattatori di file javascript. Elimina i commenti e gli spazi tra un rigo di codice e l'altro. Questi compattatori sono dei veri e propri "stritolatori di codice". Guarda la differenza tra il prima e il dopo: non riconoscerai più il codice! Questo il sito di riferimento: http://jscompress.com.


Prima erano auto... le riconosceresti?

 

Leggi Pure

⟩⟩ TransferWise Opinioni: La mia Esperienza | Recensione Reale    ⟩⟩ Ledger Nano S Promo Code e Promozioni    ⟩⟩ Promozioni e Nuovi Listing su CEX.io Exchange    ⟩⟩ Come conseguire la Certificazione G Suite    ⟩⟩ OneDrive for Business: Come Funziona, Caratteristiche, Costi