Optimiza tu página web

Llega un momento en la vida de toda, o casi toda, página web en la que uno ha de tomar decisiones derivadas del consumo de ésta por parte de terceras personas. Los visitantes, vamos.

Variables tales como los ya mencionados visitantes, el peso de las imágenes que colguemos o las características del servidor contratado afectan de manera directa al consumo de ancho de banda (bandwidth para los amigos) y ello puede originar dolores de cabeza a más de uno. Pero, como en todo, siempre hay «parches» o buenas prácticas que se pueden llevar a cabo a fin de exprimir al máximo nuestros recursos disponibles antes de tener que rascarse el bolsillo y contratar mejoras de servidor, por decir la opción más común (y diría que única).

Aquí os van 5 consejillos que yo he ido poniendo en práctica y me han venido muy, pero que muy bien.

Yslow

Lo sé, lo sé. Yslow por sí sólo no hace nada. Pero antes de «atacar» debemos saber a qué nos enfrentamos. Y es por ello que instalarse una extensión para Firefox tan útil como ésta, es algo casi imprescindible.

Yslow realiza una serie de pruebas a fin de informarnos sobre velocidad de carga, número de peticiones de archivos,… información MUY valiosa de cara a ver dónde realmente tenemos el problema. Podéis ampliar información y descargarlo justo aquí.

Para los que no deseéis instalaros nada, podéis probar Pingdom Tools [en] que realiza un test similar sin necesidad de instalar nada.

Optimizar las imágenes

Parece algo muy tópico pero si por ejemplo usáis Photoshop, hay una gran diferencia entre salvar imágenes en formato jpg desde «Salvar como» y «Salvar para web». Haced la prueba si no lo sabiáis. Dejad en la medida de lo posible siempre el formato png para transparencias (o el .gif cuando son transparencias «básicas»). Y buscad un equilibrio entre peso y calidad de imagen. Darle una calidad máxima a la imagen en muchas ocasiones no se ve realmente necesario. En esta web por ejemplo suelo guardar los jpg con calidad que oscila entre el 50% y el 80% dependiendo del caso. Bajar la calidad de una imagen entre un 20% y un 30% puede suponer que su peso se reduzca a la mitad.

No creáis que es algo tan trivial lo de la optimización de imágenes 😀 Aquí os dejo otro link para ampliar información: Yahoo Developers Image Optimization [en].

Usar CSS Sprites

La técnica de los sprites es algo bastante antiguo. Se trata de aglutinar en una única imagen «madre», muchas imágenes «hijas». Poneros en el caso de que tenéis definido en vuestros CSS 5 tipos de fondos de imagen para listas. Cada vez que aparezcan en la web, al servidor se harán 5 peticiones. Una petición por imagen. Imaginad ahora que tenéis 100.000 visitas al día. O 1.000.000.

Si en vez de definir 5 imágenes, definiéramos sólo una que las contuviera y posicionáramos las coordenadas de cada una de las «hijas» dentro de la imagen «madre» en nuestra hoja CSS, las peticiones se reducirían a tan sólo una. No os asustéis, si os suena a chino siempre podéis ampliar información.

CSS Sprites [en] o Website Performance Sprite Generator [en] son dos buenos ejemplos de utilidades online que os servirán para crearos vuestros sprites.

Repartir la carga

En algunas ocasiones me he visto en el caso de ofreceros la descarga de algún archivo. Ya sean PSD, bases de concursos… lo más sencillo es abrir el FTP y ale, cargarlos en alguna carpeta que tengamos para tal fin. Craso error.

Actualmente hay infinidad de servicios que nos permiten alojar gratuitamente nuestras imágenes o archivos. Yo me decanto por Box.net [en] para alojar archivos variados y Flickr para imágenes que quiera enseñaros a alta resolución.

Evidentemente no todo son pros. El alojar contenido en servidores externos supone que dependerás del estado en que se encuentren. Si un día resulta que el sitio donde alojaste tus archivos cae o peor aún, cierra… c’est fini. También puede darse el caso de una saturación de sus servidores y a la hora de intentar acceder a tus archivos, la espera se haga eterna. Por todo esto es interesante confiar en servicios extendidos o con una base sólida en el panorama. Yo con Box por ejemplo llevo un par de añitos feliz y contento. Y a Flickr no parece que se le vaya a acabar la mecha en una buena temporada.

PHP Speedy

PHP Speedy es un script que te permite comprimir todos tus archivos js y tus css para así disminuir el número de peticiones y, consecuentemente, el tiempo de carga de la web. También tiene otras cosillas bastante interesantes.

Ha tenido gran acogida en la red, es bastante sencillo de poner en práctica aunque no está exento de problemas en algunas configuraciones. Es cuestión de probarlo y emitir veredicto. PHP Speedy [en] + instalación de plugin para WordPress.

Y hasta aquí! Yahoo, Exceptional Performance [en] es un sitio bastante interesante en el que poder leer más información sobre este tema.