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>

Cargando ...