Have to keep Invalidating CloudFront


We use Cloudfront for our CDN for our customer sites. We have an issue where sometimes the icons on some of our customer sites, stop showing and the only way to fix the issue is to invalidate but I read you only need to invalidate when something changes. This is very frustrating for us, it can be random when it occurs and we have to keep invalidating. Why is this happening and only for some customers and not everyone, how can we stop this happening?

  • Can you expand on "the icons...stop showing"? What happens when the browser requests the icon file? What is the response code?

  • All icons are shown as squares and the error message I attached is shown for Cors Policy.

3 Answers

Tough one to answer the reason. I’d check with looking at your cloudfront access logging.

I’d also check the logs of the origin. The origin may be having issues serving the icons.

Do you have any errors instead of images displayed?

profile picture
answered 2 months ago


This is the error we get when icons don't seem to work

answered 2 months ago
  • These look like fonts, not icons?


Cache-Control Headers: Ensure that the cache-control headers for your icon files are appropriately configured. If the cache-control headers allow CloudFront to cache the icons for a long time, it may result in stale content being served to users. Conversely, if the cache-control headers are too short, it may result in frequent cache misses and increased origin load.

TTL Settings: 

Review the TTL settings for your cache behaviors in CloudFront. The TTL determines how long CloudFront caches the content before checking the origin server for updates. Adjusting the TTL settings can help balance caching efficiency with content freshness.

Origin Configuration: 

Verify that your origin server is configured correctly to serve the icons with the appropriate cache-control headers. If the origin server sends conflicting cache-control headers or doesn't properly handle cache invalidations, it can lead to inconsistent caching behavior.

Cache Invalidation Patterns: 

Analyze the URL patterns for your icon files and ensure that they match the cache invalidation patterns configured in CloudFront. If the cache invalidation patterns are too broad or too specific, it may result in unnecessary cache invalidations or missed cache invalidations when the icons are updated.

Monitoring and Logging: 

Use CloudFront access logs and monitoring metrics to gain insights into caching behavior and identify patterns or anomalies. Monitoring cache hit ratios, cache utilization, and cache behavior can help you pinpoint potential issues and optimize your caching strategy.

Edge Caching vs. Browser Cache:

Consider whether the issue may be related to browser caching rather than CloudFront caching. If the icons are cached aggressively by the client's browsers, it may lead to inconsistencies in their display. You can address this by implementing cache busting techniques or versioning the icon URLs.

Testing and Validation: 

Regularly test your customer sites under different conditions to identify any caching-related issues. Use tools like curl or browser developer tools to inspect cache headers and verify caching behavior.

By carefully reviewing and adjusting your caching configuration, monitoring caching behavior, and ensuring consistency between cache-control headers and cache invalidation patterns, you can minimize the occurrence of issues with CloudFront caching and provide a more reliable experience for your customers.

profile picture
answered 2 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions