Desde que Google incluyó en su algoritmo la velocidad de carga de la web, activar la caché del navegador sirve para mejorar la velocidad de carga, sobre todo si tus visitantes son recurrentes y, en todo caso, el posicionamiento de tu web.
¿Para qué sirve la caché?
La caché de imágenes del navegador sirve, como vimos anteriormente, para mejorar el rendimiento de las páginas web, reduciendo el tiempo de carga, el ancho de banda y los costes de alojamiento.
¿Cómo especificar cuándo expiran las imágenes?
En servidores Apache es muy fácil determinar el tiempo que los archivos deben permanecer en la caché. Tienes que editar el archivo .htaccess del directorio de imágenes y añadir el siguiente código:
<ifmodule mod_expires.c> <filesmatch ".(jpg|JPG|gif|GIF|png|css|ico)$"> ExpiresActive on ExpiresDefault "access plus 7 day" </filesmatch> </ifmodule>
Este código indica que los archivos de imagen y los archivos css deben caducar a los 7 días. Como las imágenes que utilizamos en el diseño de un sitio web no se cambian a menudo, podemos usar un vencimiento de 30 días o más, Google recomienda 31.
Si usas Firebug con PageSpeed…
Si te ayudas de Firebug, junto con PageSpeed, para optimizar tus páginas web es muy posible que te hayas encontrado con esto:
Te suena ¿verdad? dentro está el listado de los archivos cacheables que contiene la página y en paréntesis si se ha especificado o no un tiempo de caché para cada uno de ellos.
Después de añadir ese código a Todotutoriales, PageSpeed nos ha subido dos puntos y nos devuelve este listado:
Como ves, ya solo alerta del favicon.ico, el resto de los archivos que aparecen son los de Youtube y los de Facebook, pero sobre esos no tenemos control, ya que están en servidores ajenos a los que no tenemos acceso. Pero no te preocupes, porque al cabo de unas horas/días ya cachea bien el favicon:
Saludos e intentado implementar vuestro codigo en una web echa con joomla y con servior Apache y no me a sido posible me devuelve una fallo de servidor 500
¿alguna idea sobre lo que podria hacer con esto?
gracias por las posibles respuestas
Hola Carlos, se me ocurre que podría ser un problema con las comillas («). Saldrás de dudas si pruebas editando en texto plano (ASCII) y reescribiendo las comillas después de copiar-pegar el código. ¡Suerte!
Para WordPress uso plugins de Cache que son muy buenos y me ahorran el trabajo…
totalcache, supercache, etc
He subido ese código tal cual a mi archivo htaccess y la web deja de funcionar y da error
¿alguna opinión?
Complemento mi información anterior, da error 500 si subo el código al archivo htaccess
Pueden ser las comillas, que las convierta, intenta pasar el código por algún programa de texto plano tipo notepad, bloc de notas… o edítalo directamente en el servidor.
Efectivamente tal como dice zanguanga reescribiendo las comillas no da el error, pero no tiene efecto sobre la expiración de la cache pues me sigue saliendo expiration not specified) en todas las imagenes
Hay que esperar un poco, y refrescar el navegador, también puedes probar con otro navegador. Algunas cachés tardan horas en aparecer.
Ok gracias todotuto
Creo que debe ser porque tengo la web sin hojas de estilo o algo mas que influye porque también me da error Enable Keep-Alive la herrameinta de google pagespped en todas las imagenes. y despúes de poner vuestro código resulta curioso que el score me baja del 50% al 49. es decir que lo complico mas
Una cuestion como podria especificar la expiracion para un js, gracias
Hola wus. Puedes añadir el tipo de archivo que quieras en la segunda línea, por ejemplo:
|flv|js|mp4y así con todos los archivos cacheables incluidos htm, php, etc.
Como advertencia solo decir que cada cual lo haga bajo su responsabilidad, ya que quizá esto aumente el consumo de recursos del servidor.
Yo tengo una duda:
Resulta que pongo el código y tal y como dices aumenta dos puntos. Al ponerlo digamos que desaparece del listado todo lo que se encuentra en la carpeta del .htaccess. El problema viene cuando veo que del listado no han desaparecido imágenes del listado, correspondientes a subcarpetas del directorio raíz. ¿con el tiempo serán quitadas del listado o hay que hacer alguna otra modificación?
Respecto a la duda que puse hace dos días, parece ser que google va metiendo en sus sistema las imágenes que se encuentran en las subcarpetas del directorio raíz, por lo que pasadas unas horas / días se van incluyendo todas
hola! estoy usando el page speed con firebug en firefox y busque esto porque no entoendo… osea el cache ya tengo ideao ok pero osas configuraciones donde las hago? en la plantilla del blogger? o es algo que el blogger debe traer por defecto? oo es algo q se hace en un servidor propio?… estoy confundido si me puedes sacar de la duda gracias amigo.. hey y te invito que conoscas mi blog http://yoenmimoto.blogspot.com estoy nuevito pero me ayudarian mucho tus consejos, gracias!
Los cambios que se explican en este tutorial se hacen en el archivo .htaccess. Este archivo funciona en servidores Apache, pero ignoro si los usuarios de blogspot.com tienen acceso al mismo.
Hola, tengo una duda, eh puesto el codigo y no em da resultados, tengo un blog wordpress, es debido a eso o sera algo del hosting? porfavor agradesco sus opiniones de antemando
Gracias
José
Gracias pro la ayuda :S
saludos
José
Que tal gracias por el tip, lo use y mejore casi un 20% mi pagespeed, al principio no me funcionaba por el tema de las comillas, lo pase a traves del bloc de notas y tampoco me andaba. termine usando este codigo con una comilla simple y anduvo:
ExpiresActive on
ExpiresDefault ‘access plus 31 day’
Tengo un blog en wordpress y use el editor html de hostgator
@Nacho Muchas gracias por tu aporte 🙂
Muchásimas Gracias ! !
He añadido el siguiente código en mi .htaccess:
ifmodule mod_expires.c >ExpiresActive On
ExpiresDefault A604800
filesmatch ".(jpg|JPG|gif|GIF|png|PNG|css|CSS|ico|ICO|js|JS)$" >
ExpiresDefault "access plus 7 day"
/filesmatch >
/ifmodule >
Funciona 100% y me ha subido al instante la «Page Speed Score» de 80 a 87/100 )
Si todos siguiésemos consejos como el que comentas en este Post, creo que Internet funcionaráa 3 veces más rápido porque por las Redes no viajaráan una y otra vez los mismos datos una y otra vez. Creo que una semana de expiración de imágenes y scripts en caché para cualquier página Web estándard debería ser la configuración mánima obligatoria de serie en todos los navegadores.
Un Saludo y de nuevo Gracias por vuestro Trabajo ! !
Muchas gracias por la parte que me toca, tienes razón, unas cuantas buenas prácticas e Internet sería cien veces mejor para todos. La caché yo la tengo en 20-30 días, creo 😉
Hola, en el ejemplo veo que determinas diferentes tiempos de expiración para determinados archivos. ¿Como logro eso?
Tengo varios archivos png (tiempo de expiración 1 mes) y quisiera que sólo 1 en concreto, calendario.png, expirase pasado unas horas (que es el archivo que cambia cada día)
¿Hay alguna forma de hacerlo?