Truco: Tiempo de carga de página

Fecha 27/1/2004 20:10:00 | Tema: Hacks

Basado en uno de los tutoriales del Dr. Clone, he creado una modificación para mostrar el tiempo de carga de la página. Yo le he añadido mi "toque" personal, con el tiempo que Xoops ha estado ocupado "componiendo" dicha página para enviar al servidor web.

Sólo tienes que modificar mínimamente tu theme.html (en la carpeta de tu tema) y el footer.php en el raíz de tu Xoops.

Agradecimientos al Dr. Clone por la idea madre, y a los foros de http://www.xoops.org por apuntarme el resto de ideas.

Sigue leyendo para leer el truco.
En la parte superior del theme.html, justo debajo de la etiqueta "HTML", y antes de la etiqueta "BODY", debemos insertar el siguiente código (para comenzar a calcular, desde el cliente, el tiempo que tomará cargar toda la página en nuestro navegador):

<script language=javascript>
var 
startTime=new Date();
startTime=new Date();
</script>


Ahora, pegamos justo antes del final de la tiqueta "/HTML" y antes de la etiqueta "/BODY", en el footer sería lo suyo, lo siguiente:

<script language=javascript>
endTime=new Date();
var 
responseTime=(endTime.getTime()-startTime.getTime())/1000;
var 
responseeTime=(responseTime*100)/10;
var 
responseeTime=Math.round(responseeTime);
document.write("Tiempo en cargar la página: " responseTime " segs.");
</script>


Si queremos mostrar además del texto, una barra gráfica indicadora del tiempo de carga de la página, pondremos lo siguiente justo después del código que acabamos de poner:

<table cellpadding="0" cellspacing="0" style="width:200px; height:10px; background-color:#FFE5E5; border:1px #A87171 solid;">
<
tr valign="middle" align="left"><td valign="middle" align="left">
<
script language=javascript>
document.write("<table cellpadding='0' cellspacing='0' style='width:" responseeTime "px; height:10px; background-color:#FFE5E5; border:1px #A87171 solid;'><tr><td bgcolor='#ADC1CE'></td></tr></table>");
</script>
</td></tr></table>


Como véis, se calcula el ancho de la barra indicativa en "%"... de este modo, la barra medirá de 0 a 200 píxeles, o de 0 a 20 segundos (que creo que es más que suficiente). La barra así, no es demasiado exacta -y tiene el límite de 20 segundos-, pero creo que es más que suficiente y queda muy bonita. Podéis verla en funcionamiento en el pié de página de mi sitio.

Si, además, queremos mostrar el tiempo que Xoops ha tardado en generar la página, editamos el fichero footer.php (en el raíz de nuestro Xoops, buscamos:

$xoopsLogger->stopTime();
if (
$xoopsOption['theme_use_smarty'] == 0) {


y en medio de ambas líneas, añadimos otra, quedando así el texto anterior:

$xoopsLogger->stopTime();
$ftime=$xoopsLogger->dumpTime();
if (
$xoopsOption['theme_use_smarty'] == 0) {


Luego, volvemos a nuestro theme.html, y donde queramos indicar el tiempo que Xoops se ha tomado, pondremos:

<{php}>global $ftime; echo "Xoops tardó $pers";printf("%01.3f",round($ftime*1000)/1000); echo " segs.";<{/php}>


Para mostrar la barra con el tiempo que Xoops se ha tomado en preparar la página, he incluído el siguiente código (tomando como base el buen código que Dr. Clone nos puso:

<table cellpadding="0" cellspacing="0" style="width:200px; height:10px; background-color:#FFE5E5; border:1px #A87171 solid;">
<
tr valign="middle" align="left">
<
td valign="middle" align="left">
<{
php}>global $ftime; echo "<table cellpadding="0" cellspacing="0" style="width:";printf("%01.3f",round($ftime*1000)/1000);echo "pxheight:10pxbackground-color:#FFE5E5; border:1px #A87171 solid;"><tr><td bgcolor="#ADC1CE"></td></tr></table>";<{/php}>
</td></tr></table>


Espero que os sea a todos de utilidad y le déis mucho y buen uso.

PD: Si alguno conoce la manera de mostrar el número de consultas SQL que se han hecho para la generación de cada página... no dude en hacérmelo saber por favor. Estoy muy interesado.



Documento disponible en XOOPS España
http://www.esxoops.com

La dirección de este documento es:
http://www.esxoops.com/modules/news/article.php?storyid=213