Iscriviti al mio Feed RSS

Non ti perdere i miei prossimi articoli!
Resta aggiornato iscrivendoti al mio Feed RSS!
Feed RSS via Mail di Enea Moro Feed RSS di Enea Moro

4 Punti Base per Aumentare la Velocità del Sito

CSS e HTMLDopo 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.

  1. Uso corretto di spazi tra tag
  2. 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

SEO

Il prossimo articolo?

Ricevilo via mail o leggilo tramite Feed RSS
Abbonati!

Ricevi il prossimo articolo sul tuo indirizzo Email Leggi il mio prossimo articolo tramite Feed RSS



5 Risposte per “4 Punti Base per Aumentare la Velocità del Sito”

  1. addalo.it scrive:

    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…

  2. Daniele scrive:

    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

  3. Enea scrive:

    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.

  4. Michele Papaleo scrive:

    Ciao Enea,
    ottimi consigli! Davvero utile ;)
    Michele

  5. chiaramarina scrive:

    ottimo articolo grazie

Lascia una risposta