El abuso de AJAX y comentarios con AJAX + moo.fx
Publicado el Jueves 10 de Agosto del 2006 @ 18:26 por Armonth.
- 12
- 0
Comentar
Hoy inicio el tema haciendo eco de una adaptación de Alan Orozco (vía aNieto2k) para el famoso método de poner los comentarios con Ajax (del cual ya hable anteriormente).
Bueno, después de la ensalada de enlaces, ¿en qué consiste la adaptación? en sustituir el pesado script.aculo.us por una biblioteca mucho más ligera llamada moo.fx y la diferencia se nota. Por ello se agradece el “nuevo método”.
Ahora bien, se ha hablado sobre el hecho de utilizar AJAX (Nota: Por simplificar cuando hablo de AJAX me refiero tanto a este como a los efectos en JS usados, todos ellos normalmente en un fichero aparte en forma de biblioteca) en exceso puede ser un problema de sobrecarga, no solamente para el servidor: toca recordar que el Javascript se ejecuta del lado del cliente y el problema empieza a notarse al utilizar muchas bibliotecas que hacen lo mismo.
Voy a dar un ejemplo de tres características vistas en un mismo blog de golpe:
- Introducir comentarios con efecto de transparencia con AJAX.
- Mostrar imágenes con Lightbox 1.0 (más ligero que la 2.0 actual).
- Mostrar pop-ups mediante LiteBox.
El problema que tiene ese ejemplo es la ensalada de scripts, repitiendo código a descargar e incluso bibliotecas a descargar dos veces:
sitio.com/js/script-tal/prototype.js.php
sitio.com/js/otro-script-distinto/prototype.js.php
Éste fichero ocupa 47KB, cada visita tiene que descargar 47KB x 2 veces + el script.aculo.us entero + las bibliotecas de Lightbox.
O dicho de otro modo: Al utilizar cada script sus bibliotecas y dependencias debemos intentar que estás se repitan lo más posible para que solamente haya que cargarlas una vez.
En el caso anterior podemos usar moo.fx en los comentarios para ahorrarnos el uso de script.aculo.us, luego podemos utilizar Thickbox 2.0 que implementa las funcionalidades estilo Lightbox y Litebox en un tamaño mínimo.
Con estos cambios pasamos de script.aculo.us (que ya es una mejora de por sí) a moo.fx (y de paso podemos utilizar SearchLite sin cargar más bibliotecas Javascript), combinamos en una biblioteca de menor peso dos funcionalidades separadas, etc.
Los cambios propuestos ya han sido remitidos al blogger en cuestión el cual prefiere que no diga quien es…
| Implementación | Antes | Después |
|---|---|---|
| Se tiene en cuenta únicamente el tamaño de los JS. | ||
| Comentarios | ||
| ajax_comments.js | 1KB | 1.5KB |
| effects.js.php | 33KB | 1.9KB |
| prototype.js.php | 47KB | 3.4KB |
| LiteBox + Ligthbox (1.0) | ||
| litebox-1.0.js | 18KB | 9.5KB (Thickbox 2.0) |
| moo.fx.js | 3.2KB | 15KB (jquery-compressed) |
| prototype.lite.js | 3.3KB | N/A |
| lightbox.js | 12KB | N/A |
| Total | 106.7KB (+47KB) | 31.3KB |
Resumiendo
- No abuses de AJAX si no aporta nada realmente útil.
- Huye de script.aculo.us.
- No utilices varias bibliotecas para hacer lo mismo en distintos sitios (no repitas código a descargar).
Hint: No cargues en todas las páginas el JavaScript, por ejemplo si solamente utilizas moo.fx y el resto de bibliotecas para los comentarios estilo Ajax entonces cargalos solamente junto al formulario de comentarios, esto en WordPress se puede hacer escribiendo justo antes de </meta>:
<?php if ( is_single() ) {
<script blablabla para cargar los scripts></script>
<?php } ?>
Un ejemplo más: en SigT actualmente solo uso JS para la nube de etiquetas por ello el JS solamente se carga en las páginas de “entradas ordenadas por etiquetas” donde sale dicha nube (is_tag()).
12 Comentarios (feed)
-
Alan Orozco nos comenta:
Gran, gran articulo. Lo unico que falta agregar es que Litebox se asemeja mas a la version con script.aculo.us, usando moo.fx que Thickbox
-
aNieto2k nos comenta:
Muy buen artículo, aunque creo que has confundido los conceptos.
Ajax no ocupa nada, ya que en si solo son 15 líneas (como máximo) lo que ocupa tanto son los efectos en Javascript, pero este problema ya existía hace años cuando se empezaba a conocer la potencia de JS.
-
Marcos nos comenta:
Recién acabo de echar a andar SearchLite en el blog (colaborando con el autor ahora está casi terminado), y veo que puedo reutilizar la librería de javascript para los dichosos comentarios en ajax (que preferiría tener un plugin, que hacer todos los pasos a mano, vago que es uno :P)
Acabaréis con mi tiempo libre… digo… muchas gracias ;)
-
Armonth nos comenta:
aNieto2k no los confundo o al menos eso creo: Sé que una cosa es la comunicación entre cliente-servidor que realiza Ajax (y como bien dices: Un par de líneas) y otra sus efectos…
Sé a que te refieres pero siempre se me quejan de que soy “muy técnico” y “más papista que el papa” (tanto aquí como la vida real) por eso intento simplificar… en este contexto cuando hablo de Ajax me refiero a bibliotecas en Javascript que implementan funciones “rollo” Ajax, efectos, etc.
Por otro lado no está de más aclararlo por lo que buen apunte…
Marcos: Pues si es así hazlo, a ti no te supone casi nada a cambiar (dos líneas) y el usuario no vera a simple vista la diferencia, pero son casi 75KB de ahorro frente a script.aculo.us menos y eso lo notaran a base de utilizarlo.
Por cierto, como curiosidad la diferencia entre el diseño antiguo de SigT (un poco “sucio”) + cargar JS para UTW (etiquetas) en sitios que no cargan la nube, etc… con el mismo contenido el index de SigT ocupaba 51KB + 20KB de JS (sin contar CSS/imágenes) y ahora ocupa unos 34KB.
Eso el lector no lo ve en la primera carga, pero a medida que carga más y más sí lo aprecía :D
-
aNieto2k nos comenta:
Joder tio, eres más Papista que el Papa xDDDD
Si, te había entendido, pero es que la gente ve una capa que se desplaza o que se estira y dice “Guau!! Que chulo el Ajax”.
Aunque solo sea, el “rollo” Ajax. ;)
-
javier nos comenta:
Usar ajax está estupendo y se pueden conseguir efectos tan molones como los del menú del nuevo theme The Ghost (tintafantasma.net).
-
Artu nos comenta:
Hola, escribo mi consulta en este hilo porque se asemeja al tema que tratáis, aunque yo no utilice ajax, os comento,
tengo montado un servidor windows con apache-mysq-php-ssl y necesito resolver un problema de velocidad en la carga de páginas.
La aplicación en local, como es normal, va fenomenal, sirve a 10 pcs simultáneamente muy bien, claro que la velocidad es gigabit.
El problema surge al servir hacia fuera, tenemos 2 mb de subida y bajada, cable simetrico. Resulta que las páginas son de texto con apenas imágenes, a una media de 30 KB por página. Al hacer pruebas me doy cuenta que la primera vez que se abre una página tarda como 5 veces más que durante la navegación posterior, y es debido a que se descarga el fichero .js con las funciones javascripts que pesa 80 kB. Luego, una vez descargado la aplicación va bien, pero el problema es que cada vez que abro una ventana emergente, y se cierra, esos 80 kB se vuelven a descargar, con la correspondiente saturación del servidor cuando hay muchos clientes.
¿Existe alguna manera de que el fichero de scripts .js no se descargue cada vez que abro una ventana nueva?
Un saludo, y muchas gracias por adelantado.
-
Armonth nos comenta:
Si el fichero es un JS y se llama mediante <script blablabla /> deberia guardarse en cache…
Por otro lado, como ya dice el artículo, si puedes reduce al máximo la necesidad de usar JS…
-
Artu nos comenta:
Si en caché se guarda, por eso una vez abierta la ventana la aplicación va bien. El problema es cuando se cierra la ventana y se abre otra vez, lo vuelva a cargar. Gracias por la ayuda.
-
Carlos nos comenta:
Tasando
-
Julio nos comenta:
Muy bueno, gracias por la info!!
-
Disenior Web nos comenta:
Excelente artículo!! me gusta mucho el lightbox y sus efectos para mostrar las imágenes, de hecho lo utilizo en mi sitio web,
saludos cordiales,
DiseniorWeb.com