BeOSmAn's Blooog

Muy buen artículo de Ricardo Galli, el creador y mantenedor de Menéame, sobre cómo optimizar sitios Web.

Más o menos viene a decir:

• Reducir al máximo tus CSS y Javascript; y no incluyas los que no necesites (o cárgalo más tarde).
• Si es posible, carga los elementos bloqueantes (widgets,…) de forma paralela (hay muchas formas de hacerlo, por ejemplo usando iframes).
• Maquetar de forma que se pueda ir “dibujando” la página antes de tener todo el HTML. Con esto se reducirá el tiempo de carga percibido por el usuario.
• Usar dominios, no subdominios, diferentes para contenido estático.
• Comprimir el HTML y usar sprites para las imágenes (siempre que dichos sprites no sean demasiado complejos).
• Intercalar la generación del contenido con el envío, mandando antes las partes que primero se generan (como la cabecera) para ir “dibujando” la página en el menor tiempo posible.

De esto yo deduzco que el modelo MVC es una auténtica mierda a la hora de optimizar sitios Web: lo que hace es procesar todo y luego generar y enviar el HTML al usuario, que es justamente lo que dice Ricardo Galli que es lento y que lo que realmente reduce el tiempo de carga percibido por el usuario es dibujar la página cuanto antes, aunque todavía no se halla generado completamente.

Mira que cosas, todos poniendo al MVC como la panacea y resulta que las pruebas dicen otra cosa… ¡Ains!

En Javascript las variables que apuntan a objetos son referencias, por lo que la asignación entre las mismas se hace de esta forma con lo que la modificación de una de estas variables afecta al resto de referencias. Por ejemplo:

En el alert(...) saldrá el texto ‘Clonando Objetos’ ya que ambas variables apuntan a la misma zona de memoria, de ahí las referencias. Es debido a esto, y que en algunas ocasiones necesitas clonar un objeto, por lo que es necesario implementar una función que lo haga. Para ello tenemos esta función, que la he visto en StackOverflow aunque la he retocado un poco, que funciona perfectamente:

Con esta función, el ejemplo anterior se convierte:

Y aquí el mensaje del alert(...) ya será ‘Clonning Objects’. Con esto ya podemos duplicar objetos… Pero, como no había quedado muy conforme con la solución seguí buscando, más por encontrar otro tipo de solución (no veo lógico que Javascript no tenga una forma nativa de clonar objetos) que por mejorar rendimiento. Y, aunque no encontré la forma nativa (creo que no la hay), sí encontré otra mucho más corta y más elegante:

La función eval(...) coge un texto y lo evalúa como su fuese Javascript, de forma dinámica. Y, lógicamente, la función uneval(...) hace lo contrario: dado un código en Javascript —una clase, un array, etc.— lo convierte en el texto correspondiente, por lo que esta función lo que hace es convertir el objeto en texto y el texto generado otra vez en objeto, clonando así el objeto que se pasa como parámetro.

De estas dos formas, la segunda solución me parece más elegante —pocas cosas se consiguen en una sola línea de código—. El problema que puede existir es el rendimiento, ya que no he visto nada por ahí y yo tampoco he hecho pruebas, así que la decisión queda para cada uno. Yo he probado las dos y ambas funcionan sin problemas. Si alguien hace sus pruebas, que comente sus resultados.

Una de las cosas que más me ha llamado la atención estos días, por su simplicidad y potencia a la vez, ha sido WWW SQL Designer.

WWW SQL Designer es una aplicación Web hecha en Javascript que te puedes descargar para que funcione desde tu ordenador y sirve para hacer diseños sencillos de tablas y relaciones de bases de datos.

Desde el propio navegador puedes crear tablas, añadir campos a las tablas de diferentes tipos y añadir relaciones entre campos de diferentes tablas.

Luego, estos datos se pueden guardar en XML o se puede generar el SQL para distintas bases de datos entre las que están MySQL y PostgreSQL. Eso sí, el XML no se puede guardar en un archivo sino que se genera para que tú lo guardes en un archivo local (recordemos que Javascript no puede acceder a otros archivos del ordenador que no sean las cookies) aunque también tiene la opción de guardar tu diseño en su servidor. Por supuesto, también se puede cargar un diseño en XML (el mismo que se generó anteriormente) ya que en cada recarga del navegador se pierden los cambios.

Lo que realmente me gusta de esto no es que sea vía Web, para nada, de hecho en Firefox en Linux va de pena mientras que en Firefox en Windows va muy bien. Lo que realmente me gusta es la sencillez tanto de manejo como de opciones. Es decir, en muy pocos pasos tienes un pequeño diseño válido para cualquier aplicación pequeña (pongamos… un blog ).

Y es que esta sencillez no la he encontrado en otros programas que tienen más opciones, que generan mejor el SQL y, sobre todo, que son más caros. En Linux hay algunos, pero ninguno tan sencillo como este. Por supuesto, para diseños grandes o hazlo a mano (cosa que recomiendo, así siempre tendrás el control sobre las tablas) o búscate/cómprate un programa profesional.

¿Y a vosotros qué os parece esa aplicación? ¿Alguna mejora? ¿Algún programa similar a este para el escritorio?

La solución propuesta en varios sitios (donde lo vi) para solucionar el problema de las imágenes PNG en Internet Explorer 6 no es una buena solución porque es extremadamente lenta. Hay que darse cuenta de que, para cada imagen, ya sea <img src="..." /> en el HTML o cada elemento background-image o background que lleve el CSS , hay que ejecutar el archivo .htc con lo que hay que ir al servidor, bajarlo y ejecutarlo. Por cierto, donde está la caché cuando se la necesita…

A mi no me ha quedado otra que rendirme. Pues sí, qué queréis que os diga. Prefiero que en IE se vean peor las imágenes (ojo, siempre que no sean fondos espectaculares y tu web se base en el diseño en lugar de en la funcionalidad) pero ganar en velocidad; en mucha velocidad.

Es por eso que la otra solución que propongo es: primero, convertir todas las imágenes a formato GIF (por eso de que tengan, al menos, algo de transparencia, aunque se pueden convertir al formato que se necesite). Esto se puede hacer mediante el comando convert en Linux:

diego@dbox:~/projects/MyApp/public/images/:$ find -name ‘*.png’ | while read; do name=`basename $REPLY .png`; convert $REPLY ${name}.gif; done

Una vez hecho esto, nos creamos otro archivo CSS específico para IE donde sólo estén los selectores donde se usa background o background-image. Además, en estos selectores se debería eliminar el resto de código CSS para minimizar el ancho de banda usado por el nuevo CSS. Luego, lógicamente, cambiados todas las referencias a imágenes en PNG por las referencias a las imágenes en GIF.

Para incluir este CSS sólo en IE usamos el truco de inclusión condicional (sólo válido para IE, obviamente):

<!––[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” media=”all” />
<![endif]––>

Y para las imágenes dentro del HTML usamos un poco de javascript (yo, personalmente uso jQuery):

$(“document”).ready(function() {
$(“img”).each(function() {
var src = $(this).attr(“src”);
src = src.substring(0,src.length-4);
$(this).attr(“src”,src + “.gif”);
});
});

Esta no es ni de lejos la solución definitiva y, ni muchos menos, es una buena solución, pero es mucho más rápida que la solución del archivo .htc porque una de las cosas que hace es que sí que usa la caché para las imágenes, con lo que después de cargarlo la primera vez, las siguientes van más rápido.

Ahora sois vosotros los desarrolladores los que tenéis que decir qué os interesa más, si que vuestra página se vea perfecta en IE a costa de sacrificar la velocidad, o que vaya rápido a costa de sacrificar vuestro diseño. Yo, en este preciso caso, elegí la velocidad. La proxima vez ya se verá.