4 Punti Base per Aumentare la Velocità del Sito
Dopo la prima parte dove ti ho dato 3 Consigli per un sito che supera i limiti di velocità, oggi ti dò altri consigli su come velocizzare il caricamento del tuo sito.
Gli argomenti che trovi in questo articolo sono:
- Pulire il codice HTML
- Eliminare spazi bianchi e commenti
- Usare le classi CSS
- Unire più file CSS (.css) in uno
Pulire il Codice HTML
La pulizia del codice HTML la affronterò sotto 2 aspetti.
- Uso corretto di spazi tra tag
- Uso del CSS
Sono due punti fondamentali per imparare a scrivere un codice pulito e veloce.
Eliminare spazi bianchi e commenti inutili nel codice
È più che giusto formattare il codice con i dovuti rientri tra i tag, al fine di capire meglio il codice quando si apporta una modifica.
I programmi e CMS spesso sono la via più veloce per realizzare un sito web senza curarsi troppo di come viene generato il codice. Soprattutto per chi è alle prime armi, è la via più breve alla pubblicazione di un proprio sito.
Se hai usato anche tu un programma come Dreamweaver, o un CMS tipo WordPress, ti sarai accorto che, spulciando il codice, vengono generati un’immensità di:
- Commenti alle funzioni nel codice
- Spazi bianchi
- Rientri di tag infiniti
- Casino nell’ordine dei metatag
Insomma, un bel casino il tuo codice…
Mi son trovato spesso in questa situazione, trovandomi a cancellare infinite righe vuote, a rientrare tag per rendere il codice più comprensibile. Spesso puoi ridurre il tuo sorgente a 1/4 eliminando ciò che non serve.
Prima di tutto i commenti, a meno che non siano di vitale importanza, eliminali!
Quali sono?
Si trovano dentro a questo tag specifico per quanto riguarda HTML:
<!– Commento nel codice –>
Nel PHP invece si commenta la riga iniziandola con:
//
Nel CSS si commenta così:
/* Commento nel CSS */
Eliminali tutti se non ne hai bisogno, idem per quello che riguarda le righe vuote ed inutili. Eliminale, o riducile al minimo (tipo una riga di spazio tra inizio e fine tag).
Ecco invece un’uso corretto dei rientri tra i tag:
<div>
<ul>
<li>testo</li>
<li>testo</li>
</ul>
</div>
Certamente qui si va sul personale, ad ognuno piace visualizzare il codice in maniera diversa. Io trovo comodo il sistema che ti ho appena mostrato. Dà una gerarchia ai contenuti, rendendoli comprensibili al volo, e ti permette di individuare subito le varie parti del tuo codice.
Con queste prime modifiche, dovresti essere riuscito a snellire di molto il tuo codice. Non inciderà molto, ma sono comunque righe in meno da caricare.
Usare le classi CSS
Una cosa che ormai fanno tutti o quasi. A volte per pigrizia non si modifica il file CSS, ci si limita a dare lo stile direttamente nel codice HTML. Questo accade soprattutto quando si prova qualcosa e non lo si vuole rendere ancora definitivo. Il problema è che una volta che funziona, lo si lascia li, nel codice, ad appesantire tutto.
Sbagliatissimo!
Il file CSS è li a posta per snellire il lavoro. Puoi usare il CSS per definire ogni aspetto dello stile del tuo sito.
Esempio di codice pesante:
<body style=“background-color:#000000; margin-top: 10px;“>
<div style=“border: 1px solid #ffffff; width: 900px; background-color: #cccccc;“>
<h1 style=“font-color: #ooffoo; font-size: 120%;“>Titolo</h1>
</div>
</body>
Questo codice cosa definisce?
Un body con background nero e 10 pixel di margine superiore. Un div con 1 pixel di bordo, una larghezza di 900 pixel, un colore di sfondo grigio chiaro. Un titolo h1 grandezza 120% e colore 00ff00 (non so quale sia, buttato li al volo).
Come lo si potrebbe scrivere in versione snella?
File HTML:
<body>
<div id=”header“>
<h1>Titolo</h1>
</div>
</body>
Nel file CSS:
body {background-color:#000;margin-top:10px;}
#header {border: 1px solid #fff;width:900px;background-color:#ccc;}
h1 {font-color:#00ff00;font-size:120%;}
Una bella differenza nel codice HTML. Penserai che comunque il file CSS contiene gli stili, quindi è lo stesso pesante. Non esattamente, perchè il foglio di stile CSS viene salvato spesso nella tua cache, e riutilizzato su tutte le pagine del tuo sito che chiamano lo stesso file CSS.
Quindi il browser non cercherà più ogni voglia gli stili tra il codice HTML, perchè già li avrà in cache nel file CSS legato al tuo sito.
Utilizza il CSS il più possibile, per definirci qualsiasi cosa!
Unire più file CSS
Se usi un CMS con temi scaricati e plugin, spesso ti trovi ad avere, in una singola pagina caricata, fino a una decina di fogli di stile CSS diversi.
Ma non ne basterebbe uno solo?
Certo che si!
È per questo che puoi riunirli tutti in uno, alleggerendo le chiamate al server.
Puoi usare quello principale che definisce tutta la struttura, ed incollarci tutti gli altri.
Dovrai però modificare i metatag relativi al caricamento dei file .css che hai levato.
Lascerai solo il foglio di stile nel quale hai messo tutto.
Semplice a dirsi, ma non altrettando a farsi. Per farlo in una pagina HTML statica è facile. Hai già tutto li, basta cancellare i CSS che non servono più.
Per farlo su un CMS devi andarti a sfogliare i file dei plugin e del tema, e cercare quelli che includono tra i meta il caricamento del loro stile.
Per concludere
Come nell’articolo precedente sulla velocizzazione di un sito web, ti invito a rifare un test con FireBug e PageSpeed e vedere quali benefici hanno portato queste modifiche.
Ti auguro buoni miglioramenti, spero mi lasci un commento così ne discutiamo e ci scambiano consigli!
2 maggio 2010
Il prossimo articolo?
Ricevilo via mail o leggilo tramite Feed RSS
Abbonati!
maggio 2nd, 2010 alle 13:37
4 Punti Base per Aumentare la Velocità del Sito…
La base da cui dovresti partire per avere un sito Veloce e fluido. Una buona costruzione del CSS e HTML è il primo passo verso un sito ottimizzato SEO…
maggio 7th, 2010 alle 14:20
Ciao, scusa se intervengo OT qui, ma volevo solo dirti che hai frainteso il senso del post sul mio blog. Io sono un poeta non un tecnico! E se vai a leggerti la risposta che ti ho dato vedrai che non volevo proprio sminuire nessuno. Comunque, va bene così perché in questo modo ho scoperto l’esistenza di questo tuo sito veramente molto interessante, complimenti. Ciao
maggio 7th, 2010 alle 17:31
Figurati. Il mio intento era un po' di punzecchiare per chi come me arriva li pensando che si stia parlando di posizionamento. Il titolo sull'aggregatore lasciava intendere così.
Mi fà piacere che trovi utile il mio blog. Spero tu ti sia abbonato, non vorrei ti perdessi qualche utile pillola.
Anche il tuo blog è ben curato. Se ti servon consigli, chiedi pure.
maggio 10th, 2010 alle 15:55
Ciao Enea,
ottimi consigli! Davvero utile ;)
Michele
maggio 13th, 2010 alle 09:31
ottimo articolo grazie