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
-
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.
-
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.
-
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!
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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: