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

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.

Comentarios Total 11 comentarios



[…] por ello que me hago eco del excelente artículo publicado en Unijimpe sobre optimización de la carga de páginas web. En este artículo se detallan algunas reglas para […]

Carluis Perez
Publicado: 05/01/2010 4:24 pm

muy bueno este articulo amigo unijimpe, te felicito

Sara
Publicado: 09/01/2010 1:16 pm

buen articulo unijimpe ,¿y si hay muchos scrpit de php tambien demora?
esk voi a crear una web de noticias y kisiera k enves de k m salga la fecha “10-10-2009 15:40” se pueda poner hace 2 minutos si recien esta publicada o si pasan meses que salga hace 4 meses o hace 1 año y 3 mese y asi susesivamente mas o menos me entiendes ¿no?
Bueno espero tu respuesta chao gracias

marta
Publicado: 11/01/2010 7:30 am

ola amigo unijimpe xq no pones un diseño mas bonito ay varis paginas para descargar plntillas esk este verde y tu menu :S
bye

Juan
Publicado: 23/01/2010 4:10 pm

ola Sara ia entiendo a lo que te refieres es como en youtube cuando buscas un video y en las informaciones sale hace un mes y tal lo k podrias hacer es buscar resta de fechas y cosas asi suerte


[…] velocidad de carga de una web es reducir la cantidad de peticiones HTTP. Recordando lo comentado en Optimizar Carga de Paginas Web el 80% del tiempo se emplea en descargar los componentes de una pagina mientras que solo el 20% en […]


[…] velocidad de carga de una web es reducir la cantidad de peticiones HTTP. Recordando lo comentado en Optimizar Carga de Paginas Web el 80% del tiempo se emplea en descargar los componentes de una pagina mientras que solo el 20% en […]


[…] utiliza gzip para enviar contenido. Para mas tips para acelerar la velocidad de carga pueden leer Optimizar Carga de Paginas Web.Análisis del Código HTMLLos motores de búsqueda interpretan nuestra página como un texto plano […]

Jessik
Publicado: 30/03/2012 10:54 pm

En uno de mis proyectos eliminé directamente todo el Javascript de mi Home… Si se pueden hacer animaciones con Css3, queda como opción eliminar el js.
También es útil minimizar los archivos Css y Js con http://www.refresh-sf.com/yui/


[…] optimizadas, utilizar hosting y servidores de garantías,… aquí os dejamos una guía sobre como optimizar la carga de las webs -Enlaces internos.Para enlazar las paginas internas de tu web unas con otras recomendamos utilizar […]


[…] optimizadas, utilizar hosting y servidores de garantías,… aquí os dejamos una guía sobre como optimizar la carga de las webs-Enlaces internos.Para enlazar las paginas internas de tu web unas con otras recomendamos utilizar […]

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)