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
  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.

[-] Indice de contenidos
  • Especificar caché de Navegador
  • Utilizar caducidad
  • 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. <Filesmatch "\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$">
    2. ExpiresActive on
    3. 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:

    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.  
    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. # 1 SEMANA
    7.  
    8. <Filesmatch "\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$">
    9. ExpiresActive on
    10. 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.

    ¿Con ganas de aprender más? Conóceme y sigue mis perfiles sociales AQUÍ.

    También puedes conocer mis servicios:.

    Servicios SEO


    Servicios personalizados como Consultor SEO Freelace para profesionales, eCommerce, agencias y PYMES

    12 comentarios

    1. Eduardo White

      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. Ivan

      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. Arturo

      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. Dante

      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. jlmora

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

      saludos y gracias

    6. jlmora

      Me refiero a colocar el fichero htaccess en la carpeta raíz del proyecto

    7. jlmora

      Si te da ese error seguramente es porque el código de htaccess no es correcto

    8. Jorge

      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.

    9. Ramon

      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 ?

    10. jlmora

      Es posible que tu servidor no tenga habilitados esos módulos ¿lo has comprobado?

    Dejar un comentario

    Tu dirección de correo electrónico no será publicada.

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.