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 On
  ExpiresDefault "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 On
ExpiresByType 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 on
  ExpiresDefault "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/

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *