Cada vez que alguien entra en tu web, su navegador descarga todas las imágenes. Y en la siguiente visita, otra vez. Con un ajuste puedes decirle "guárdatelas, que no van a cambiar", y la segunda visita pasa a ser casi instantánea. Es de los cambios que mejor relación esfuerzo/resultado tienen.
Qué vas a conseguir
Le dices al navegador del visitante cuánto tiempo puede quedarse una copia de tus imágenes, tus tipografías y tus iconos. Mientras esa copia esté vigente, no vuelve a pedírtelas.
- Las visitas repetidas cargan mucho más rápido.
- Tu servidor recibe menos peticiones, así que aguanta mejor.
- Se nota especialmente en móvil, que es de donde entra más de la mitad de la gente.
Lo que no arregla: la primera visita de alguien que llega nuevo. Para esa lo que importa es que las imágenes no pesen de más.
Esto se configura en el archivo .htaccess, y ahí una coma mal puesta deja
toda tu web con un error 500, en blanco y para todo el mundo. Descárgate una
copia del archivo tal y como está antes de editarlo. Con eso, cualquier error se deshace en
treinta segundos.
Dónde se hace
- Entra en el gestor de archivos de tu hosting, o por SFTP.
- Activa ver archivos ocultos: el archivo empieza por punto y por eso no se ve.
- Busca el
.htaccessen la carpeta raíz de tu web (suele llamarsepublic_html,httpdocsowww). - Descárgate una copia.
- Añade el bloque de abajo al final del archivo.
El bloque que hay que añadir
<IfModule mod_expires.c>
ExpiresActive On
# Por defecto, para todo lo demás
ExpiresDefault "access plus 1 month"
# Imágenes: un año
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Tipografías, si las usas
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
</IfModule>Un año suena a mucho y es lo correcto: estos archivos no cambian. Si algún día cambias una imagen, súbela con otro nombre y se recarga sola.
Si en tu archivo ya existe un <IfModule mod_expires.c>,
no añadas un segundo: junta las líneas nuevas dentro del que ya está. Dos
bloques con instrucciones distintas se pisan entre ellos y acabas sin saber cuál manda.
Comprobar que ha funcionado
- Abre tu web y pulsa F12 para abrir las herramientas del navegador.
- Ve a la pestaña Red (o Network).
- Recarga la página.
- Pincha en una de las imágenes de la lista.
- Busca en las cabeceras de respuesta algo como
Cache-Control: max-age=31536000.
Si aparece, está hecho. Si no aparece, sigue por el apartado siguiente.
Si no funciona
| Qué pasa | Qué suele ser |
|---|---|
| No cambia nada, ninguna cabecera nueva | Tu servidor puede ser Nginx, y ahí el .htaccess
ni se lee. Se consigue lo mismo, pero se configura en el servidor.
Pregúntanos cuál tienes. |
| La web deja de cargar (error 500) | Hay un error de escritura. Sube la copia que guardaste y vuelve al punto de partida. |
| Funciona a medias | Puede haber otro bloque de caché en el archivo, o un plugin de optimización poniendo lo suyo por su cuenta. |
- No pongas caché larga en el HTML de las páginas, solo en imágenes, estilos y tipografías. Si cacheas el HTML un año, tus cambios no se verán.
- No sumes tres plugins de optimización con esto. Cada uno escribe su parte y acaban peleándose.
Preguntas frecuentes
He cambiado una imagen y sigue saliendo la antigua
Es la caché funcionando, no un fallo. El navegador tiene su copia y la conserva. La forma limpia de solucionarlo es subir la imagen nueva con otro nombre de archivo.
¿Esto afecta a lo que ven los buscadores?
Ayuda, porque la velocidad cuenta. Pero es una pieza pequeña: si tu web va lenta porque las imágenes pesan varios megas, la caché no lo va a tapar.
Tengo WordPress, ¿lo hago aquí o con un plugin?
Si ya tienes un plugin de caché, probablemente lo esté haciendo él: compruébalo antes de añadir nada, y no dupliques. Si no tienes ninguno, este ajuste es más ligero que instalar un plugin entero solo para esto.
¿Cuánto se nota?
En la segunda visita de la misma persona, bastante. En la primera, nada. Por eso lo primero que hay que mirar siempre es el peso de las imágenes.
- Mi web va lenta: por dónde empezar, si no sabes por dónde atacar.
- Qué es el htaccess, para entender el archivo que estás tocando.
Si tu web la llevamos nosotros
Esto ya va puesto y ajustado, no tienes que tocar nada. Y si tu web está en otro sitio y quieres que lo revisemos, dinos la dirección y te decimos qué le falta para ir más rápido: a veces es esto y a veces son las imágenes, que es distinto.
¿Preferís que lo hagamos nosotros?
Si no te apetece tocar el .htaccess de tu web en producción, lo entendemos
perfectamente. Nos lo pides y lo dejamos hecho, con copia previa. Sin compromiso.
