Optimizar la carga de paginas web

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

Related Posts Plugin for WordPress, Blogger...

publicidad

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *