L'annuncio di oggi che Google Analytics lancia Asynchronous Tracking è musica per le mie orecchie. Esso non solo rendere i siti web più veloce, il passaggio verso questo modello async migliora uptime e aumenta la quantità di dati di analisi dei dati raccolti.

I'll toccano ciascuno di questi tre vantaggi, e wrap-up, con una panoramica del nuovo frammento di codice.

Il dolore di caricamento dei file JavaScript è che bloccare la pagina da rendering e bloccare altre risorse da scaricare. Ci sono soluzioni a questi problemi. Capitolo 4 della Ancora più velocemente Siti Web descrive le tecniche per sei Caricamento degli script senza bloccare. Uno di questi, lo script DOM approccio Element, è la tecnica utilizzata nel nuovo modello di async di Google Analytics. File ga.js Google Analytics 'è un perfetto esempio di uno script che devono essere caricati in modo asincrono - non aggiungere alcun contenuto alla pagina, quindi vogliamo caricare senza bloccare le immagini ei fogli di stile, che danno agli utenti ciò che realmente si da vedere.

Che cosa succede se uno script richiede molto tempo per caricare, o non riesce a caricare? Perché gli script di rendering di blocco, gli utenti sono rimasti a guardare una pagina vuota. Google Analytics è un'infrastruttura incredibile alle spalle, ma qualsiasi risorsa, soprattutto da parte di terzi, deve essere aggiunto con cautela. E 'fantastico che il team GA evangelizzatrice è un modello che consente al sito al fine di rendere ga.js mentre viene scaricato.

Una soluzione al problema è quello di spostare il blocco di script per la parte inferiore della pagina. In realtà, questo è esattamente ciò che è proposto in il vecchio ga.js snippet. Ma questo significa che gli utenti che lasciano una pagina in fretta, non genererà alcun dati di Google Analytics (che prima di lasciare lo script nella parte inferiore termina il caricamento). Passaggio al modello async e il caricamento nella parte inferiore della testa della pagina, come suggerito, significa più di questi punti di vista resoconto della pagina viene misurata. Questo è troppo bello per credere - non solo si ottiene una più veloce, la pagina più resistenti, ma in effetti potrete intuizioni meglio nel traffico.

Giusto per essere chiari, ga.js continuerà a lavorare anche se i proprietari del sito web non apportare alcuna modifica. Ma, se volete un sito più veloce, maggiore uptime, e più dati, ecco quello che il frammento di nuovo async appare come segue:

_gaq var = _gaq | | [];
_gaq.push ([ '_setAccount', 'UA-xxxxx-x']);
_gaq.push ([ '_trackPageview']);

(function () (
var GA = document.createElement ( 'script');
= ga.src ( 'https:' == document.location.protocol?
    'https: http://www / / ssl': '') +
    '.google-analytics.com/ga.js';
ga.setAttribute ( 'async', 'true');
document.documentElement.firstChild.appendChild (GA);
})();

È estremamente cool per vedere questo modello di essere evangelizzata per esempio un pezzo importante di Internet. Alcuni articoli di nota:

• Ovviamente, dovete sostituire "UA-XXXXX-X" con il vostro ID.
• Poiché ga.js viene caricato in modo asincrono, ci deve essere un modo per i proprietari di siti web per la loro coppia desiderata funzioni GA con il codice, quando termina il caricamento. Questo viene fatto premendo i comandi sull'oggetto Google Analytics coda, _gaq.
• Una volta che tutti i comandi di callback sono messo in coda, lo script ga.js viene caricato. Questo è racchiuso in una funzione anonima per evitare conflitti di namespace.
• All'interno della funzione anonima è dove si vede lo script DOM Element approccio utilizzato - con due miglioramenti Nizza. Elemento script A '' è stato creato e la sua SRC è impostato il ga.js URL appropriato. Guardando avanti a sostegno della asincrono script in HTML5, L'attributo 'async' è impostata su 'true'. Very nice! Il vantaggio principale di questo è che dice al browser che i successivi script che possono essere eseguiti immediatamente - non c'è bisogno di aspettare per ga.js. L'ultima riga aggiunge l'elemento di script per il DOM. Questo è ciò che fa scattare il download effettivo di ga.js. Nella maggior parte dei miei codice faccio document.getElementsByTagName ( "head") [0]. AppendChild, ma che non riesce, se il documento non ha un elemento di testa. Questa è una più robusta implementazione.

E 'sempre difficile trovare il punto giusto della curva complexibility. Questo frammento async colpisce giusto. E 'un po' più complesso di quanto il vecchio modello, Ma non di molto. Oltre ai vantaggi evidenziati qui, questo nuovo modello è in grado di sostenere modelli di utilizzo più avanzato, anche spingendo una serie di comandi e spingendo le funzioni.

Il tema guida gran parte del mio lavoro di quest'anno è Fast di default. Voglio ad alte prestazioni per la cottura nelle componenti principali del web, quindi le cose sono solo veloci. Vedendo Google Analytics adottare questo modello async alte prestazioni è una vittoria enorme. Ma la prova è nel budino. Se passare al nuovo modello async, la misura di come essa influisce i tempi di caricamento delle pagine e la quantità di dati raccolti, e aggiungere un commento qui sotto. La mia previsione: 200ms più veloce e il 10% più dati. Che cosa vedi?