SEO Italy blog: articoli, video e tutorial di approfondimento su posizionamento web e motori di ricerca

Visto il peso che la velocità di caricamento riveste nel posizionamento e soprattutto nella qualità dell'esperienza dell'utente sul nostro sito, diventa molto importante cercare di ottimizzare il più possibile le proprie pagine e tutti gli elementi che le compongono.

In questo articolo vogliamo analizzare un paio di tecniche che non contribuiranno ad aumentare la velocità di caricamento ma piuttosto a far apparire "prima" i contenuti più importanti, trasmettendo dunque all'utente la sensazione di velocità delle nostre pagine ed aiutando gli spider ad individuare meglio le parti che noi desideriamo mettere in evidenza sui motori di ricerca.

DIV, table-less layout, elementi della pagina e posizionamento
Partiamo dal presupposto che attraverso l'utilizzo dei DIV è possibile posizionare e gestire i vari elementi delle nostre pagine in maniera più efficiente e "libera": non vogliamo approfondire qui questo argomento (su cui sono stati scritti libri e libri) ma è importante che chi vuole applicare queste tecniche di ottimizzazione sappia bene come utilizzare i DIV, posizionarli e gestirli attraverso JavaScript.

Utilizzando al meglio i DIV si possono creare siti web "table-less", ovvero sito dove non vengono utilizzate le tabelle per organizzare i contenuti. Tutto SEO Italy, ad esempio, è realizzato senza tabelle per strutturare le pagine, affidandosi solo alla potenza dei DIV e del CSS per posizionare tutti gli elementi utilizzati.

I vantaggi di questo approccio sono:

• le pagine sono più leggere dal momento che serve meno codice HTML per ottenere lo stesso risultato
• la struttura del sito è più flessibile e facile da mantenere: ogni elemento ha una "vita" propria e può essere spostato o modificato con maggiore facilità
• è più facile, in prospettiva, applicare un valore semantico ai vari elementi
• soprattutto (questo è quello che più ci interessa qui) è possibile decidere in maniera precisa quali parti far apparire per primi

Come vedremo questo risultato si può ottenere anche con un layout che utilizzi tabelle ma adottare un approccio "table-less" è vincente perchè unisce tutti i vantaggi citati in un unica soluzione.

Struttura del codice, velocità e importanza di inserire "prima" le informazioni più importanti
E' ormai assodato che i motori di ricerca diano peso anche alla posizione nella pagina HTML dei contenuti, ritenendo più importanti quelli che appaiono "più in alto" nel codice HTML e dando meno importanza a quelli che appaiono dopo. Oltre a ciò i browser compongono la pagina secondo quella che è la struttura del codice: se dunque un elemento più lento (ad esempio un'immagine molto pesante, o il codice di un banner pubblicitario) nel flusso dell'HTML è prima di un testo importante quest'ultimo potrebbe non essere mostrato fino a che l'immagine non è caricata o il banner scaricato dal server di pubblicità.

Per questo motivo diventa essenziale scrivere il codice della pagina in modo che i contenuti testuali importanti siano preceduti il meno possibile da altri elementi "secondari": qui di seguito analizziamo due tecniche per raggiungere in maniera semplice ed efficace questo obiettivo.

1. Posizionare i DIV con il CSS
   Questa è la tecnica utilizzata dal nostro sito web: analizzando il codice della pagina, infatti, si nota come la parte centrale - cioè quella dove sono presenti i contenuti più importanti, l'H1, il testo principale - appaia per prima nel flusso HTML rispetto alla barra laterale con il menu, sebbene questa sia visualizzata correttamente sulla sinistra. Questo risultato è ottenuto attraverso l'utilizzo di due DIV (il "container" principale e la barra sinistra) e l'attributo CSS "float", allineando la parte principale a destra e la colonna a sinistra: in questa maniera, anche se nell'HTML viene scritta per prima la cella centrale, nel browser viene mostrato il tutto nella maniera giusta
   
   
2. Utilizzare JavaScript per caricare i contenuti secondari alla fine
   Questa tecnica prevede di creare dei "segnaposti" vuoti per i contenuti che vogliamo siano caricati alla fine e riempirli solo dopo che il resto della pagina è stato mostrato. Ad esempio questo approccio è molto utile per caricare i banner pubblicitari che spesso, essendo ospitati su altri server, potrebbero rallentare notevolmente il rendering dell'intera pagina. In sostanza si tratta di:
1. creare un DIV che contenga il banner (chiamiamolo "banner728") e posizionarlo dove apparirà il banner, lasciandolo vuoto ma dandogli già le dimensioni adeguate
2. alla fine della pagina (prima del </body> finale) inserire un codice JavaScript tipo questo:
   
   <script type="text/javascript">
   document.getElementById("banner728").innerHTML = "codice del banner";
   </script>
   
   In questa maniera il codice del banner verrà caricato solo alla fine, evitando di rallentare il caricamento del resto della pagina