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.
Asi evalua Google a nuestro servidor sin dichos ajustes:
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
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
- Globalmente para todos los achivos
Añadimos las siguientes líneas a nuesto archivo .htaccess
ExpiresActive on
ExpiresDefault "access plus 1 week" - Plazos distintos para cada tipo de archivos
Tenemos dos opciones posibles, podemos agrupar los acrhvios por su nombre, en dicho caso nuestra configuracion 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>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 síntaxis 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
<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>
Si volvemos a analizar nuestra página con PageSpeed, vemos que hemos mejorado un poco nuestra untuación
