Christian Castelli
a- a+

Velocizzare caricamento pagine web? 10 semplici regole

Velocizzare caricamento pagine web? 10 semplici regole

Vi piace aspettare il caricamento di un sito quando avete bisogno di certe informazioni (magari anche urgenti)? Ecco, non piace nemmeno ai vostri visitatori. Per questo presentiamo qui dei punti da tenere in considerazione per avere un sito che risponda prontamente ai bisogni dei visitatori.

1. Impostare il layout con i CSS invece che le tabelle

I fogli di stile vengono scaricati più velocemente rispetto alle tabelle perché:

  • Browsers impiegano il doppio del tempo per visualizzare le tabelle, prima per capirne la struttura e poi per presentare il contenuto;
  • Le tabelle appaiono a schermo in blocco, nessuna parte della tabella apparirà fintanto che non viene scaricata e resa a schermo globalmente;
  • Le tabelle incoraggiano all'uso di immagini spaziatrici per aiutare il posizionamento degli elementi;
  • I fogli di stile richiedono in genere meno codice rispetto alle tabelle;
  • Tutto il codice facente capo al layout può esser messo in documenti CSS esterni, richiamabili solo una volta e poi memorizzati nella cache del browser. I layout tabellari invece devono essere caricati tutte le volte che si carica la pagina;
  • Attraverso i CSS è possibile controllare l'ordine in cui vengono scaricati gli elementi a schermo (far apparire prima il contenuto rispetto alle immagini è apprezzabile).

2. Non usare immagini per mostrare del testo

Non c'è bisogno di usare delle immagini per mostrare del testo, ci vengono in aiuto i CSS. Si dia un'occhiata al codice seguente:

a:link.example, a:visited.example, a:active.example
{
    color:#fff;
    background:#f90;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
    padding:0.2em;
    border:4px #00f outset
}

a:hover.example
{
    color:#fff;
    background:#fa1;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
    padding:0.2em;
    border:4px #00f inset
}

Questo codice renderà il bottone premuto quando il cursore del mouse ci passerà sopra (vedi esempio).

3. Decorare le immagini attraverso i CSS

E' possibile presentare le immagini come parte del background attraverso i CSS. Se avete a disposizione, per esempio, un'immagine di 200px per 100px potete usare il seguente codice HTML:

<div class="pretty-image"></div>

E questo codice CSS:

.pretty-image
{
background: url(filename.gif);
width: 200px;
height: 100px
}

Sulle prime potrebbe sembrare insignificante, ma questa tecnica può realmente abbassare il tempo di download delle pagine. Tipicamente i browser scaricano le immagini di sfondo dopo aver scaricato tutti gli altri elementi. Usando questa tecnica, il testo verrà caricato istantaneamente e i vostri visitatori potranno già iniziare a navigare nel vostro sito mentre l'immagine di sfondo viene scaricata.

Con la tecnica appena vista, non è possibile usare l'attributo ALT per le informazioni descrittive delle immagini. Se avete a cuore mantenere tali informazioni, rimpiazzate il codice HTML soprastante con quello qui sotto:

<image src="spacer.gif" _cke_saved_src="spacer.gif" _cke_saved_src="spacer.gif" _cke_saved_src="spacer.gif" class="pretty-image" alt="description" />

Spacer.gif è un immagine trasparente di dimensioni 1px per 1px. Ora avete un'immagine trasparente di 50 byte e il contenuto principale che viene caricato per primo, avendo a disposizione anche l'attributo ALT.

4. Usate selettori contestuali

Il codice seguente è inefficiente:

<p class="text">This is a sentence</p>
<p class="text">This is another sentence</p>

.text
{
color: #03c;
font-size: 2em
}

Invece di assegnare un valore ad ogni paragrafo individuale, possiamo innestare tutti i paragrafi all'interno di un tag <div> e assegnare un valore a questo tag:

<div class="text">
<p>Questa è una frase</p>
<p>Questa è un' altra frase</p>
</div>

.text p
{
color: #03c;
font-size:2em
}

Quest'esempio mostra semplicemente che ad ogni paragrafo all'interno della classe "text" si deve assegnare un colore con valore #03c e grandezza del font pari a 2em. Di primo acchitto potrebbe sembrare una modifica di poco conto, ma se si usa questa tecnica su tutto il resto della pagina, è possibile risparmiare un 20% sulla grandezza finale del file. Da notare infine che i valori dei colori sono più corti del normale: : #03c è la versione ridotta di #0033c.

5. Usare le proprietà CSS in modo abbreviato

Font

Scrivere:

font: 1em/1.5em bold italic serif

...invece di:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Bordi

Usate:

border: 1px black solid

...invece di:

border-width: 1px;
border-color: black;
border-style: solid

Sfondo

Usate:

background: #fff url(image.gif) no-repeat top left

...invece di:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Margini, padding, bordi

Usate:

margin: 2px 1px 3px 4px (top, right, bottom, left)

...invece di:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px

Usate:

margin: 5em 1em 3em (top, left and right, bottom)

..invece di:

margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em

Ancora, è preferibile:

margin: 5% 1% (top and bottom, left and right)

...anzichè:

margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1%

6.Minimizzare gli spazi bianchi, i ritorno a capo e i commenti

Ogni singola lettera o spazio bianco bel vostro codice HTML occupa un byte. Ciò non sembra dire molto, ma sommate tutti i caratteri presenti nella vostra pagina. Se si eliminano gli spazi bianchi e i commenti non necessari, si arriva a risparmiare un 10% sulla grandezza finale del file.

7. Usare percorsi relativi

Cercate di evitare l'uso di percorsi assoluti che prendono più spazio. Un esempio di percorso assoluto è il seguente: <a href="http://www.URL.com/filename.htm">. Sarebbe molto meglio scrivere <a href="filename.htm">. Ma se alcuni files sono in cartelle differenti rispetto ad altri? Usate queste scorciatoie:

  • <a href="/"> -richiama http://www.URL.com
  • <a href="/filename.html"> - richiama http://www.URL.com/filename.html
  • <a href="/directory/filename.html"> - richiama http://www.URL.com/directory/filename.html
  • <a href="./"> - richiama il file index.html all'interno della directory
  • <a href="../"> - richiama il file index.html nella directory superiore
  • <a href="../filename.html"> - richiama il file filename.html nella directory superiore
  • <a href="../../"> - richiama il file index.html due directory sopra quella corrente

8.rimuovere i META tags e META content non necessari

La maggior parte dei Most META tags sono abbastanza inutili. Una lista di META tags è visibile al link indicato. I meta tags più importanti per operazioni SEO sono i tag keywords e description, sebbene essendoci degli abusi nel loro uso, abbiano perso molta importanza negli ultimi tempi. Quando utilizzate questi meta tags cercate di mantenere il contenuto al di sotto dei 200 caratteri (se ne usate di più, appesantirete solo la vostra pagina e non saranno nemmeno molto utili ai motori di ricerca).

9. Mettere i file CSS e JavaScript in documenti esterni

Per richiamare un foglio di stile posto in un file esterno potete usare il seguente codice:

<link type="text/css" rel="stylesheet" href="filename.css" _cke_saved_href="filename.css" _cke_saved_href="filename.css" _cke_saved_href="filename.css" />

Per quanto concerne javascript invece, questo:

<script language="JavaScript" src="filename.js" type="text/javascript"></script>

Ogni file esterno viene richiamato solo una volta e poi immagazzinato nella cache del browser dell'utente. Inoltre è consigliabile non usare un file gigantesco che contenga tutti i fogli di stile, bensì suddividere gli stili in più files che verranno richiamati dalle pagine solo se ce ne sarà bisogno.

10. Usate / alla fine dei collegamenti a directory

Non scrivete questo:

<a href="http://www.URL.com/nomedirectory">

Piuttosto scrivete questo:

<a href="http://www.URL.com/nomedirectory/">

Se non è presente il carattere di slash alla fine dell'URL il server non comprende se il collegamento sta puntando ad un file o ad una directory. Se includete il carattere "/" , il server capisce istantaneamente che il collegamento sta puntando ad una directory e non deve spendere del tempo per capire che tipo di collegamento sia.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Marcello
Ti è piaciuto l'articolo?