Dec 05 2009
Nuovo script asincrono, siti più veloci
[Questo è un guest-post di Alessandro Martin. Mi fa piacere perché me l'ha proposto lui in un momento in cui per via di un corso di formazione non avevo tempo di scriverlo da me]
Da pochissimo il team di Google Analytics ha rilasciato una nuova versione dello script di tracciamento. Vediamo insieme quali sono le novità.
Piccola premessa
Quando il browser visualizza una pagina web deve scaricarne tutti i componenti: immagini, file CSS, script Javascript, ecc… Il browser è in grado di scaricare in parallelo più di un file ma non gli script Javascript che vengono invece sempre scaricati uno alla volta. Ne consegue che tutto quello che si trova dopo uno script in una pagina web non può né essere scaricato né essere visualizzato fino al completo caricamento dello script stesso. Per questo le linee guida per il vecchio codice di Google Analytics suggeriscono di inserire lo script subito prima della chiusura del tag <body>. In questo modo il codice di tracciamento interferisce il meno possibile con il caricamento della pagina che può comunque essere visualizzata fino in fondo. Con questo metodo però tutti quegli utenti che abbandonano la pagina prima che il codice sia completamente caricato non vengono tracciati, portando ad una perdita di dati più o meno importante a seconda dei casi.
Cosa è cambiato?
Con il nuovo codice di Google Analytics cambia il meccanismo con il quale il codice di tracciamento viene richiamato nella pagina. Al costo di una leggera complicazione dello script si ottengono tre benefici principali.
- Aumenta la velocità di caricamento delle pagine. La tecnica di inclusione utilizzata, descritta qui per i temerari non blocca il download parallelo.
- Migliore esperienza utente. Nel caso in cui i server di Google Analytics impiegassero molto tempo a rispondere l'utente non si accorgerebbe di nulla perché il nuovo script viene caricato "in background".
- Più dati. Sarà possibile inserire il nuovo codice nella sezione <head> della pagina HTML evitando la potenziale perdita di dati descritta più sopra.
Feticismo Javascript: il codice visto da vicino
Diamo un’occhiata da vicino al codice per capire dove stanno le novità:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www') +
'.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
})();
La prima riga del codice crea una coda, ovvero una struttura dati, un contenitore che permette di conservare al suo interno oggetti o funzioni. Nella seconda e terza riga viene richiamato due volte il metodo _gaq.push() che serve per inserire nel contenitore appena creato le chiamate alle funzionalità di GA che si vogliono utilizzare e che verranno conservate finché il codice ga.js non verrà realmente caricato. Le righe successive, incluse in una funzione anonima per evitare di disturbare il funzionamento di altri script nella pagina, si occupano di:
- costruire nel DOM del documento un elemento <script> con nell’attributo src la URL dello script ga.js.
- inserire nel primo nodo figlio del documento HTML (solitamente il tag <head>) il tag <script> appena creato.
Tempo di migrare?
La migrazione è consigliata ma non obbligatoria. Il vecchio codice “sincrono” continuerà ad essere supportato probabilmente per lungo tempo. Personalmente credo che qualunque cambiamento che migliori la velocità di un sito e quindi la qualità l’esperienza dell’utente sia da abbracciare senza pensarci due volte. Per esperienza però so che anche un cambiamento apparentemente semplice come la sostituzione del codice di tracking è una battaglia che in certi contesti può lasciare sparsi sul terreno morti e feriti in gran quantità 
. Google fornisce una guida dettagliata per la migrazione con diversi esempi di configurazioni tipiche, quindi mi raccomando: pianificate bene la vostra migrazione e non lasciate in giro (orrore!) pagine con un doppio codice di tracciamento.
[considerazione personale: È un'ottima cosa che Google abbia ascoltato il parere di chi voleva questa funzionalità. Personalmente non ho mai notato rallentamenti di sorta per via del GATC, ma in alcuni casi combinandolo con altri script vi era un "effetto imbuto". Peraltro questa mossa arriva insieme a molte altre nel settore "velocità": prima Matt Cutts dichiara che in futuro i siti più veloci a caricare potrebbero avere un livee vantaggio nel posizionamento, poi Google tira fuori un po' di strumenti per i programmatori,sistemisti e webmaster (page speed, il protocollo SPDY, il compressore javascript Closure, la visualizzazione dei tempi di caricamento su Webmaster tools), poi Analytics introduce lo script asincrono, infine Google annuncia i propri DNS free, ovviamente velocissimi. Stanno provando in tutti i modi a velocizzare il web, e Francesco Piersimoni ha ragione: lo stanno facendo per preparare il campo all'arrivo di ChromeOS, che sul web praticamente vive e prospera. Anche Wave potrebbe avere la sua parte in tutto questo, ma una cosa è certa. Se il web andrà più veloce, ci guadagneremo prima di tutto noi utenti e poi sicuramente anche Google.]
[contenuto bonus: Francesco Terenzani ha subito scritto un post per aggiornare tutti noi sull'utilizzo della sua mitica libreria per tracciare automaticamente link esterni e download. Lo trovate sul suo blog]
[photo credit: mainblanche on Flickr]
Articoli collegati:
Mi era venuta voglia di provare questo codice per vedere aumento / calo di prestazioni, ma nel mio profilo non lo vedo ancora disponibile. E’ per caso nascosto da qualche parte o in beta?
essendo una funzionalità avanzata, credo che per ora tu debba comportelo da te usando le istruzioni della documentazione ufficiale
Per esperienza però so che anche un cambiamento apparentemente semplice come la sostituzione del codice di tracking è una battaglia che in certi contesti può lasciare sparsi sul terreno morti e feriti in gran quantità
Evitiamo battute cretine pls