Google AJAX Libraries API è un network di distribuzione per le più popolari librerie Javascript open source.
Rappresenta un modo davvero utile per utilizzare librerie Javascript in modo più efficiente per aumentare la velocità di caricamento delle pagine di un sito.
Vediamo meglio di cosa si tratta.

Molto spesso nella realizzazione di un sito web si ricorre all’uso di potenti librerie Javascript come ad esempio Jquery, MooTools, Prototype ecc…
Queste librerie facilitano molto gli sviluppatori nella realizzazione di funzionalità client side permettendo anche di ottenere effetti grafici e animazioni davvero molto accattivanti con uno sforzo minimo.
Purtroppo però il peso di queste singole librerie può anche superare i 50 KB senza considerare eventuali plugin aggiuntivi per realizzare funzionalità specifiche.
Inoltre va anche considerato il fatto che molto spesso queste librerie vengono utilizzate contemporaneamente all’interno dello stesso sito.
Detto questo è facile intuire che raggiungere un peso di 100 KB per una singola pagina è una possibilità decisamente plausibile, con conseguenze negative sulla velocità di caricamento.

Una soluzione a questo problema è l’utilizzo delle Google AJAX API tramite la funzione google.load()

Prima di vedere come possiamo utilizzare google.load() per sfruttare Google AJAX API, vediamo brevemente quali sono i principali vantaggi che derivano dall’utilizzare le librerie sopra menzionate facendo si che sia Google a fornircele anziché il server che ospita il nostro stesso sito:

• Poiché Google possiede un grandissimo content delivery network con diversi centri sparsi in tutto il mondo, è in grado di fornire i file più velocemente del server che ospita il nostro sito, utilizzando il “data center” che geograficamente si trova più vicino all’utente, aumentando così la velocità di download della pagina web.
• Utilizzando questo modo comune di accedere alle migliori librerie Javascript e grazie al fatto che questo metodo viene usato dai webmaster più accorti, esistono grandi possibilità che l’utente che visita il nostro sito abbia già visitato precedentemente un sito che caricava le stesse librerie da noi usate sempre utilizzando utilizzare google.load().
  In tal caso le librerie si trovano già nella cache del browser dell’utente e non verranno scaricate nuovamente a vantaggio della velocità di caricamento delle nostre pagine.
• Grazie al fatto che ci sono alte probabilità che le librerie Javascript da noi usate si trovino già nella cache del browser dell’utente (come visto nel punto precedente), il numero di download delle librerie Javascript diminuirà insieme alla banda utilizzata dagli utenti in visita al nostro sito.

Vediamo ora come utilizzare la funzione google.load() per usufruire delle librerie Javascript di Google AJAX API attraverso i pochi passi descritti di seguito:

• Innanzi tutto occorre creare una API key che consentirà al vostro sito di potere utilizzare le di Google AJAX API. Potete generare l’API Kei al seguente indirizzo code.google.com/intl/it-IT/apis/ajaxsearch/signup.html
• A questo punto vi basterà inserire il seguente codice contenente l’API Kei generata nell’header delle vostre pagine web

  <script type="text/javascript" src="http://www.google.com/jsapi?key=TUA-API-KEY"></script>

• L’ultimo passaggio è quello di caricare le librerie Javascript di cui necessitate nella vostra pagina web come nell’esempio seguente:

  <script type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.1");
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
google.load("mootools", "1.2.4");
google.load("dojo", "1.4.1");
google.load("swfobject", "2.2");
google.load("yui", "2.8.0r4");
google.load("ext-core", "3.1.0");
</script>
  Il primo parametro passato nella fuznione google.load() è il nome della libreria mentre il secondo rappresenta la versione.

Per maggiori dettagli su come utilizzare Google AJAX API vi rimando alla documentazione ufficiale: AJAX Libraries API Developer’s Guide.

Vai all’ indice degli articoli » Velocità e SEO

Articoli correlati:

1. Velocizzare i social plugins con jQuery e Ajax
2. Social plugins: come usarli senza compromettere la velocità
3. Velocizzare i social plugins con Ajax e Javascript
4. Velocità e SEO
5. Codice pulito, contenuti leggeri e cache del browser

Esistono diverse tecniche per aumentare la velocità, l’efficienza, e le prestazioni di un sito.
Prima di concentrarci sulle tecniche più avanzate, che sicuramente vedremo nei prossimi articoli, vorrei soffermarmi sulle basi. Su quelle pratiche e quegli accorgimenti che ogni webmaster dovrebbe conoscere e possibilmente mettere in pratica per aumentare la velocità del proprio sito e di conseguenza migliorare la “user experience” dei propri utenti.
Concentrarsi sulle tecniche più avanzate senza curarci di queste cose sarebbe a mio giudizio ridicolo.

Ancora oggi sul web esistono siti costruiti senza curare minimamente l’aspetto della velocità. Siti che, nonostante le potenzialità della connessioni di oggi, impiegano ancora 15 secondi a caricare una pagina. Siti che semplicemente sfruttando le tecniche di base potrebbero essere anche 10 volte più veloci.

Vediamo, in due articoli, quali sono questi aspetti di base che ci possono aiutare a velocizzare un sito web.
Mentre nel prossimo articolo tratteremo l’ottimizzazione delle immagini sia per quanto riguarda la compressione che la scelta del formato, in questa prima parte vedremo come alleggerire il codice e i contenuti e a sfruttare la cache dei browser web.

Utilizzare i CSS

L’uso dei CSS per costruire il layout della pagina è molto importante per almeno due motivi.
In primo luogo l’uso dei CSS permette di ottenere un codice più snello e pulito rispetto ad una pagina il cui layout è basato ad esempio sull’uso delle tabelle e dei loro attributi. Con i CSS tendenzialmente possiamo ottenere degli effetti di stile utilizzando meno codice rispetto a quando non li utilizziamo. Meno codice in pagina significa pagine più leggere e quindi veloci da scaricare e minore difficoltà anche per i motori nella ricerca dei contenuti all’interno del codice.
Seconda cosa molto importante è che i CSS possono essere inseriti in un file esterno alla pagina che ne fa uso. In questo modo un browser web può memorizzare le informazioni del layout contenute nel file CSS nella sua cache in modo che agli accessi successivi non debba scaricare nuovamente il file. In tal modo la velocità di caricamento aumenta visto che per gli accessi successivi la quantità di byte delle informazioni di stile non verrà più scaricata.

Evitare tabelle annidate

Come già emerso precedentemente l’utilizzo delle tabelle atte alla formattazione della pagina sarebbe da evitare a favore dell’utilizzo dei CSS.
Questo non significa che le tabelle non debbano più essere usate in nessun caso.
Per la visualizzazione di dati tabulari, soprattutto se in gran quantità, restano ancora un’ottima soluzione.
Occorre però cercare di evitare la creazione di tabelle nidificate (o se preferite tabelle innestate). Questo perché più la nidificazione delle tabelle è complessa più il browser impiegherà tempo nella renderizzazione della pagina visto che prima di disegnala dovrà avere letto l’intero codice html dell’aggregazione realizzata.

Usare script esterni

Il codice javascript dovrebbe essere sempre inserito in un file esterno soprattutto nei casi in cui lo stesso codice è utilizzato in più pagine.
Anche in questo caso infatti, come visto precedentemente per il file CSS, il browser può memorizzare nella sua cache il file contenente gli script velocizzando gli accessi successivi.
Per importare un file di script “tuo script.js” all’interno di una pagina web basta inserire il codice seguente:
<script type="text/javascript" src="yourscript.js"></script>
Soprattutto in casi in cui vi è una gran quantità di script, l’utilizzo di un file esterno può davvero permettere di risparmiare una gran quantità di tempo di caricamento.

Rimuovere tutto ciò che non è necessario

Nella costruzione di una pagina web spesso bisogna scendere a un compromesso. L’utilizzo di molte immagini, applicazioni flash ed effetti vari atti ad impressionare l’utente possono appesantire di molto il sito e peggiorare notevolmente la “user experience” dell’utente.
In alcuni casi occorre frenare un po’ l’entusiasmo e magari rinunciare a mettere in mostra tutta la nostra abilità nella costruzione di componenti “belli” ma talvolta inutili e spesso controproducenti in termini di accessibilità e velocità.
Spesso un valido compromesso sta nell’utilizzo di script o librerie come jquery che permettono di ottenere effetti molto accattivanti con davvero poco impatto sul peso dei contenuti e sulla velocità di caricamento.
Tra i contenuti inutili rientrano però anche quelle porzioni di codice che sono presenti ma non hanno nessuna utilità. Si tratta spesso di codice inserito da qualche editor utilizzato per la realizzazione della pagina. L’ideale sarebbe sempre ricontrollare il codice per eliminare le parti inutili.
L’eliminazione del codice inutile non solo sarà utile per aumentare la velocità di caricamento ma vi fara compiere un passo positivo anche in direzione della qualità del sito.
Alcuni webmaster consigliano anche di eliminare gli spazi, gli a capo e le indentazioni.
Sebbene per pagine molto ricche questo può effettivamente significare una riduzione di peso della pagina da tenere in considerazione, il mio consiglio è quello di pensare anche alla leggibilità e alla manutenibilità del codice. Eliminare indentazioni e caratteri di a capo potrebbe permettervi si di avere un guadagno (più o meno ingente) in termini di velocità e prestazioni ma a fronte di un tragica esperienza futura in termini di manutenibilità.

Vorrei anche aggiungere, per completare questo punto, un piccolo sfogo personale verso tutte quelle persone che realizzano pagine associando una musica di sottofondo.
Personalmente credo che la musica di sottofondo non porti nessun vantaggio e solo tanti svantaggi.
L’unica cosa sensata che mi viene da pensare è che chi decide di inserire un audio di sottofondo lo faccia per creare un clima adatto alla pagina visitata. Un tentativo di rilassare l’utente oppure di “gasarlo”.
Ma vediamo quali potrebbero essere i lati negativi di aggiungere l’audio di sottofondo alla vostra pagina web:

• Un utente che naviga all’una di notte e arriva sul vostro sito subirà inevitabilemnte le ire di chi magari sonnecchiava sul divano nella stessa stanza.
• Chi sta navigando durante il lavoro (prendendosi qualche minuto di pausa) non sarà felice di averlo fatto sapere anche al suo capo grazie proprio alla musicalità del vostro sito.
• Molte persone ascoltano la musica in cuffia mentre navigano e la musica del vostro sito si andrebbe a sovrapporre a quella ascoltato dall’utente.
• Per concludere, la maggior parte delle persone che arriva su un sito che inizia a suonare spegne le casse entro i primi 5 secondi.
Il file audio verrà scaricato dal browser e ciò inciderà sulla velocità di scaricamento della pagina web.

Insomma io credo che siano davvero rari o forse unici i casi in cui la musica di sottofondo sia utile e apprezzata dall’utente. Siete d’accordo con me?

Dividere su più pagine contenuti molto lunghi

Se avete la possibilità di farlo, suddividete testi troppo lunghi su più pagine. In questo modo otterrete singole pagine più leggere e, se siete abbastanza accorti potrete anche riuscire migliorare i valori di keyword density.
Inoltre ricordatevi sempre che molta gente, nel vedere una scroll bar “troppo lunga” tende a demoralizzarsi e a fuggire ancora prima di aver capito se il contenuto è o meno valido.

Per ora è tutto, nel prossimo articolo continueremo il discorso sulle tecniche di base parlando di ottimizzazione delle immagini e della loro compressione.

Vai all’ indice degli articoli » Velocità e SEO

Articoli correlati:

1. “google.load()”: più velocità con Google AJAX Libraries API
2. Velocizzare i social plugins con jQuery e Ajax
3. Velocità e SEO
4. Velocizzare i social plugins con Ajax e Javascript
5. GZIP compression