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 empezar con el tema, 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
  5. ¿Prestashop 5.1 lento? Consejos para acelerar tu E-commerce

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

  1. <ifmodule mod_expires.c>
  2. <Filesmatch "\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$">
  3.     ExpiresActive on
  4.     ExpiresDefault "access plus 2 days"
  5. </Filesmatch>
  6. </ifmodule>


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:

  1. ExpiresActive On
  2. ExpiresByType image/jpg "access plus 1 year"
  3. ExpiresByType image/jpeg "access plus 1 year"
  4. ExpiresByType image/gif "access plus 1 year"
  5. ExpiresByType image/png "access plus 1 year"
  6. ExpiresByType text/css "access plus 1 month"
  7. ExpiresByType application/pdf "access plus 1 month"
  8. ExpiresByType text/x-javascript "access plus 1 month"
  9. ExpiresByType application/x-shockwave-flash "access plus 1 month"
  10. ExpiresByType image/x-icon "access plus 1 year"
  11. 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. # 1 MES
  2. <ifmodule mod_expires.c>
  3. <Filesmatch "\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$">
  4.     ExpiresActive on
  5.     Header set Cache-Control "max-age=2592000, public"
  6. </Filesmatch>
  7. </ifmodule>
  8.  
  9. # 1 SEMANA
  10. <ifmodule mod_expires.c>
  11. <Filesmatch "\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$">
  12.     ExpiresActive on
  13.     Header set Cache-Control "max-age=2592000, public"
  14. </Filesmatch>
  15. </ifmodule>


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.


Conoce mis servicios WPO.



Servicios personalizados para profesionales, agencias y PYMES

12 comentarios en “Especificar caché de navegador – Tips SEO WPO

  1. Muchas gracias Juan Luis,

    Leo habitualmente tus post sobre SEO y optimizacion, para aplicarlos sobre mi web en prestashop. Aunque me queda aun mucho que mejorar este post concreto me ha hecho mejorar mucho el tiempo de carga/optimización de mi web.
    88/100 en pingdom
    72% y 89% en GTMetrix

    Muy contento y agredicdo con tu ayuda.

    Saludos

  2. Hola, esto es compatible con los plugin super cahe? es que me da error 500 cuando quiero poner en htaccess expiracion de cabeceras o la compresion, aunque algunas cosas puede que las tenga ya con el plugin minify y supercache

    Me podrias dar una idea

    gracias de antemano

  3. Buenas Juan Luis
    El .htaccess con esta regla habría que ponerlo en el directorio raíz o modificar el de carpeta logs, ampliando con este código, gracias.

  4. Hola Juan Luis!
    Gracias por la info.

    Te hago una consulta: en filesmatch, es necesario repetir las extenciones en mayuscula? ej: gif GIF, png PNG, etc

    Desde ya te agradezco nuevamente

  5. Yo diría que si sin lugar a dudas, pero siempre puedes probar o mirar el la referencia.

    saludos y gracias

  6. Buenas tardes, muchísimas gracias por ese truco. me ayudo bastante ya que mi tienda tiene más de 10000 productos y iba demasiado lento. con la aplicación de estas reglas en htaccess la web va bastante rápido.

    Saludos.

  7. Hola muchas gracias por el post. He colocado los datos que pones para habilitar la cache y aún así google me pide “Especificar caché de navegador” a través de su pagina developers.google.com.

    ¿ha cambiado desde el desde 2015 a hoy?
    ¿O cual debe ser la causa de este comportamiento del developers.google.com ?

Deja un comentario

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