Dec 05 2009
SemaforoQuesto semaforo indica il livello difficoltà del post
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]
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
Ciao a tutti! ^__^
Innanzitutto complimenti per l’articolo: chiaro ed estremamente interessante. Avrei un quesito, relativamente all’argomento, che vorrei sottoporvi. E ringrazio anticipatamente tutti coloro che vorranno aiutarmi.
Da alcune settimane ho implementato la versione asincrona di GATC in questo sito: taff.biz
Sebbene GA sembri funzionare correttamente (per lo meno, i report quotidiani vengono generati regolarmente), la versione 1.9 di Page Speed continua a rilevarmi il download in modalità sincrona… E quindi mi assegna errore.
Secondo voi, di cosa si tratta?
Nel caso possa tornae utile alla ricostruzione del problema, vi dico come ho operato per la migrazione:
– ho cancellato il precedente codice GA (quello sincrono, posizionato a fondo pagina)
– co copiato-incollato il nuovo codice asincrono GA all’interno del tag (immediatamente prima del tag di chiusura)
– ho sostituito il codice ‘UA-XXXXX-X’ con quello dell’account
Qualche idea?!?
Un salutone!
Maino
l’errore che vedo su PageSpeed è relativo al tempo di caching del file javascript di Analytics, non alla sua asincronicità…
Ciao Marco e grazie mille per la risposta! ^__^
Tuttavia, temo che tu non stia utilizzando Page Speed 1.9, ma una versione precedente… Perché altrimenti dovresti visualizzare il messaggio che ti dicevo e che ti riporto di seguito:
“The following resources are loaded synchronously. Load them asynchronously to reduce blocking of page rendering.
* http://www.taff.biz/ loads http://www.google-analytics.com/ga.js synchronously.”
Come vedi non lascia dubbi… ;-(
Help!!
Maino
era la 1.9, ma ho trovato la parte che dici tu. Se ti può consolare, la da anche su questo sito…
In effetti ho appena fatto una prova sulla homepage di goanalytics.info e viene visualizzato il medesimo errore… Che sia forse un bug dello script? Sarebbe interessante avere altri resoconti…
Vi segnalo, comunque, che avevo aperto un thread simile anche su GT-Forum (http://www.giorgiotave.it/forum/consigli-seo-e-penalizzazioni/150723-caso-studio-incrementare-velocita-di-caricamento-pagine-forum.html) nella speranza che qualcuno partecipasse e che contribuisse a risolvere questo enigma.
Infine, con altri ragazzi di T.A.F.F., abbiamo aperto una discussione anche nel Centro WebMaster di Google (http://www.google.com/support/forum/p/webmasters/thread?tid=4ccdb26a73b06bc5&hl=it)… Speriamo che qualcuno ci dia qualche delucidazione.
Comunque sia, appena so qualcosa vi faccio sapere!
Maino
Ciao ragazzi! ^__^
Vi copio-incollo il link ad una discussione molto interessante che ho trovato su GoogleCode… Come sempre su .com sono anni luce avanti a .it
http://code.google.com/p/page-speed/issues/detail?id=346
Sembrerebbe proprio un bug di Page Speed v. 1.9
A presto!
Maino
infatti mi pare che nella 1.9.1 appena aggiornata il problema non si presenti più
Come volevasi dimostrare… Ho scaricato l’aggiornamento di Page Speed (1.9.1) e l’errore è sparito! Grazie a tutti e a presto!! ^0^
Ciao ragazzi! ^0^
Eccomi di nuovo qui con una domanda (forse un pò banale, ma la prudenza sul web non è mai troppa!) a cui non ho trovato risposta certa.
Sempre restando in tema di download asincrono: secondo voi come verrebbero scaricati più script asincroni all’interno della medesima pagina?
Cerco di spiegarmi meglio: mettiamo il caso che in una determinata pagina siano presenti diversi script (Google Analytics, un bottone di condivisione, ecc.) e tutti nella forma asincrona… Ecco, la mia domanda è: secondo voi potrebbero crearsi problemi in fase di download? Eventuali conflitti, RALLENTAMENTI, ecc?
Grazie mille in anticipo a chi avrà la bontà di rispondermi!
A presto!
Maino
conflitti, tanto quanto se non fossero asincroni, rallentamenti non nella renderizzazione della pagina ma forse nell’esecuzione dei vari javascript.
Ciao Marco,
come prima cosa ti ringrazio per la risposta! Ho fatto un piccolo test, predisponendo lo script del “pulsante di condivisione” per il download in modalità asincrona…
Adesso ho pertanto 2 script asincroni (G.A. ed il pulsante) nella medesima pagina e tutto sembra funzionare correttamente…
In termini di prestazioni, webpagetest.org mi assegna un discreto miglioramento: circa un secondo in meno per il download completo della pagina; mentre pagespeed e yslow restano grosso modo invariati.
Sarebbe interessante capire, a questo punto, quanti download asincroni è possibile porre in parallelo, senza andare ad appesantire inutilmente il carico computazionale del server.
A presto!!
Maino