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.
- Eliminar JS y CSS que bloquean visualización en mitad superior de página
- Utilizar versiones asíncronas de JavaScript
- Comprimir con .htaccess
- Optimización de rendimiento en PrestaShop
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
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:
- filesmatch: FilesMatch especificar la configuración concreta para el acceso a ficheros a cada tipo de fichero.
- 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.
- ExpiresDeFault: expecifica el tiempo de caducidad, que en este caso os lo he puesto para 31 días.
- 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.
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
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
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.
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
Debes colocarlo en la raíz del proyecto en cuestión
Yo diría que si sin lugar a dudas, pero siempre puedes probar o mirar el la referencia.
saludos y gracias
Me refiero a colocar el fichero htaccess en la carpeta raíz del proyecto
Si te da ese error seguramente es porque el código de htaccess no es correcto
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.
Funciona bastante bien, ya esta parte me la quité!
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 ?
Es posible que tu servidor no tenga habilitados esos módulos ¿lo has comprobado?