10 consejos para incrementar la rapidez de tu aplicación web

Hay muchas formas de aumentar la velocidad a la que responde nuestra web, pero en principio, se resumen a tres áreas fundamentales: el hardware (nuestro servidor web), la optimización de la programación del lado del servidor (php, java, .NET) y la optimización del front-end, es decir,  las páginas (HTML, javascript, CSS).

Vamos a centrarnos en el front-end y ver como podemos diseñar nuestras páginas HTML para que sean más rápidas de descargar.

1. Inspeccionar las páginas para encontrar mejoras.

Firebug screen shot.

Es muy util utilizar herramientas como Firebug que inspeccionan nuestras páginas y emiten un informe indicándonos qué componentes (páginas HTML, imagenes, CSS, javascripts,…) son accedidos por los clientes, cuanto ocupan y cuanto tiempo tardan en descargarse. Una regla general que deberíamos tener en cuenta es que deberíamos mantener los componentes de nuestras páginas lo menos pesados posibles, por debajo de 25Kb sería lo óptimo.

Para ver un resumen de las mejores herramientas para realizar estas instpecciones, haz clic aquí.

2. Guardar las imágenes en el formato correcto para reducir su tamaño.

JPEG vs GIF screenshot.

En genral usaremos JPEG para imágenes fotográficas y GIF o PNG para dibujos o imágenes con colores sólidos. Además GIF y PNG, permiten transparencia, que en ocasiones es necesaria.

En el siguiente enlace se muestra una comparativa entre PNG y GIF: weigh-in on using PNG’s over GIF’s.

3. Hacer los CSS y Javascript lo más pequeños posibles para ahorrar unos pocos bytes.

Se trata de eliminar caracteres inecesarios como espacios en blanco, tabuladores, por ejemplo, observar este trozo de CSS:

puede convertirse en:

…y nos hemos ahorrado algunos bytes.

Y como no, también hay herramientas que hacen esto por nosotros, para que no tengamos que reformar el código manualmente.

Herramientas para la optimización CSS CSS optimization tools list.

Para JavaScript tenemos  JSMIN, YUI Compressor y JavaScript Code Improver..

4. Combinar los archivos CSS y JavaScript para reducir las peticiones HTTP.

Como para componente que necesite una página se genera una petición HTTMP, si tenemos cinco archivos CSS para cada página y tres javascript, pues sumando son….. 8 peticiones!!!. Si los combinamos reducimos el numero y descargamos al servidor.

Leer el artículo de Niels Leenheer’s cobre como article sobre como combinar archivos CSS y JS utilizando PHP. SitePoint también comenta un método similar en bundling your CSS and JavaScript; son capaces de ahorrar 1.6 segundos en el tiempo de respuesta, por lo que se reduce un 76%.

5. Utilizar sprites CSS para reducir las peticiones HTTP

CSS Sprites on Digg.

Un  CSS Sprite es una combinación de pequeñas imágenes en una grande. Para mostrar la imagen correcta, s utiliza el atributo CSS background-position. Si sólo descargamos una imagen compuesta por varias, también ahorramos en número de peticiones HTTP.

Por ejemplo, en Digg , se pueden ver varios iconos para la interacción con el usuario. Para reducir el número de peticiones HTTP, en digg, los combinaron en una imagen más grande y luego utilizaron CSS para colocarlas de forma adecuada.

Ua vez más podemos conseguir esto de forma automática con una herramienta online llamada CSS Sprite Generator que nos permite subir las imagenes pequeñas que luego serán convertidas en una única imagen y además nos proporciona el código CSS para posicionarlas correctamente.

6. Utilizar compresión del lado del servidor para reducir el tamaño de los archivos.

Es una opción lógica, si comprimimos los archivos en el servidor, tardarán menos en enviarse al cliente. El problema es que si estamos utilizando un hosting en la web, no tenemos acceso a este servidor y a su configuración. Sin embargo, si el servidor es nuestro, o tenemos un servidor virtual, deberíamos activar esta opción.

7. Evitar lineas CSS y JavaScript en las páginas.

Por defecto, los archivos CSS y JavaScript se cargan en la caché de los navegadores. Si utilizamos CSS y JavaScript en nuestras páginas no estamos sacando partido de los beneficios de la caché.

8. Externalizar algunas de nuestras necesidades.

Amazon S3Fox for Six Revisions.

Podemos dejar que Feedburner controle nuestros feeds RSS, en Flickr podemos cargar nuestras imágenes (tener precaución con este tema), y podemos utilizar  Google AJAX Libraries API para acceder a librerías y frameworks populares como  MooTools, jQuery, and Dojo.

9. Utilizar Cuzillion para comprobar lo óptima que resulta nuestra página

Cuzzillion screen shot.

Cuzillion es una aplicación on-line que nos ayuda a experimentar con diferentes combinaciones en la estructura de una página para ver cuál es la que tiene la estructura óptima.

10. Controla la efectividad de tu servidor web creando benchmarks regularmente.

El servidor web tiene que estar en forma siempre y para tenerlo controlado podemos utilizar herramientas como ab – una herramenta para hacer benchmarks en servidores Apache o Httperf de IBM.

Si no tenemos acceso al servidor, también podemos utilizar herramientas remostas como  Fiddler o HTTPWatch para analizar y monitorizar el tráfico HTTP.

10 Ways to Improve Your Web Page Performance – Six Revisions.

Comments