Image Caching Test
What is it?
Browser caching is one of the highest-leverage performance settings available for image-heavy pages, because images are the largest category of asset on most pages and they change rarely once published. With the right caching directives, a returning visitor retrieves images from the local browser cache instead of refetching them from the network, producing dramatically faster subsequent loads. This test checks whether the image responses on your page include the headers that allow browsers to store and reuse them, and flags any responses that miss out on browser caching.
Why image caching matters
Images are the largest category of asset on most pages, and they change rarely once published. That combination makes them ideal candidates for aggressive caching: a cached image takes near-zero time to load on a return visit, while an uncached one repeats the full network round trip. For sites with returning visitors (almost any commercial site or content publisher), proper image caching is one of the highest-leverage performance settings available.
The mechanism is purely a server or CDN configuration: set a long Cache-Control max-age on image responses, ideally combined with versioned filenames (hero.a3f9.jpg) so you can update the image by changing the URL rather than invalidating the cache. The immutable directive tells browsers to skip even revalidation requests, which is appropriate for versioned assets.
Common caching gaps this test catches
- No
Cache-ControlorExpiresheader, leaving browsers to revalidate every request. no-cacheorno-storedirectives applied to images, which are correct for HTML but wrong for static images.- Short max-age (under a day), where months or a year would be appropriate for versioned images.
- Cookie-bearing image requests that prevent shared caching; serve images from a cookie-free subdomain or CDN.
This test reports the caching headers on your page's images and flags responses that miss out on browser caching. The fix guide below covers configuring cache headers on the major web servers and CDNs, the role of versioned filenames, and how to verify in browser DevTools that images are genuinely served from cache on repeat visits.
Pass rate:
-
Top 100 websites: 95%This value indicates the percent of top 100 most visited websites in the US that pass this test (in the past 12 months).
-
All websites: 82%This value indicates the percent of all websites analyzed in SEO Site Checkup (500,000+) in the past 12 months.
| 2021 | 99% |
|---|---|
| 2022 | 98% |
| 2023 | 97% |
| 2024 | 95% |
100
75
50
25
0
How do I fix it?
This test fails when image responses lack caching headers that allow browsers to store them for repeat visits. With proper caching directives, returning visitors retrieve images from the local cache instead of refetching them, producing noticeably faster subsequent page loads. Fixing this issue is a server or CDN configuration change.
Where to make the change
- Server configuration: add
Cache-Controlheaders to image responses. A common setting isCache-Control: public, max-age=31536000, immutablefor versioned assets. - CDN configuration: Cloudflare, Fastly, CloudFront, and similar offer rules to set long cache lifetimes for image MIME types.
- WordPress and plugins: a caching plugin or a CDN integration handles cache headers without server changes.
- Shopify: Shopify serves images with appropriate cache headers automatically; failures usually point to externally hosted images.
Common causes and how to resolve them
- No
Cache-ControlorExpiresheader: add one. Browsers will revalidate every request without it. Cache-Control: no-cacheorno-store: these are correct for HTML responses but wrong for static images. Set a long max-age instead.- Short max-age (under a day): images change rarely; a max-age of months or a year is typical.
- Cookie-bearing image requests: if the image URL sets cookies or varies by user, browsers cannot cache effectively. Serve images from a cookie-free subdomain or your CDN.
Best practices
- Use versioned filenames: renaming the file when the content changes lets you set near-permanent cache lifetimes without ever serving stale files.
- Mark immutable assets as such: the
immutabledirective tells browsers to skip even revalidation requests. - Serve from a CDN: CDNs add caching, compression, and edge delivery in one step.
