unijimpe

La optimización de los sitios web es un punto muy importante para mejorar el rendimiento de cualquier sitio web. Según el libro High Performance Web Sites: Essential Knowledge for Front-End Engineers de Steve Souders, basado en los estudios hechos por el equipo de optimización de Yahoo han llegado a definir una regla:

Sólo el 10-20% del tiempo de respuesta se utiliza en descargar el documento HTML.
El otro 80-90% está empleado en descargar todos los componentes en la página.

Esto significa que si logramos optimizar la carga de todos los elementos de la pagina web, tendríamos el 80% de la velocidad de carga bajo nuestro control, con el consiguiente aumento considerable en la velocidad de carga de una web.

Reglas para Optimización

Para acelerar la carga de las paginas web podemos seguir algunas reglas que hemos recopilado de Exceptional Performance de Yahoo y de Web Performance Best Practices de Google.

• Reducir las peticiones HTTP
  Reduciendo la cantidad de elementos externos a nuestra página podemos reducir el tiempo de carga, para ello podemos combinar archivos JS, CSS, utilizar sprites para los botones, etc.
• Agregar headers de Expiración
  Agregando los headers indicando cuando expiran los archivos evitaremos la carga innecesaria de archivos que ya han sido cargados.
• Utilizar compresión Gzip
  Al comprimir los archivos con gzip antes de enviarlos al browser conseguiremos disminuir la cantidad de datos a transmitir.
• Colocar los Estilos en el Header
  Se recomienda colocar los archivos de estilos en el header para que se carguen primero y renderear rápidamente el web.
• Colocar los Scripts en el Footer
  Cuando se carga un archivo JS, este bloquea la carga de otros archivos hasta que se complete la carga, si el archivo JS es pesada hará que nuestra página se vea en blanco mientras se carga el Javascript.
• Poner Javascript y CSS en archivos externos
  Al colocar en archivos externos los javascripts y hojas de estilos, en la primera vez cargaremos estos archivos y en la siguientes peticiones las leeremos del cache del browser.
• Reducir las búsquedas DNS
  Se recomienda no utilizar varios dominios en la carga de los elementos del web, por cada dominio habrá un tiempo para resolver la dirección IP.
• Minificar archivos Javascript y CSS
  Minificar es eliminar los espacios en blanco y los saltos de linea innecesarios, minificar ayuda a reducir el tamaño de los archivos.
• Evitar las Redirecciones
  El hacer una redirección toma un tiempo para resolver el URL de destino, utilizar correctamente los tipos de redirecciones ayudará a mantener rápida la carga de nuestras paginas.
• Configurar los eTags
  Los eTags se agregan en los header para indicar si el archivo se ha modificado, para ello se compara el valor del eTag guardado en el browser con el eTag del archivo en el servidor.
• Remover Scripts duplicados
  Al eliminar los scripts duplicados conseguiremos disminuir la carga de nuestros archivos.
• Optimizar las Imagenes
  Podemos optimizar las imágenes, para ello hay que escoger adecuadamente el formato del archivo de imagen para reducir el tamaño del archivo.
• Utilizar dominios libre de Cookies
  Es recomendable colocar las imagenes, js y css en dominios que no utilizen cookies, esto ayudará a disminuir el trafico de contenido.

Herramientas para la Optimización

Existen herramientas que nos pueden ayudar a hacer un diagnostico del estado de optimización de nuestra página, ello nos dará una guia de lo que podemos optimizar para mejorar la velocidad de nuestra web.

• Firebug
  Firebug es el complemento básico para todo desarrollador web, esta extensión permite ver todos los archivos que se cargan con la pagina y los tiempos de carga.
• YSlow
  Este es una extensión para Firebug creada por Yahoo que permite hacer un diagnostico de la velocidad de carga de una pagina basado en reglas definidas por YSlow.
• Page Speed
  Este plugin creado por Google permite diagnosticar que puntos de nuestra web podemos mejorar para acelerar la carga de nuestras paginas.

Mas Información
Hay mucha información y muy bien documentada de todas las formas para optimizar nuestras paginas.

• High Performance Web Sites: Essential Knowledge for Front-End Engineers
• Best Practices for Speeding Up Your Web Site
• Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests
• Web Performance Best Practices

En futuros posts desarrollaremos uno a unos los puntos mencionados para optimizar nuestras páginas, las pondremos en práctica y analizaremos algunos casos prácticos.

Posts Relacionados

• Optimización: Google Page Speed Online
• Quarkbase: Info de Websites
• Acelerar carga web con PHP
• Optimización: Reducir peticiones HTTP
• Optimiza JavaScript con Closure Tools