JMiur [E]

Después de ver la imagen interactiva de wired.com que muestra la cantidad de cosas que pasan cada vez que publicamos una nueva entrada en el blog y el estarfalario recorrido que realiza esa pequeña cantidad de información, he quedado anodadado.

La sola idea de tantos engranajes moviéndose acompasadamente cuando escribimos sobre la última travesura de nuestro gato es una imagen abrumadora.

Hacer click ya no es lo mismo. Detengo mi dedo sobre la tecla y, por unos segundos, me siento demasiado responsable.

Cuando el navegador tiene que mostrar una página web nueva, digamos http://www.xxx.com/, primero tiene que convertir el nombre del dominio a una dirección IP con la que poder conectar, asi que contacta con los DNS de nuestro ISP para conseguir esta dirección IP. Con la dirección IP en su mano, intenta establecer una conexión TCP con ese servidor, siguiendo el proceso conocido como "three-way handshake". El navegador envía un paquete SYN y espera pacientemente la respuesta del servidor, que será un paquete SYN + ACK. Cuando el navegador reciba el paquete respuesta del servidor ya puede mandar un paquete ACK de respuesta e inmediatamente lanzar una petición HTTP GET del recurso que nos interesa (en nuestro ejemplo, "/"), a lo que el servidor responderá, por ejemplo, mandando el contenido del fichero index.html sorpresa2

A partir de aquí, y hasta que el navegador termina de recibir index.html pasará un tiempo determinado, dependiendo del tamaño de este y del ancho de banda de que dispongamos.

Si index.html pesa 100 KB y tenemos una conexión de 4 Mb/s tardará unos:

(100 * 8) Kb / (4 * 1024) Kb/s * 1.2 = 235 ms

donde el factor "mágico" de 1.2 corrige la cuenta para contemplar la sobrecarga de datos.

Una vez que el navegador tiene el contenido del HTML procede a interpretarlo y, típicamente, encontrará dentro del HTML referencias a otros recursos, como hojas de estilo CSS, Javascript, imágenes, etc. Para cada uno de estos recursos extra se repite todo el proceso anterior pero, esto lo hace de a pares para no sobrecargar al servidor (dos peticiones a la vez al mismo dominio) excepto los scripts que no se descargan en paralelo sino de a uno.

¿Mucho lio? No hay duda complice

En la práctica, esto nos puede servir para lograr algunos cambios significativos en el tiempo de descarga y en la velocidad con que abre nuestro sitio.

Por ejemplo, sabiendo que ese proceso se repite para cada recurso que pongamos, una buena idea es reducir la cantidad de archivos externos pero no su contenido. Podemos concatenar todos los ficheros CSS a descargar en uno solo (o colocarlos directamente en la plantilla de Blogger) y lo mismo con los de Javascript; podemos armar un solo archivo JS que contenga todos los scripts a utilizar.

Incluso, podemos concatenar algunas imágenes [1 2] y reducir significativamente el número de recursos a descargar:

"En terminos generales, se tarda menos en descargar un archivo largo que varios cortos".

Hay algunas herramientas para permiten medir el tiempo de descarga de una página web. Una de las mejores e Fiddler y otra muy sencilla es Firebug, una extensión para Firefox.

REFERENCIAS:
  • incubaweb
  • Programa con Google
  • 15 comentarios:

    La Blogueria  

    Hola JMiur, esto quiere decir que, si pego todos los archivos .js en un solo documento, de nombre digamos TODOS.JS, y luego dirijo cada hack que use cada uno de esos scripts al archivo TODOS.JS, ¿funcionarán? ¿no interfiere uno con otro al ejecutarse? Me suena raro, no sé si lo entendí bien o me hice la cosa un lío.

    ¡Gracias, saludos!

    Responder
    JMiur  

    Desde el punto de vista de las interferencias, es lo mismo tener archivos separados que uno solo porque se cargan y permanecen en la memoria para ejecutarse; no son independientes por estar en archivos separados, se van sumando a la página como si se fueran escribiendo una detrás del otro.

    En la práctica, puede ser molesto tenerlos todos en uno, por ejemplo, archivos como prototype son grandes y mezclarlos con otros los hace difíciles de entender aunque, es posible hacerlo y seguirían funcionando.

    Más que nada, sugeriría que los pequeños hacks estuvieran primero que nada en la plantilla para evitar todo ese proceso de carga. Si no es posible, entonces si, irlos copiando y pegando en un único archivo que contenga las diferentes funciones.

    En mi caso, uso uno de ese tipo para la sidebar; allí está el script que maneja la nube de etiquetas, el de expandir y contraer, agregar a favoritos, últimos comentarios y algunos otros más.

    Moraleja: no, no hay interferencias porque para el funcionamiento de una página es indiferente si es un archivo o varios. Sólo influye en el tiempo de carga.

    Responder
    La Blogueria  

    Gracias, estoy probando, de momento no noto nada muy significativo: irremisiblemente he de matar widgets. Pero entre esto y aquello...
    Dos de las cosas que más tardan en cargar en mi blog y a las que no quiero renunciar son el bloctoc que me llevé de aquíy el hack de entradas en expandible; los archivo .js los tengo alojados en hostfile. ¿Pego el contenido de los archivos directamente en la plantilla? Sería interesante que por lo menos cargaran de principio para evitar el retraso en la carga de todo lo demás. y entonces, ¿cómo los llamo a funcionar desde la sidebar? ¿con un ID? disculpa si estoy preguntando tonterias obvias, pero no me doy cuenta de cómo hacerlo... Muchisimas gracias.

    Responder
    La Blogueria  

    No, ahora pienso que he dicho tonterias, a lo que te refieres quiza es a que coloque la llamada al archivo lo antes posible. Así, voy a hacer pruebas. Gracias y disculpa mi estado confusional.

    Responder
    JMiur  

    Para contestar debería entender un poco más de qué se trata el asunto así que doy algunas ideas pensando en voz alta.

    El tema de la velocidad se mide en microsegundos, el efecto, puede no ser evidente.

    Toda llamada o script que utiliza JSON, demora, por ejemplo en del bloctoc o los post relacionados.

    En Blogger, una de las cosas que más influye en el tiempo de carga es el mismo Blogger.

    Si un script está en un archivo externo o en la plantilla, dentro de una etiqueta <script> </script> es irrelevante para su uso, se llama igual, se usa igual.

    Cargar a un archivo externo en una pagina web es como decirle al navegador, espera, lee esta parte que está allá en otro lado, cópiala y pegála acá y luego continua.

    Hay algunos sitios o herramientas que permiten evaluar la velocidad de carga y detectar cuáles son los elementos que más demoran. Son útiles pero, a veces no podemos hacer nada para solucionarlo.

    Responder
    La Blogueria  

    Como siempre, se me despeja algo más el tema; ciertamente, al medir la velocidad de carga, esos scripts que menciono son los que más tardan; pero una vez se ejecutan, proporcionan tanta comodidad, que compensa.
    Me da mucha lastima el blog lento, por los lectores, no es mostrar mucha deferencia :(

    Muchisimas gracias, y también por el estupendo tutorial CSS.

    Responder
    Gem@  

    He seguido con interés los comentarios sobre la lentitud en cargar la página de La Bloguería yo misma le hice un comentario sobre ese tema. Y pensaba si al añadir los scripts en la misma entrada donde los efectos van a ser aplicados no aceleraría un poco el proceso. ¿O por el contrario tarda lo mismo?

    Responder
    JMiur  

    El tema es siempre encontrar un balance entre lo que nos gusta y "la eficiencia". Es algo demasiado personal para opinar pero, en todo caso, yo también siempre elegiría lo que me gusta :D

    Gem@ , si lo que dices es que si usamos algún script de manera eventual lo mejor es cargarlo directamente en el post que lo va a utilizar, la respuesta es sí. De esa manera evitamos cargar códigos que no utilizamos.

    Responder
    La Blogueria  

    Hola Gema, ¿cargarlo directamente en el post? ¿queréis decir que puedo poner la llamada al archivo .js en el propio post y no en la plantilla? no, ¿no? o ¿sí?. Estoy confusa. Ciertamente, hay varios scripts que no uso en el blog pero que muestro en posts como ejemplo; ¿cómo haría entonces para cargarlo en el propio post?

    El blogtoc y las entradas en expandible se quedan, definitivamente; pero a ver si puedo ajustar un poco todo lo demás...

    Abrazos y muchísimas gracias por vuestro interés y guía.

    Responder
    Gem@  

    Así es Vane, hay scripts que no les damos uso, sólo los utilizamos cuando hacemos una entrada y añadimos el efecto como ejemplo, casi siempre son archivos js. al menos en mi caso.
    Si es el caso lo puedes añadir al principio de la entrada la única diferencia es que añades el script y al final debe cerrar con </script>
    Debo aclarar que esta forma de hacerlo lo aprendí de J.Miur no es para nada de mi cosecha ;)

    Responder
    JMiur  

    Puedes cargar un script en un post exactamente igual que lo haces en la plantilla. Por ejemplo:

    <script src='http://....archivo.js' type='text/javascript'></script>

    incluso, puedes poner instrucciones de JavaScript de igual forma:

    <script type='text/javascript'>
    function hola(id) {
    post = document.getElementById(id);
    }
    </script>

    pero, en todos los casos, TODO debe estar escrito en la misma línea:

    <script type='text/javascript'> function hola(id) {post = document.getElementById(id); } </script>

    De igual modo, puedes colocar CSS utilizando STYLE (todo en una sola linea) o cargar una hoja de estilo pero así:

    <style type="text/css">@import url(http://...archivo.css);</style>

    Hacerlo de esta forma permite mostrar alguna cosa específica sin cargarla en la plantilla; se cargará sólo en ese post.

    Una advertencia. No todos los scripts funcionarán así; hay algunos, como prototype, por ejemplo, que requieren ser cargados al inicio así que, en esos casos, no hay otro otro remedio.

    Responder
    La Blogueria  

    Pues pienso que esto sí va a aliviar un montón la situacion. Ahora mismo me pongo a incluir cada cosa en su sitio.

    No sé cómo agradeceros.

    Responder
    JMiur  

    Me alegro que la charla te haya servido. La única regla es que todo eso siempre esté en una sola línea.

    Y no agradezcas nada, ya iré a "hurtarte" alguna lechuza más :D

    Responder
    La Blogueria  

    ¡Ahora al hacerlo, me doy cuenta de que ya lo he hecho antes! esto de copiar y pegar le acaba a uno dejando más atontado... no caí en la berza de hacer lo propio con códigos que sólo usaré en la entrada ainss qué cabeza... creo la cosa va mejorando pero no miréis todavía...

    Dejo unos saltitos de alegría por acá...

    Responder
    JMiur  

    Me alegro que todo ya mejorando; sin duda, eso debe aliviar la carga.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR