Quantcast
Channel: Diseño Web · SEO · Marketing » Performance
Viewing all articles
Browse latest Browse all 10

Aumenta la velocidad de tu página con la cache (.htaccess)

$
0
0

Anteriormente, habíamos comentado en un artículo el cómo eliminar la cache de nuestro navegador, sin embargo algunas personas me preguntaron al oído “Qué es la cache“? Así que, vamos a mirar algunos conceptos.

Qué es la cache?

La palabra “cache” la oiremos mucho si nos movemos sobretodo por los campos de la informática.  De manera general podríamos decir que es el proceso donde un grupo de datos son duplicados con la finalidad de reducir un poco el tiempo de acceso a la información original y optimizar así el rendimiento del sitio.

De este modo, con el proceso de cacheo, estaríamos guardando documentos web (un html, una imagen, una librería javascript, etc) con el objetivo de; reducir el ancho de banda consumido por nuestros visitantes, reducir la carga de los servidores que realizan peticiones web y el retardo de una descarga. Una cache web almacena una copia de los documentos que son devueltos por un servidor y se encarga de atender las peticiones siguientes.

A la hora de programar una web en la que se espera un tráfico elevado es de vital importancia establecer una política de cacheo que permita crear un sistema “escalable” para evitar problemas a la hora de atender las peticiones de nuestros usuarios. Recuerdas el artículo de Qué es un ataque distribuido de denegación de servicio (DDos)?

Tipos de cache

Podemos decir que hay tres tipos de cache, cada una de ellas tiene un objetivo:

La caché del navegador que es privada y está presente en la máquina del usuario por lo que unicamente puede ser utilizada por un único usuario.

La caché proxy que interviene en la comunicación cliente-servidor y sirven páginas a diferentes usuarios, suele ser usada por los proveedores de servicios de Internet (ISP), universidades y empresas para ahorrar ancho de banda.

La caché de pasarela que funciona por parte del propio servidor y no distingue entre usuarios.

Cómo se gestiona una petición web

Para entender mejor el proceso de cacheo es necesario ser  conscientes de lo que ocurre durante la carga de un sitio web, vamos a mirar de una manera visual (gráfica) como se comunican el navegador y el servidor web al momento de solicitar una página sin cache:

http_communication1. Navegador: Hola, podrías enviarme el archivo ejemplo.htm?

2. Servidor: Claro, espera un momento que lo busco en mi disco duro.

3. Servidor: Aquí esta!

4. Servidor: Te lo envío, cuidado que es un poco pesado (100kb) y mi ancho de banda es limitado.

5. Navegador: Muchas gracias, ya lo estoy descargando para mostrárselo al usuario.

 

Cuando una página está cacheada el proceso sería el siguiente:

http_communication_cache1. Navegador: Hola, podrías enviarme el archivo ejemplo.htm?

2. Servidor: Claro, espera un momento estoy comprobando la última fecha de modificación del archivo.

3. Servidor: Aquí está! y veo que no se ha modificado el fichero desde la última vez que lo solicitaste.

4. Servidor: Estás de suerte, la versión que tienes en tu cache es la última.

5. Navegador: Genial, entonces no hace falta que me la envíes le mostraré al usuario la página que tengo cacheada.

 

A que ahora lo entiendes mucho mejor? ;)

Cache con apache y .htaccess

Existen tres mecanismos básicos para controlar la cache web de un sitio;

  • Mecanismos por Frescura (freshness): permite que una respuesta sea usada sin comprobar de nuevo el servidor. En los mecanismos por frescura cada repuesta lleva asociada una fecha de caducidad (como un yogurt) y puede ser utilizada sin necesidad de que el servidor compruebe su validez.
    — La cabecera de respuesta (header) Expires, facilita una fecha en la que el documento caduca, y la directiva Cache-Control: max-age informa al cliente del número de segundos durante los que la respuesta será válida.
  • Mecanismos por Validación (validation): nos permite comprobar si una respuesta cacheada sigue siendo buena después de caducar.
    — La cabecera Last-Modified, el cliente puede hacer una petición condicional usando la cabecera If-Modified-Since para saber si la página cambió.
  • Mecanismo por Invalidación: es un efecto secundario de otra petición.
    — Si la url asociada con una respuesta cacheada es solicitada más tarde a través de una petición POST, PUT o DELETE, la respuesta que se encontraba cacheada quedará invalidada.

Para hacer un cacheo lo mas “optimo” posible, debemos definir cada elemento de acuerdo al tiempo que creemos que se modificará en nuestro sitio. Por ejemplo, en el caso de “icono” de nuestro sitio podemos decir que no es algo que cambiamos cada semana ni si quiera cada mes!! De modo que podemos darle un año de caducidad.
Cada sitio tiene sus políticas de actualización, solo tu podrías saber con que frecuencia se hacen dichos cambios en tu sitio.

Un ejemplo válido para usar en nuestro .htaccess sería el mecanismo por frescura:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 1 AÑO
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
 
# 1 SEMANA
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
 
# 2 DIAS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
 
# 1 MINUTO
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"

Un buen cacheado en nuestro sitio, sobretodo en blogs donde el tráfico está a la orden del día (o al menos donde hay lectores suscritos que suelen visitar el sitio) es fundamental para brindar un acceso rápido al contenido.


Viewing all articles
Browse latest Browse all 10