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 avetebisogno di certe informazioni (magari anche urgenti)? Ecco,non piace nemmeno ai vostri visitatori. Per questopresentiamo qui dei punti da tenere in considerazione peravere un sito che risponda prontamente ai bisogni deivisitatori.

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

I fogli di stilevengono scaricati più velocemente rispetto alletabelle 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 permostrare del testo, ci vengono in aiuto i CSS. Si diaun'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 ilcursore del mouse ci passerà sopra (vedi esempio).

3. Decorare le immagini attraverso i CSS

E' possibile presentare le immagini come parte delbackground attraverso i CSS. Se avete a disposizione, peresempio, un'immagine di 200px per 100px potete usare ilseguente 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 questatecnica può realmente abbassare il tempo di downloaddelle pagine. Tipicamente i browser scaricano le immagini disfondo dopo aver scaricato tutti gli altri elementi. Usandoquesta tecnica, il testo verrà caricatoistantaneamente e i vostri visitatori potranno giàiniziare a navigare nel vostro sito mentre l'immagine disfondo viene scaricata.

Con la tecnica appena vista, non è possibile usarel'attributo ALT per le informazioni descrittive delleimmagini. 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 didimensioni 1px per 1px. Ora avete un'immagine trasparentedi 50 byte e il contenuto principale che viene caricato perprimo, 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 untag <div> e assegnare un valore a questotag:

<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 paragrafoall'interno della classe "text" sideve assegnare un colore con valore #03c egrandezza del font pari a 2em. Di primo acchittopotrebbe sembrare una modifica di poco conto, ma se si usaquesta 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 versioneridotta 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 icommenti

Ogni singola lettera o spazio bianco bel vostro codice HTMLoccupa un byte. Ciò non sembra dire molto, ma sommatetutti i caratteri presenti nella vostra pagina. Se sieliminano gli spazi bianchi e i commenti non necessari, siarriva a risparmiare un 10% sulla grandezza finale del file.

7. Usare percorsi relativi

Cercate di evitare l'uso di percorsi assoluti cheprendono più spazio. Un esempio di percorso assolutoè il seguente: <ahref="http://www.URL.com/filename.htm">.Sarebbe molto meglio scrivere <ahref="filename.htm">. Ma se alcuni filessono in cartelle differenti rispetto ad altri? Usate questescorciatoie:

  • <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 tagkeywords e description, sebbene essendoci degli abusi nelloro uso, abbiano perso molta importanza negli ultimi tempi.Quando utilizzate questi meta tags cercate di mantenere ilcontenuto al di sotto dei 200 caratteri (se ne usate dipiù, appesantirete solo la vostra pagina e non sarannonemmeno molto utili ai motori di ricerca).

9. Mettere i file CSS e JavaScript indocumenti esterni

Per richiamare un foglio di stile posto in un file esternopotete 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 poiimmagazzinato nella cache del browser dell'utente.Inoltre è consigliabile non usare un file gigantescoche contenga tutti i fogli di stile, bensì suddivideregli stili in più files che verranno richiamati dallepagine 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 finedell'URL il server non comprende se il collegamento stapuntando ad un file o ad una directory. Se includete ilcarattere "/" , il server capisce istantaneamenteche il collegamento sta puntando ad una directory e non devespendere del tempo per capire che tipo di collegamento sia.



Ti potrebbe interessare anche

commenta la notizia