Cache-Control en imatges de la teva web d'empresa: capçaleres HTTP, max-age, immutable i errors que serveixen contingut obsolet

Les imatges de la teva web d'empresa solen ser els fitxers més pesats i els que el navegador torna a demanar més sovint en visites repetides. Sense una política clara de Cache-Control, el navegador o el CDN no saben durant quant de temps poden desar cada JPG o WebP. Resultat: més latència, més ample de banda i, de vegades, fotos antigues després d'un canvi de disseny.

Aquesta guia explica quines capçaleres usar en imatges estàtiques, com combinar max-age i immutable, quin paper juga el CDN i quins errors convé evitar en webs corporatives.

Què és Cache-Control en imatges estàtiques

Cache-Control és una capçalera HTTP que indica al navegador, proxies i CDN si poden emmagatzemar una resposta i durant quant de temps. En imatges de /storage, /img o actius amb hash al nom, l'objectiu habitual és cachear agressivament perquè el contingut no canvia mentre la URL sigui la mateixa.

No substitueix l'optimització de pes ni formats moderns, però multiplica l'efecte d'aquestes millores en usuaris que tornen al site o naveguen diverses pàgines.

Per què importa en una web d'empresa

En sites B2B i corporatius es repeteixen molts actius: logo, fotos d'equip, heroes de serveis, captures de casos d'èxit. Sense cache:

• Cada pàgina torna a demanar les mateixes miniatures del blog o de l'equip.
• El servidor treballa de més quan un CDN podria servir la còpia al edge.
• Usuaris mòbils i Lighthouse perceben un site més lent en la segona visita.

Una política coherent també redueix cost d'hosting i millora l'experiència en xarxes limitades.

Capçaleres recomanades per a imatges amb nom versionat

Quan el fitxer inclou hash o versió (hero-v3.a4f2c9.webp), un patró segur és:

Cache-Control: public, max-age=31536000, immutable

public permet que CDN i navegador emmagatzemin la resposta. max-age=31536000 (un any) és habitual per a actius immutables. immutable avisa el client de no revalidar en la mateixa sessió si la URL no canvia.

Si regenereu imatges amb el mateix nom (sense hash), eviteu immutable i useu max-age moderat o canvieu el nom en publicar.

Imatges del CMS sense hash: equilibri entre frescor i velocitat

Fotos de blog, equip o producte que substituïu des del CMS solen mantenir la mateixa URL. Aquí convé:

• Cache-Control: public, max-age=86400 (24 h) o max-age=604800 (7 dies) segons freqüència de canvis.
• Purgar cache del CDN en actualitzar la imatge, si en feu servir un.
• Combinar amb preload només en el hero LCP, no en tota la galeria.

Documenteu qui purga CDN i quan, per no barrejar fotos noves amb cache antiga.

ETag, Last-Modified i CDN

A més de Cache-Control, el servidor pot enviar ETag o Last-Modified. En actius versionats sovint n'hi ha prou amb max-age llarg. En imatges de CMS, un ETag correcte permet 304 Not Modified i estalvia bytes.

Al CDN, alineu la TTL del edge amb la capçalera d'origen i eviteu regles contradictòries.

Errors freqüents

• Cache-Control: no-store a tot el site. Copiat de pàgines dinàmiques i aplicat a estàtics; les imatges mai es cacheen.
• max-age enorme sense versionat. Canvieu la foto d'equip però els visitants veuen l'anterior durant dies.
• Oblidar el CDN en desplegar. Origen correcte, edge obsolet.
• Confondre cache d'HTML amb cache d'imatge. Pàgines Laravel solen ser no-cache; JPG a /storage han de ser cacheables.
• Lazy loading mal aplicat al LCP. La cache no arregla un hero mal prioritzat; reviseu el lazy loading.

Checklist ràpid

1. Les imatges amb hash tenen max-age llarg i immutable?
2. Les fotos del CMS tenen TTL coherent amb el ritme editorial i purga de CDN?
3. Apache/Nginx envien capçaleres diferents per a /storage i HTML?
4. A DevTools → Network, una segona visita usa disk cache o 304?
5. Després d'un canvi de marca, heu actualitzat noms de fitxer o invalidat cache?

Conclusió

Cache-Control ben configurat converteix imatges ja optimitzades en actius que gairebé no penalitzen visites repetides. És un ajust d'infraestructura petit amb impacte directe en velocitat percebuda i costos.

Si voleu revisar capçaleres, CDN i flux de publicació d'imatges a la vostra web d'empresa, a aatsoft podem auditar origen, edge i CMS amb vosaltres.