Especificar caché de navegador – Tips SEO WPO

Uno de los principales recursos que usamos como Consultores SEO para mejorar el rendimiento de un sitio web es configurando su cache. Si estamos hablando de Apache como servidor lo normal sería utilizar el fichero .htaccess para hacer allí la configuración. En caso de estar usando algún CMS tipo Joomla, WordPress o Prestashop también podremos hacer eso de la configuración que os dejo a continuación aunque para esto sistemas existen módulos y plugins que seguramente a los neófitos en WPO y desarrollo web os serán más amigables (que no más eficaces).

Antes de continuar quiero recomendar, a los que estáis interesados en mejorar el rendimiento de vuestra web,  este hosting especializado en WPO para cualquier tipo de web y este otro servicio WPO especialmente orientado a usuarios de WP. También me gustaría enlazar a la serie de consejos o tips sobre WPO que acompañan a esta entrada.

1. Eliminar JS y CSS que bloquean visualización en mitad superior de página
2. Utilizar versiones asíncronas de JavaScript
3. Comprimir con .htaccess
4. Optimización de rendimiento en PrestaShop

Y ahora seguimos con los consejos, pero no olvides revisar después las entradas que he dejado enlazadas.

Especificar caché de Navegador

EL primer método que os muestro lo hace configurando el tiempo de expiración de cada recurso.

El código de .htaccess sería

<Filesmatch "\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$">
ExpiresActive on
ExpiresDefault "access plus 2 days"

Explico cada parte:

1. filesmatch: FilesMatch especificar la configuración concreta para el acceso a ficheros a cada tipo de fichero.
2. ExpiresActive: Controla el tiempo de expiración y la edad máxima de los archivos que se trasmite mediante cabeceras HTTP a los navegadores y así estos pueden saber cuanto tiempo deben mantener una elemento en su cache. Por tanto si lo ponemos ON podremos configurar los anteriores parámetros.
3. ExpiresDeFault: expecifica el tiempo de caducidad, que en este caso os lo he puesto para 31 días.
4. Se pueden hacer otras configuraciones avanzadas siguiendo la guía de Apache

También podríamos ponerlo sin usar el módulo mod_expires de esta forma:

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

Utilizar caducidad

Para establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP se debe configurar la edad máxima de los archivos o fecha de caducidad, para ello podemos seguir el siguiente ejemplo

# 1 MES

<Filesmatch «\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$»>
ExpiresActive on
Header set Cache-Control «max-age=2592000, public»

# 1 SEMANA

<Filesmatch «\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$»>
ExpiresActive on
Header set Cache-Control «max-age=2592000, public»

Usando los anteriores métodos la navegación por vuestro sitio será más rápida una vez que el usario tenga cargadas las imágenes y documentos en la caché de su navegador.