Optimizar Apache 2: Cache del navegador y compresión
Hoy vamos a hablar de dos ajustes necesarios en nuestro servidor Apache que haran que Google y otros medidores de velocidad como GMetrix nos quieran un poco más. Me refiero a implementar la caché del navegador y habilitar la compresion del contenido enviado. Estos ajustes, ademas de mejorar el rendimiento por sí mismos, son importantes para el correctos funcionamiento de plugins como W3 Total Cache.
Para acometer esta tarea tenemos que activar los siguientes módulos en nuestro servidor Apache: mod_expires, mod_header y mod_deflate. Vamos a por ellos.
Los activamos desde nuestra consola SSH
sudo a2enmod headers expires deflate
Se nos informará si alguno de ellos ya estuviese activado y si fuese necesario se nos darán las instrucciones para reiniciar el servidor web. En Ubuntu, headers y expires ya están activados normalmente.
sudo service apache2 restart
Repasemos brevemente la función de cada módulo:
- mod_headers: Este módulo permite al servidor web enviar las cabeceras HTTP necesarias para configurar el cache de contenidos
- mod_expires: Este módulo es el que permite definir durante cuanto tiempo el navegador almacenará en su cache los contenidos descargados.
- mod_deflate: Este módulo habilita la compresión del contenido enviado.
Configuración de mod_expires
Opción A: Aplicar de forma global para todos los archivos
Añadimos las siguientes líneas a nuestro archivo .htaccess
ExpiresActive onExpiresDefault "access plus 1 week"Opción B: Plazos distintos para cada tipo de archivos
Tenemos dos opciones posibles, podemos agrupar los archivos por su nombre, en dicho caso nuestra configuración sería similar a la siguiente:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">ExpiresActive OnExpiresDefault "access plus 1 day 12 hours"</filesMatch>
Opción C: La otra variante es especificar el tipo de archivo, en dicho caso añadiremos líneas como estas:
ExpiresActive OnExpiresByType images/jpeg "modification plus 30 days"ExpiresByType images/jpg "modification plus 30 days"
En este caso indicamos que el plazo empiece a contar desde la fecha de creación y no desde la descarga del archivo
Como vemos en los ejemplos la sintaxis es sencilla
<contenido> “<base> [plus] {<num> <tipo>}*”
Donde
- contenido ⇔ tipo de contenido,
- base ⇔ puede ser now o acces (si contamos desde el momento de la descarga) o modification(si contamos desde la última modificación del archivo)
- [plus] {<num> <tipo>} ⇔ plus es opcional, pero hace más legible la expresión, num es un número entero y tipo uno de los siguientes: years, months, weeks, hours, minutes, seconds. Podemos concatenar todos los que necesitemos
Veamos un ejemplo habitual de uso de estas directivas
Antes que nada veremos si nuestro servidor apache está leyendo los archivos .htacces, que normalmente no lo hace:
Hacer que nuestro apache lea los archivos .htaccess
Si queremos que nuestros archivos sean leídos (aunque esto supone una carga más a nuestro servidor) debemos cambiar algunas cosas del fichero apache2.conf.
Normalmente está ubicado en /etc/apache2/apache2.conf y para editarlo usamos:
sudo nano /etc/apache2/apache2.conf
Dentro de nano, podemos buscar con Ctrl + W
Hay un fragmento que dice algo así:
<Directory /var/www/>
AllowOverride None
… aquí más cosas
</Directory>
Son las reglas del directorio /var/www. Vamos a cambiar la línea que dice AllowOverride Nonepor AllowOverride All
De manera que quede así:
<Directory /var/www/>
AllowOverride All
… aquí más cosas
</Directory>
Y guardamos con Ctrl + O. Luego reiniciamos nuestro servidor con:
sudo service apache2 restart
Con lo que ya habríamos habilitado la sobrescritura o el override de configuraciones. Cabe mencionar que esto funciona en servidores en donde tenemos el acceso completo, no aquellos de hosting compartido.
Editamos y/o creamos el archivo .htaccess:
sudo nano /var/www/html/.htaccess
Copiamos el siguiente ejemplo:
<IfModule mod_expires.c>ExpiresActive onExpiresDefault "access plus 1 week"ExpiresByType text/cache-manifest "access plus 90 seconds"ExpiresByType text/html "access plus 90 seconds"ExpiresByType text/xml "access plus 90 seconds"ExpiresByType application/xml "access plus 90 seconds"ExpiresByType application/json "access plus 90 seconds"ExpiresByType application/rss+xml "access plus 1 hour"ExpiresByType application/atom+xml "access plus 1 hour"ExpiresByType image/x-icon "access plus 1 week"ExpiresByType image/gif "access plus 1 month"ExpiresByType image/png "access plus 1 month"ExpiresByType image/jpeg "access plus 1 month"ExpiresByType video/ogg "access plus 1 month"ExpiresByType audio/ogg "access plus 1 month"ExpiresByType video/mp4 "access plus 1 month"ExpiresByType video/webm "access plus 1 month"ExpiresByType text/x-component "access plus 1 month"ExpiresByType application/x-font-ttf "access plus 1 month"ExpiresByType font/opentype "access plus 1 month"ExpiresByType application/x-font-woff "access plus 1 month"ExpiresByType application/font-woff2 "access plus 1 month"ExpiresByType image/svg+xml "access plus 1 month"ExpiresByType application/vnd.ms-fontobject "access plus 1 month"ExpiresByType text/css "access plus 1 week"ExpiresByType application/javascript "access plus 1 week"<IfModule mod_headers.c>Header append Cache-Control "public"</IfModule></IfModule>
Añadimos estas líneas a nuestro .htaccess y nuestro servidor enviará las cabeceras correctas para cachear sus contenidos
Configuración de mod_deflate
Todos los navegadores modernos aceptan el contenido comprimido, por tanto al utilizar esta opción reduciremos el tamaño de la información enviada, lo que hará que nuestra página cargue más rápidamente. Es una opción útil para los textos, ya que en el caso de las imágenes y otro contenido multimedia se utilizan formatos con compresión y no tiene sentido usar una compresión adicional. Las líneas a añadir serían las siguientes:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript</IfModule>
Referencias:
https://www.rjcardenas.com/optimizar-apache-cache-del-navegador-y-compresion/
https://parzibyte.me/blog/2018/06/29/habilitar-archivos-htaccess-apache/
