Este post fue creado por unijimpe en el blog http://blog.unijimpe.net.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://feedproxy.google.com/~r/unijimpe/~3/ezEN0qeffrg/

Post agregado:

HTTP Redirect Viewer es un herramienta que te permitirá visualizar todas las redirecciones que se hacen en una determinada URL dependiendo del User Agent que se puede seleccionar. Esto es útil para verificar el tipo de redirección que estamos aplicando a nuestros proyectos y probar el funcionamiento dependiendo del navegador con que se accede.

Características

Entre las principales características de esta herramienta podemos mencionar:

• Visualizar la cantidad y tipos de redirecciones (301 y 302).
• Verificar el tipo de canonicalización de un dominio.
• Verificar si el cambio de dominio se hace correctamente (Redirección 301).
• Verificar el tipo de respuesta por navegador (Se puede seleccionar el User Agent).
• Revisar que contenido se envía a los usuarios que acceden desde iPhone/iPad.
• Se puede determinar que URL pueden ver el robot de Google.
• Permite visualizar los headers de respuesta de un URL.
• Permite visualizar el contenido de respuesta de un URL.

Ejemplos de Uso

Analizamos la dirección http://gmail.com tendremos un total de 4 redirecciones (Tres del tipo 301 y una del tipo 302). Obviamente esto no es optimo por la cantidad de redirecciones lo cual incrementa el tiempo de carga para el usuario.

Analizando la dirección http://www.bajar-youtube.com se tiene una sola redirección y del tipo 301 a la ruta final http://bajar-youtube.com lo cual indica que hay canonicalización (En este caso para no utilizar WWW en el dominio).

Esta herramienta fue escrita como complemento al artículo Como hacer redireccionamiento 301 y 302, si tienen sugerencias u observaciones pueden dejarnos un comentario para tomarlo en cuenta para futuras versiones.

© 2006 - 2010 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Autor del post: unijimpe
Enlace original: http://feedproxy.google.com/~r/unijimpe/~3/ezEN0qeffrg/

Este post fue creado por unijimpe en el blog http://blog.unijimpe.net.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://feedproxy.google.com/~r/unijimpe/~3/8hDQUpfWB6c/

Post agregado:

Los Header de expiración son utilizados para indicar cuando expira un determinado archivo, en cuyo caso el mismo no es cargado nuevamente si es que aun no ha expirado. Entonces para archivos que no cambian comúnmente como las imágenes, vídeos, javascript, hojas de estilo podríamos agregarle headers de expiración con lo cual solo se cargarán la primera vez que accedemos a la pagina.

Para ello se pueden utilizar los headers: Expires que contiene la fecha en la cual expira el archivo y Cache-Control, se pueden agregar estos dos headers por separado pero si agregamos el Expires este agregará también el header Cache-Control.

Expiración Utilizando htaccess

Los servidores web Apache son muy versátiles y permiten configurar de forma sencilla los headers de expiración, para ello debes incluir las directivas en el archivo .htaccess. Para el caso de la expiración se puede utilizar ExpiresDefault, para ello tenemos las siguientes directivas de tiempo: years, months, weeks, days, hours, minutes, seconds.

Lo recomendables es colocar una expiración de 30 días para los archivos estaticos (jpg, png, gif, swf, js, css), entonces podríamos agregar el siguiente código:

Además de ello la expiración también se puede expresar en segundos, entonces modificando el ejemplo anterior tendríamos (30 dias = 60*60*24*30 = 2592000):

Otra forma para agregar la expiración es el uso de la directiva ExpiresByType mediante la cual se le puede asignar tiempos diferentes dependiendo del tipo de archivo. Con esta directiva tendríamos el ejemplo anterior transformado en:

Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/optimization/expiration/, si utilizanFirebug para ver el trafico de red observarán como se cargan las imágenes la primera vez, las siguientes estas se leen del cache del browser. Les dejo los archivos de ejemplo con el .htaccess para cada ejemplo con el cual pueden hacer sus pruebas.

Expiración Utilizando PHP

PHP también es otra solución para agregar los headers de expiración. Para ello haremos uso de la función header. El formato del header de expiración en:

Creando dinámicamente la expiración, utilizando las funciones de fecha tendríamos un ejemplo con la expiración de 30 dias (60*60*24*30 = 30 dias expresados en segundos)

Mas Información
Hemos presentado una breve explicación utilizando .htaccess y PHP, pueden tener mas información y conceptos mas desarrollados en:

• Add an Expires or a Cache-Control Header
• Apache Module mod_expires
• Use Server Cache Control to Improve Performance
• PHP: Howto control page caching

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Autor del post: unijimpe
Enlace original: http://feedproxy.google.com/~r/unijimpe/~3/8hDQUpfWB6c/

Este post fue creado por unijimpe en el blog http://blog.unijimpe.net.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://feedproxy.google.com/~r/unijimpe/~3/7pvZNwOLe30/

Post agregado:

Una de las primeras reglas para aumentar la 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 cargar el HTML. Si logramos reducir al máximo la carga de componentes externos lograremos mejorar el rendimiento de nuestro web.

Combinar archivos CSS y JS

Si tenemos una pagina que carga múltiples archivos JS para lograr efectos e interactividad o tal vez utilizamos múltiples archivos CSS (Esto generalmente ocurre al utilizar librerías de terceros que vienen con sus archivos JS y CSS). Podríamos combinar todos los archivos JS y CSS con lo cual podríamos disminuir la cantidad de peticiones HTTP .

Por ejemplo si tenemos una página que carga múltiples archivos Javascript tendríamos un código de la forma:

Uniendo todo el contenido CSS en un archivo y el contenido JS en un solo archivo podríamos tener el siguiente código:

Utilizar Mapa de Imágenes

Si utilizas varias imágenes como enlaces, una solución es unir las imágenes y utilizar mapa de imágenes para los enlaces, entonces en lugar de cargar una imagen por cada enlace, cargaremos una sola imagen para todos los enlaces y utilizamos un mapa de imágenes. Por ejemplo podríamos tener un menú de la forma:

Uniendo las imágenes y reemplazando los enlaces por un mapa de imágenes se tendría:

Uso de CSS Sprites

Si utilizamos botones con rollover es típico hacerlo con dos imágenes una para el estado normal y otra para el rollover. Una técnica llamada CSS Sprites consiste en utilizar una sola imagen como fondo que contenga todas las imágenes a utilizar y para hacer el efecto de cambio de imagen se cambia la posición de la imagen de fondo.

Entonces al combinar las imágenes logramos disminuir la cantidad de peticiones HTTP con el consiguiente ahorro en el tiempo de carga. Pueden leer mas acerca de como funcionan los CSS Sprites en CSS Sprites: Image Slicing’s Kiss of Death

Imágenes Inline

Otra forma de disminuir la cantidad de peticiones es incluir las imágenes pequeñas como texto en el HTML, para ello se convierte la imagen en base64 y se incluye como texto. Por ejemplo normalmente incluimos una imagen con el siguiente código:

Convirtiendo la imagen en base64 podremos incluir la imagen sin llamar a un archivo externo de la siguiente forma:

Donde R0lGODlhEAAQAJEAAAAAAN3d3...XZ texto resumido, resultado de convertir la imagen en texto codificado en base64. Ahora para reemplazar esta imagen tenemos que codificar la imagen, esto lo podemos hacer con la función base64_encode de PHP, entonces el código PHP que imprime la imagen como texto sería:

Otra opción para convertir las imágenes en base64 es utilizar un convertidor online como por ejemplo Online Image to Base64 Converter. Hay que tener en cuenta que este método es recomendable para imágenes pequeñas de preferencia en formato GIF y menores a 100KB por que la codificación en base64 incrementa el tamaño del archivo.

Mas Información
Con estos pequeños cambios podemos incrementar la velocidad de carga de nuestra web. No son muy complejos de implementar y además no interfieren con el backend de la página web. Pueden encontrar mas información en:

• Minimize HTTP Requests
• How to reduce the number of HTTP requests
• Tutorial: Creating Image Maps
• CSS Sprites: Image Slicing’s Kiss of Death
• Inline Images with Data URLs

© 2006 - 2009 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Autor del post: unijimpe
Enlace original: http://feedproxy.google.com/~r/unijimpe/~3/7pvZNwOLe30/