Mostrar el tiempo de carga de las páginas

Para quienes gustan de verificar los tiempos de carga, en Himsomnio nos muestra un método para medir y mostrar el tiempo de carga de cualquier página web.

Usando un pequeño script podemos agregar esta función en nuestro sitio y, modificándolo un poco, podríamos usarlo para medir y mostrar el tiempo de carga de cada una de las páginas del blog.

Colocamos el siguiente script antes de </head>:

<script type='text/javascript'>
//<![CDATA[
var startTime = new Date();
function showElapsedTime() {
var testSiteUrl = location.href;;
var testSiteString = String(testSiteUrl).slice(testSiteUrl.indexOf("www"));
var endTime = new Date();
var elapsedTime = Number(endTime-startTime);
var browser=navigator.userAgent;
var platform=navigator.platform;
var msgString = "Tiempo de carga<br/> " + Number(elapsedTime/1000) + " segundos (" + elapsedTime + " ms)<br/><span>Navegador " + browser + "</span>";
document.getElementById("mostrarTiempo").innerHTML = msgString;
}
onload=function() {showElapsedTime();}
//]]>
</script>

Ahora, agregaremos un elemento HTML en la sidebar o en el footer, allíi donde quisiéramos que se mostrara:

<div id="mostrarTiempo">Cargando ...</div>

Eso es todo.

Si quisiéramos personalizarlo un poco, hay dos cosas que podemos hacer: modificar la salida del script:

var msgString = "Tiempo de carga<br/> " + Number(elapsedTime/1000) + " segundos (" + elapsedTime + " ms)<br/><span>Navegador " + browser + "</span>";

y agregarle propiedades CSS:

<style>
#mostrarTiempo {
border: 1px dotted #456;
color: #CDE;
font-size: 12px;
padding: 10px;
text-align: center;
}
#mostrarTiempo span {
display: block;
color: #678;
font-size: 11px;
}
</style>