mod_expires de Apache: Cachear contenido con htaccess

Podemos optimizar el rendimiento de nuestra web usando el módulo mod_expires de Apache en nuestro htaccess para cachear el contenido y así ahorrarnos ancho de banda y que la web cargue más rápido.

Otros post interesantes de htaccess y de WPO son:

• Compresión GZIP: Ahorrar ancho de banda en tu web
• Habilitar la compresión Gzip en WordPress mediante htaccess
• DNS prefetch: Optimizar la carga de nuestra web resolviendo DNS previamente
• Lazy load de imágenes en HTML nativo sin necesidad de JavaScript

Sintaxis de mod_expires de Apache

Veamos la sintaxis extraída de su página web oficial:

<IfModule mod_expires.c>
 ExpiresActive on|off
 ExpiresDefault    "access plus TIEMPO DE CACHE"
 ExpiresByType TIPO DE CONTENIDO    "access plus TIEMPO DE CACHE"
</IfModule>

Como podéis apreciar la sintaxis es sencilla, vamos a repasarla:

• ExpiresActive: Por defecto su valor es off, con el valor ‘on’ activamos el módulo mod_expires.
• ExpiresDefault: Definimos el tiempo por defecto a cachear y que no haya sido cacheado con otra regla de ExpiresByType.
• ExpiresByType: Definimos el tipo de contenido con su cacheo propio.

Ejemplos de mod_expires de Apache para cachear contenido

Os pongo un código de ejemplo que os puede valer perfectamente para poner en el htaccess de vuestra web:

<IfModule mod_expires.c>
 ExpiresActive on
 ExpiresDefault                                      "access plus 1 week"
 ExpiresByType text/css                              "access plus 1 month"
 ExpiresByType application/json                      "access plus 0 seconds"
 ExpiresByType application/xml                       "access plus 0 seconds"
 ExpiresByType text/xml                              "access plus 0 seconds"
 ExpiresByType image/x-icon                          "access plus 1 week"
 ExpiresByType text/x-component                      "access plus 1 month"
 ExpiresByType text/html                             "access plus 0 seconds"
 ExpiresByType application/javascript                "access plus 1 week"
 ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
 ExpiresByType text/cache-manifest                   "access plus 0 seconds"
 ExpiresByType audio/ogg                             "access plus 1 month"
 ExpiresByType image/gif                             "access plus 1 month"
 ExpiresByType image/jpeg                            "access plus 1 month"
 ExpiresByType image/webp                            "access plus 1 month"
 ExpiresByType image/png                             "access plus 1 month"
 ExpiresByType video/mp4                             "access plus 1 month"
 ExpiresByType video/ogg                             "access plus 1 month"
 ExpiresByType video/webm                            "access plus 1 month"
 ExpiresByType application/atom+xml                  "access plus 1 hour"
 ExpiresByType application/rss+xml                   "access plus 1 hour"
 ExpiresByType application/font-woff                 "access plus 1 month"
 ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
 ExpiresByType application/x-font-ttf                "access plus 1 month"
 ExpiresByType font/opentype                         "access plus 1 month"
 ExpiresByType image/svg+xml                         "access plus 1 month"
</IfModule>

Si os fijáis el contenido que suele variar fácilmente de valor lo he puesto con 0 segundos de chaché (no cachear), este contenido es XML, JSON y HTML.

Por otro lado, el contenido que podemos pensar que va a cambiar poco (estático) lo he puesto con tiempo de caché elevados, CSS, iconos, imágenes fuentes, vídeo y audio.