Recopilando buenas prácitcas… Vol. II


Este artículo irá vinculado directamente  a la optimización de peticiones de ficheros y demás al servidor (tanto web como de aplicaciones).

Cuando un usuario realiza una petición GET HTTP, le estamos transfiriendo cierto ancho de banda, que lamentablemente es limitado, si fuera ilimitado no habría que preocuparse por esto. Por lo cual siempre es de “bienagradecido” reducir la cantidad de bytes transferidos por la red, es provechoso para el usuario porque le supone una demora inferior, y es provechoso para los administradores de redes / las empresas / y otros involucrados, ya que al reducir la carga, reducimos problemas, véase Principio KISS.

Es increíble que todavía existan webs o aplicaciones que no evalúen este punto, muchas empresas no se preocupan por la eficiencia de sus recursos, y nos olvidamos que el ancho de banda es uno de ellos.

Comenzaremos con nuestros principios de optimización:

1. Utiliza imágenes que utilicen algoritmos de compresión.

Las imágenes como todo archivo, puede ser comprimido, lo interesante de éste punto, es lograr un equilibro entre la calidad de la imagen que se presentará en nuestro sitio web, con la compresión buscada, lo que yo recomiendo utilizar para imágenes en Internet es lo típico que podríamos encontrar: JPEG, GIF, PNG (Este último preferiblemente para imágenes de alta calidad, o imágenes transparentes, aunque actualmente logra compresiones superiores a JPEG).

2. Comprime las imágenes al máximo y de manera equilibrada.

Hemos elegido un algoritmo de compresión indicado en el punto anterior, pero ésto no significa que si la imagen es GIF, JPEG o PNG se encuentre comprimida, para ello hay que forzar la compresión con herramientas, de ésta manera podremos ahorrar más bytes de transferencia, piensa que si una imagen sólo se comprime un 10% de su valor inicial, ésta imagen será descargada simultáneamente por muchos usuarios, y probablemente a largo plazo represente una mejora en la tasa de transferencia.
Ten en cuenta que siempre debes estar ponderando que no pierda mucha calidad, ya que un sitio con imágenes de mala calidad, nos remonta a Internet de 1995.

3. Utiliza texto en lugar de imágenes que tienen texto.

Procura utilizar imágenes lo menos posible, no es solo por una cuestión de Accesibilidad (que lo veremos en próximos volúmenes), sino también porque una caja de imagen blanca con texto dentro pesa mucho más que un simple texto HTML, si haces ésto, también te evitará problemas cuando desees hacer tu aplicación multi idioma.

4. Reduce la redundancia de código

Intenta evitar caer en obviedades, por ejemplo, una página que se carga por defecto, en la mayoría de los navegadores suele cargarse en blanco, es un poco absurdo indicar que el fondo de la página será blanco cuando el navegador lo interpreta como tal, eso es algo de código que pudiste haberte ahorrado.

<body bgcolor="white"></body>

Lo podríamos reemplazar por un simple:

<body></body>

5. Aprovecha al máximo la caché.

La caché del navegador es un recurso excelente para problemas de rendimiento de aplicaciones, cuando éstos se originan por los elementos que se descargan de la web (Javascripts muy pesados, etc). Si se aprovecha la caché correctamente.

6. Separa la estructura de la página del código CSS

Con el código CSS deberás imponer una norma, SI o SI a un fichero aparte!
El porqué de esta norma es porque si el mismo se encuentra embebido en la misma página, le quitas la posibilidad al navegador de poder cachear el fichero para lograr una carga más rápida. Tampoco abusemos de la posibilidad que nos brinda CSS y pongamos todo en un fichero, lo que yo siempre recomiendo es utilizar un fichero con los selectores que se suelen utilizar en todas las páginas, que sería uno a nivel genérico, y otro específico por cada página, de ésta manera incrementamos la descarga de ficheros, pero reducimos la carga de los mismos.

7. Separa la estructura de la página del código Javascript

Ésta es otra norma muy bonita, ¡Separalos!, se que es un poco engorroso tener que ir a buscar un fichero cada vez que deseas modificar una función en Javascript, pero realmente en la práctica es más legible el código de la página (evitando cargar cosas innecesarias para su contenido) y se cargará en la caché al igual que en el punto anterior.

8. Procura que tu código valide los estándares W3C.

Esto no va tanto con la carga de ficheros desde el servidor sino con la interpretación y renderizado del navegador, si nuestro código cumple los estándares, el navegador tardará menos en renderizar la página que intenta visualizar. Si bien los navegadores modernos “soportan camiones” siempre es de bienagradecido facilitarle la vida al usuario, piensa que si tu usuario demora 1ms más en comenzar a ver tu página, puede ser un punto entre la vida y la muerte. (/ironic).

9. Comprime los ficheros Javascript.

Una de las maravillas que ha hecho Yahoo! para el mundo de los desarrolladores web, es brindarnos su libreria YUI, la misma te permite reducir el código Javascript, en algunos casos, yo lo he logrado reducir hasta un 60%, y en una librería Javascript de 200 kb, se nota cuando luego pesará sólo unos 80 kb.

10. Comprime los ficheros CSS

Gracias a la libreriaYUI ésto también se puede hacer, reducir el fichero CSS, la compresión es bastante potente y al igual que en el punto anterior, elimina los comentarios de los ficheros. Ésto es de mucha utilidad cuando se pasan los ficheros del repositorio a producción como un proceso definido dentro del equipo de desarrollo.

Espero que haya sido de provecho la información, si crees que me he ovidado de algo, que estoy seguro que sí por favor coméntamelo.

Acerca de fabiancouto

Nacido en Montevideo, Desarrollador de software en @brujula_talk & owner de @TrabajoBalear. Adicto a la ironía y al sarcasmo. En busca de sabiduría y felicidad.

Publicado el 22 abril, 2010 en Buenas Prácticas, CSS, Desarrollo, Javascript, Tecnología, XHTML. Añade a favoritos el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: