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