Esta guía muestra cómo configurar correctamente la caducidad del encabezado con Apache, optimizando el rendimiento del servidor web al servir archivos estáticos, como imágenes, CSS o archivos JavaScript.
Se ahorrará una gran cantidad de ancho de banda en su servidor al establecer una fecha mínima para el archivo de almacenamiento en caché. Como resultado, al usar la memoria caché del navegador del cliente, los sitios web alojados se cargarán más rápido.
Primero, conéctese a su servidor a través de una conexión SSH. Si aún no lo ha hecho, se recomienda seguir nuestra guía para conectarse de forma segura con SSH. En caso de un servidor local, vaya al siguiente paso y abra la terminal de su servidor.
Habilitación de los módulos necesarios
Para habilitar el envío de los encabezados necesarios, primero habilite el módulo Apache relacionado:
$ sudo a2enmod expires
Y luego reinicie el servicio:
$ sudo service apache2 restart
Configuración del módulo
La configuración del módulo se puede insertar en lo siguiente:
En la configuración de Apache:será heredado por todos los sitios controlados por Apache (hosts virtuales y no virtuales)
En un contenedor de host virtual
Dentro de la directiva
o archivo .htaccess
En el siguiente ejemplo, se inserta en la configuración del sitio por defecto:
$ sudo vim /etc/apache2/sites-available/000-default.conf
Luego agregue la siguiente configuración:
<IfModule mod_expires.c>
<FilesMatch "\.(jpe?g|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 1 week"
</FilesMatch>
</IfModule>
A través de la directiva FilesMatch, qué archivos debe conservar el navegador del cliente (en este caso, css, jpg, png, gif y js) se especifican. Mientras tanto, a través de ExpiresDefault, cuánto tiempo deben conservarse. (en este ejemplo, una semana) para lo que se indica.
Para aplicar los cambios, reinicie Apache:
$ sudo service apache2 restart
Además de los métodos FilesMatch y ExpiresDefault, ExpiresByType se puede usar para configurar el encabezado Expires para cada tipo de archivo, por ejemplo:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpg "access plus 60 days"
ExpiresByType image/png "access plus 60 days"
ExpiresByType image/gif "access plus 60 days"
ExpiresByType image/jpeg "access plus 60 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/javascript "access plus 1 week"
</IfModule>
Al usar este método, se puede obtener un control más granular sobre la duración del caché y se puede obtener el almacenamiento en caché de datos Ajax, al no insertar la aplicación de tipo MIME/javascript.
Para ambas directivas, la sintaxis para indicar la duración del caché es la misma, es decir:
“[base] plus [valore] [tipo] [valore] [tipo] [valore] [tipo] …”
El valor base puede ser:
acceso:fecha de solicitud del cliente
modificación:fecha de modificación del archivo
Mientras que el tipo puede tener los siguientes valores:
años:años
meses:meses
semanas:semanas
días:días
horas:horas
minutos:minutos
segundos:segundos
Algunos ejemplos de configuración son:
# One year cache expiry
ExpiresByType image/jpeg "access plus 1 year"
#Furthermore, more than one unit of measurement in sequence can be added. For example:
# Set 1-month, 15- day and 2-hour expiry
ExpiresByType text/html "access plus 1 month 15 days 2 hours"
# Cache expiry from the file modification date more than 5 hours and 3 minutes
ExpiresByType image/gif "modification plus 5 hours 3 minutes"
Por favor, recuerde que si tiene que cambiar el contenido de un archivo almacenado en caché, los clientes no lo descargarán hasta que expire el tiempo de almacenamiento en caché. Esto podría causar fallas en el funcionamiento de sus sitios web.
Aunque no se puede obligar a los clientes a ignorar el caché guardado anteriormente, se pueden usar varias técnicas para evitar este problema.
Un método que se usa a menudo es cambiar el nombre del archivo recién modificado (por ejemplo, de style.css a style-v2.css) o cambiar los enlaces agregando un número de versión, por ejemplo, de:
<script src="https://www.domain.com/js/myScript1.js"></script>
a lo siguiente:
<script src="https://www.domain.com/js/myScript1.js?v=3.1"></script>