Esto puede ser bueno para determinar si es un tiempo adecuado o tarda demasiado, y así evaluar si hay que hacerle algún tipo de reforma a nuestro blog o página.
Hay varias páginas que podemos ver el tiempo de carga como pueden ser Pingdom o Webwait.
Esta ves con un sencillo código JavaScript, lo podemos mostrar en el blog o página.
Primero pondremos el código JavaScript.
Ir a Diseño, Edición de HTML y justo arriba de </head>
Poner el siguiente código:
<script type='text/javascript'>
//<![CDATA[
var iniciotp=new Date();
iniciotp=iniciotp.getTime();
function initp() {
fintp=new Date();
fintp=fintp.getTime();
tiempo=(fintp-iniciotp)/1000;
document.getElementById('tmpini').innerHTML=tiempo;
}
window.onload=initp
//]]>
</script>
Si queremos que en determinado tiempo deje de mostrar el aviso, hay que agregar otra función con setTimeout
El código a poner en lugar del anterior, sera el siguiente:
<script type='text/javascript'>
//<![CDATA[
var iniciotp=new Date();
iniciotp=iniciotp.getTime();
function initp() {
fintp=new Date();
fintp=fintp.getTime();
tiempo=(fintp-iniciotp)/1000;
document.getElementById('tmpini').innerHTML=tiempo;
}
window.onload=initp
function cerrartiempo(){
div = document.getElementById('tiemposeg');
div.style.display='none';
}
setTimeout(cerrartiempo, 25000);
//]]>
</script>
Modificamos los milisegundos. (En el ejemplo se cierra a los 25 segundos.)
Ahora pondremos donde queramos mostrar el aviso, que puede ser en un gadget HTML/Javascript,
o directamente abajo de <body>.
Poner lo siguiente:
<div id='tiemposeg' style='text-align: center;color:#369'>Tiempo que ha tardado la página en cargarse: <span id='tmpini' style='color:red'>Calculando...</span> segundos.</div>
Se puede personalizar, cambiando el texto, color etc...
Si solo quieren verlo ustedes sin mostrarlo a los visitantes le agregaremos las clases item-control blog-admin
De la siguiente forma:
<div class='item-control blog-admin' id='tiemposeg' style='text-align: center;color:#369'>Tiempo que ha tardado la página en cargarse: <span id='tmpini' style='color:red'>Calculando...</span> segundos.</div>
0 comments:
Post a Comment