En muchas ocasiones nos encontramos códigos bastante genéricos que se usan en muchos sitios web, como puede ser el de Google Analytics. Aunque en este caso Google se preocupa por darnos la mejor solución… ¿es realmente la óptima?
CÓDIGO DE GOOGLE ANALYTICS
Categoría: Conectividad, Contenidos
Uno de los códigos que muchos sitios web tienen es el código de Google Analytics. Aunque Google se preocupa por darnos las mejores opciones siempre se puede mejorar, aunque suponga cierto trabajo por nuestra parte, que será de agradecer para los usuarios.
Básicamente hay 3 cosas que podemos hacer para mejorar el rendimiento del código:
- Colocar el código en el pie de página.
- Cachear en el servidor local el fichero JavaScript.
- Eliminar el cálculo de HTTP Seguro.
Por normal general Google, con su código asíncrono, nos pide que coloquemos el código justo antes del </head>. Esto puede generar un bloqueo en la paralelización de peticiones, por lo que es mejor incluirlo en el pie de página, justo antes del >/body>.
Si miramos el código original podremos ver que siempre se hace una petición al archivo http://www.google-analytics.com/ga.js y que este se cachea durante tan sólo 1 hora. En este caso, a sabiendas de que el código de Google Analytics no cambia con tanta frecuencia, lo mejor es descargarlo (si puede ser de forma automática con un Cron cada 6 horas, por ejemplo, mejor) y tenerlo en el propio servidor estático.
Para acabar, la mayoría de sitios web suelen estar en protocolo HTTP y no en el HTTP Seguro. Google Analytics está pensado para ser un código estándar y eso implica que ha de calcular, por cada impresión, si el sitio está en seguro o no.
Con todo esto, podríamos generar un código para Google Analytics mucho más sencillo y que puede llegar a funcionar hasta un 15% más rápido que el que nos ofrece la propia Google.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXXX-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'http://www.example.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
Este sería el código por defecto simplemente eliminando la primera petición DNS y el protocolo seguro… pero ¿se puede mejorar el código propio JavaScript? La respuesta es sí, siempre y cuando usemos el código “general”.
<script type="text/javascript">
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview'], ['_trackPageLoadTime']];
setTimeout((function(d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.async = 1;
g.src = '//www.example.com/ga.js';
s.parentNode.insertBefore(g,s);
} , 0);
</script>
Este nuevo código mejora la carga de las variables, añade el seguimiento de tiempos de carga del propio Google Analytics y es compatible con el protocolo que sea. Además, se carga con un setTimeout() para no forzar el renderizado.
GOOGLE ANALYTICS PARA MEDIR LA VELOCIDAD DE CARGA DE UNA PÁGINA
Categoría: Contenidos
Hace un momento os comentaba que como punto diferencial el código de Google Analytics debería estar al final de la página, algo que nos permite hacer un pequeño hack para medir el tiempo de carga de una página y enviarlo a Google Analytics y así poder jugar con los filtros avanzados y saber qué páginas van más rápido y cuáles más lentas, y así poder tomar decisiones.
Eso sí, una cosa a tener en cuenta es que esto no deberíamos tenerlo siempre, sino usarlo con usuarios de prueba, administradores y usuarios aleatorios.
El primer paso es, justo después del <head> incluir un código tal que así:
<head>
<script type="text/javascript">
var tiempoini = new Date();
</script>
En este momento pondremos un contador de tiempo en marcha. Ahora, justo en el código de Google Analytics haremos ciertos cambios para calcular cuánto ha tardado en cargar el código de la página y enviarlo al sistema de analítica.
Para ello haremos algunos cambios tal que así:
<script type="text/javascript">
window.onload=function() {
var tiempofin = new Date();
var tiempocarga = tiempofin.getTime() - tiempoini.getTime();
if(tiempocarga <1000)
textocarga = "MuyRapido";
else if (tiempocarga <2000)
textocarga = "Rapido";
else if (tiempocarga <3000)
textocarga = "Normal";
else if (tiempocarga <5000)
textocarga = "Regular";
else if (tiempocarga <10000)
textocarga = "Lento";
else
textocarga = "MuyLento";
var direccion = document.location.pathname;
if( document.location.search)
direccion += document.location.search;
try {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXXX-1']);
_gaq.push(['_trackEvent','TiempoCarga (ms)', textocarga + ' PaginaCarga', direccion, tiempocarga]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'http://www.example.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
} catch(err){}
}
</script>
Gracias a esto conseguiremos ver en los eventos de Google Analytics los textos que indicarán el tiempo de carga de las distintas páginas agrupadas según la velocidad y así poder tomar decisiones en caso de ser necesario.
CÓDIGO DE GOOGLE ADSENSE
Categoría: Conectividad, Contenidos
Al igual que el código de Google Analytics, sin duda el código de Google AdSense es otro de los más utilizados en la red, y aunque internamente se han hecho cambios para mejorar su rendimiento, la forma de cargar tiene una situación más comprometida debido a que se utiliza la función document.write que impide su carga asíncrona.
La única forma, por ahora, que tenemos, es la de mejorar la carga del fichero JavaScript reduciendo la petición DNS en primera instancia y cacheándolo con más frecuencia. Por defecto Google lo almacena durante 1 día. Nosotros también podemos hacerlo, descargándolo de forma automática con un Cron cada 6 horas y tenerlo en nuestro propio servidor estático.
<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
//--></script>
<script type="text/javascript" src="http://www.example.com/show_ads.js"></script>
TIEMPOS DE INACTIVIDAD DEL SITIO WEB
Categoría: Conectividad, Contenidos
Uno de los problemas más habituales que nos podemos encontrar a la hora de actualizar un sitio es qué hacer en el tiempo en el que la web está caída debido a la actualización. En muchos casos podemos hacer una actualización transparente pero en otros casos no.
En estos casos deberíamos aplicar el código HTTP 503 Service Temporarily Unavailable que evitará que los usuarios puedan acceder a contenidos indebidos, o que los motores de búsqueda comiencen a indexar el mensaje de error como páginas correctas.
Este código deberá ir acompañado siempre de la fecha siguiente en la que el sitio debería comenzar a ser rastreado de nuevo. Por ejemplo tendríamos un código en PHP tal que así:
header('HTTP/1.1 503 Service Temporarily Unavailable');
header('Retry-After: Sat, 8 Oct 2011 18:27:00 GMT');