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:
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 lavelocidad 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 decarga, 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 lacarga, 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 lavelocidad 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 mejorarpara acelerar la carga de nuestras paginas.
