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 

  1. Globalmente para todos los achivos
    Añadimos las siguientes líneas a nuesto archivo .htaccess
    ExpiresActive on
    ExpiresDefault  "access plus 1 week"
  2. 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

0 0 vote
Valoración del artículo
Suscribir
Notificar de
guest
0 Comentarios
Inline Feedbacks
View all comments