10 maneras de mejorar la performance de tus sitios web

Hace un tiempo les comentaba sobre un comparativo de navegadores web, y como estos se comportaban con diferentes testing realizados por la gente de Sixrevisions, el tema es que la culpa no suele ser toda de tal o cual navegador, claro a menos que sea IE6, y muchas veces pasa por quien desarrolla el sitio.

Quienes desarrollamos sitios webs debemos mantenernos actualizados de manera de conocer las nuevas tecnologías y mejoras que ofrecen los navegadores, pero también los lenguajes del lado del servidor e incluso los servidores web.

No podemos seguir pensando en llenar nuestros sitios con marcos, o maquetar con tablas y tener miles de líneas HTML inútiles y sin validar, cuando con CSS no solo mejoramos la presentación, si no que disminuimos las lineas, por tanto el peso, requerimientos de servidor, velocidad de respuesta y despliegue por parte de los nuevos navegadores.

No podemos seguir optimizando mal las imágenes y pensar en bitmaps, siendo que cada tipo de imagen GIF, JPG, PNG, tiene su uso apropiado, además el terror de los diseñadores Internet Explorer, hoy día hasta soporta los PNG.

O crear portales de noticias, sitios ecommerce, o catálogos en Full Flash esperando salir primero en buscadores, y luego buscar, buscar y preguntarse porque no encontramos esa información y que paso con el SEO para Flash ?

Y como estos un una gran cantidad de usos y tecnologías web obsoletas y/o mal aplicadas tanto para diseño como para el desarrollo de sitios y aplicaciones web.

Para prevenir algunos de estos temas y apelando a un informe de Sixrevisions, les comparto 10 maneras de mejorar la performance de nuestros sitios web.

Como mejorar nuestros sitios Web

1. Verificar nuestros sitios web para buscar culpables

   Controlar el peso de HTML, CSS, JS, imágenes y su tiempo de carga. En Firefox podemos usar Firebug para esta tarea.

2. Guardar imágenes en el formato apropiado

   Aprender a comprimir y optimizar imagenes es vital, podemos valernos de Photoshop, Gimp, u otros para esta tarea, pero tampoco debemos desconocer las capacidades de cada formato en cuanto a color, soporte de animaciones, tipo de compresión, etc, de forma de saber cual es apropiada a cada imagen.

3. Disminuir el peso de CSS y JavaScript

   Si bien en tiempo de diseño y desarrollo es mejor trabajar con tabulaciones y tener documentos fácilmente entendibles por su claridad visual, al momento de publicarlos, esos espacios, salto de líneas y tabulaciones son peso extra!

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

   Por cada archivo que incluimos en nuestras páginas se realiza una solicitud al servidor, si tenemos varios archivos CSS o JavaScript es conveniente unificarlos, ya que llamando un archivo CSS y un JavaScript solo tendremos 2 peticiones.

5. Usar Sprites CSS para reducir las peticiones

   En vez de que nuestro CSS llame a 40 archivos de iconos y botones y obligar a realizar 40 peticiones podemos combinar estas imagenes en un solo archivo, a esa plantilla con todas las imágenes se le llama Sprite, luego con CSS mostramos la porción de imagen adecuada en cada lugar de nuestro diseño, pero utilizando una sola petición y carga. Esta técnica es buena también para obtener menor peso en la imagen que la suma de muchas y beneficiarnos del cacheado de la misma.

6. Utilizar compresión de archivos en el servidor para reducir el tamaño

   Con esto logramos que el trafico de información entre servidor y cliente sea menor, lo cual significa mayor velocidad. El navegador antes de desplegar el contenido lo descomprime y despliega. Se puede aplicar a CSS, HTML, etc.

7. No usar CSS y JavaScript dentro del HTML

   Los navegadores actuales cachean los archivos CSS, JavaScript, e imágenes, por tanto si nuestras 20 páginas de nuestro sitio institucional usan el mismo CSS, y un mismo usuario navego esas 20 páginas, solo se transfirió el CSS una vez, luego siempre uso la copia local en el cache del navegador, se logra mayor velocidad, menos transferencia y carga del servidor. Si por el contrario incluimos el CSS y JavaScript dentro de nuestro HTML y no en archivos separados, perdimos en velocidad, transferencia y ganamos en peso y lentitud.

8. Incluir archivos y recursos fuera de nuestro sitio

   Utilizar herramientas como FeedBurner que guardan una copia periódica de nuestro RSS y sirven a nuestros usuarios, evita que cada usuario lea directamente y sobrecargue nuestro servidor. Lo mismo sucede si hosteamos imágenes o archivos de descarga en sitios de terceros como Flickr, Picasa, Amazon, entre otros. En el caso de las librerías CSS, AJAX y JavaScript, existen servicios como Google AJAX Libraries que permite cargar desde su sitio librerías y frameworks como jQuery. Una ventaja adicional de esto es que si el usuario visito 1 o más  sitios que usan offsite estas librerías, cargará nuestro sitio más rápido porque ya están cacheados en su navegador.

9. Planifica una estructura optima de tu Web

   Para cada el tipo de usuario y contenido lleva una estructura adecuada, es bueno planificar y probar la estructura del sitio antes de lanzar la versión final. Existen varias técnicas y herramientas, una de ellas es Cuzzillion que justamente permite realizar estas pruebas para encontrar la estructura y orden optimo antes de completar el diseño final de nuestros sitios.

10. Monitorear el rendimiento del servidor y crear puntos de referencia con regularidad

    Tener activas herramientas que recojan información en nuestro servidor es la forma de poder verificar regularmente como evoluciona y funciona nuestro sitio, con estos puntos de referencia podremos ver a simple vista los inconvenientes y solucionarlos de forma rápida. También es importante para verificar el estado de estos reportes antes y después de la aplicación de cualquier cambio.

Espero te sean de ayuda estos tips, y si te interesa alguno mas que otro soy todo oídos (u ojos) para profundizar en próximas oportunidades.

Más info:

• 10 ways to improve your web page performance