Hoy inicio el tema haciendo eco de una adaptación de Alan Orozco (blog desaparecido) (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 rollo:
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. Una pasada. 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, veamos una tabla con el antes y después del uso (abuso) de JavaScript en ese blog:
| Implementación | Antes | Después |
|---|---|---|
| Comentarios | ||
| ajax_comments.js | 1KB | 1.5KB |
| effects.js.php | 33KB | 1.9KB |
| prototype.js.php | 47KB | 3.4KB |
| LiteBox + LightBox | ||
| 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 (usando is_tag() en lugar de is_single()).
Comentarios