Aprovechando que estamos en semana santa, he decidido hacer una entrada diferente. Esta vez será especialmente útil para quienes tengan una web o blog  y necesiten optimizarlos para que carguen más rápido. La velocidad es un factor muy importante de cara al usuario y de cara a los buscadores. Con un poco de dedicación se pueden obtener resultados notables.

Para ello utilizaremos los siguientes plugins (añadidos) de firefox:  Webdeveloper, Firebug y YSlow (utilizar este orden). Una vez instalados, reiniciais el navegador firefox y ya podemos empezar a analizar tu blog.

El Webdeveloper es una herramienta imprescindible para cualquier webmaster, te permite hacer multitud de tareas tan prácticas como editar tu web al vuelo, mostrar las tablas o capas, ver información como los metatags, nos indica que fallos hay de javascript, deshabilitar la caché del navegador … y muchas cosas más. Todas las opciones os aparecerán en una barra como la siguiente:

El tándem firebug y YSlow permite analizar más a fondo la estructura interna de una página, para no complicar en exceso solo nos centraremos en el rendimiento de red y consejos de optimización. Si está activado observaréis estos iconos en la parte inferior derecha del navegador:

Entramos en materia:

1) Hacemos doble click en el icono de firebug o el del reloj de al lado de Yslow. Se abrirá un compartimento, donde pone opciones pulsamos y seleccionamos AUTORUN para así se active automáticamente (desconectarlo después de hacer las pruebas).

yslow paso1 300x120 Consejos para optimizar la carga un blog o web (I): pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/consejos-para-optimizar-la-carga-un-blog-o-web-28i-29_articulo_86_370441.html"><img src="http://blog.chefuri.com/wp-content/uploads/2009/04/yslow-paso1-300x120.jpg" border="0" alt="yslow paso1 300x120 Consejos para optimizar la carga un blog o web (I) en Blogs de YAAQUI"></a>

Acto seguido, recargamos la página y seleccionamos la pestaña Yslow (que está a la derecha de DOM y red) y pulsamos donde pone perfomance. Entonces nos aparecerá una lista de consejos, en inglés, para optimizar (si no salen pulsar stats y luego otra vez performance). El objetivo es  obtener el máximo número de A posible (la puntuación F es la peor). En el caso del blog de chefuri partimos de una calificación F (50 puntos sobre 100).

A grandes rasgos lo que hay que hacer es lo siguiente:

1. Reducir el nº de ficheros externos, por ejemplo javascripts u hoja de estilos css. Si los puedes juntar en un solo fichero mucho mejor porque habrán menos peticiones HTTP. Lógicamente si hay alguno que esté duplicado pues eliminalo.
2. Organiza el código. Las hojas de estilo ponlas al principio (dentro de las etiquetas head) y si es posible los javascripts ponlos al final de todo (no siempre será posible, pero por ejemplo el código de las estadísticas no tendrás problemas).
3. Reduce el nº de dominios para las peticiones. Básicamente, cuanto más contenido de tu web esté en tu servidor mejor. Ten en cuenta que el acceder a otros servidores cuesta tiempo.
4. Comprime los ficheros externos. Esto ya es un poco más complicado de programar manualmente, consiste en reducir los ficheros para que el propio navegador los descomprima. Tienes más información en este artículo. Para no complicarse, en wordpress lo mejor es usar el plugin PHP Speedy. Nos hará todo el trabajo sucio (después de configurarlo).
5. Cachea la página. Básicamente es crear una página estática a partir de una dinámica. La ventaja es que la página resultante ya no tiene que acceder a la base de datos o realizar cálculos extras por lo que irá mucho más rápido. Para los amantes de wordpress tenéis el plugin WP-super-cache.

Bueno estos son unos consejos de nivel bajo-medio, hay que analizar la web en cada caso.

Después de aplicar estos consejos, la puntuación del blog ha subido de 50 a 64. Aún hay cosas que mejorar pero la velocidad del blog ya ha ido en aumento. En las entradas individuales, se ha pasado de unos 18  segundos a poco más de 7, aún menos si el blog ha sido visitado antes y hay información en caché del navegador.  Intentaremos ajustar aún más el blog para subir la puntuación, a ver si es posible.

He realizado un examen del TOP 10 de blogs de gastronomía que cada mes publica wikio. Tenía intención de publicarlos pero casi que me espero. Hay un par que podrían mejorar bastante su puntuación con un par de ajustes. Si algun blog necesita ayuda que me lo comente, a ver que podemos hacer.

En la próxima entrada os mostraré como detectar los cuello de botella que hacen que la web cargue más lenta. Se verás de formá gráfica con lo que será relativamente fácil encontrar que elementos tardan más en cargar. Si habéis seguido los consejos anteriores, probablemente se hayan eliminado muchos de los problemas.