When you're working on changes (like CSS, JS, or images), it’s a good idea to set a shorter cache expiration time in Nginx so your browser and visitors don’t see old cached content. Once everything works fine, you can increase the cache time for better performance.

Otherwise, Chrome will keep the old files cached, even if you manually clear the browser cache.

That’s because browsers like Chrome sometimes cache aggressively, especially for resources with long cache expiration times (like 1 year or 1 month). Setting a shorter expires time while you’re developing ensures that your changes are visible right away without being stuck with old cached files.

Here’s how you can do it in Nginx config:

  location ~* ^(/cache/|/cache_public/|/plugins_public/|/modules/|/studio/|/template/).+\.(jpg|jpeg|gif|css|png|js|ico|svg|eot|ttf|woff|woff2)$ {
    access_log off;

    # Cache expiration examples:
    # expires 1m;      # 1 minute
    # expires 10m;     # 10 minutes
    # expires 30m;     # 30 minutes
    # expires 1h;      # 1 hour
    # expires 6h;      # 6 hours
    # expires 12h;     # 12 hours
    # expires 1d;      # 1 day
    # expires 7d;      # 7 days (1 week)
    # expires 30d;     # 30 days (~1 month)
    # expires 90d;     # 90 days (~3 months)
    # expires 180d;    # 180 days (~6 months)
    # expires 1y;      # 1 year

    # Active cache expiration setting:
    expires 1m;

    # Cache-Control header example durations:
    # 60 seconds      = 1 minute
    # 600 seconds     = 10 minutes
    # 1800 seconds    = 30 minutes
    # 3600 seconds    = 1 hour
    # 21600 seconds   = 6 hours
    # 43200 seconds   = 12 hours
    # 86400 seconds   = 1 day
    # 604800 seconds  = 1 week
    # 2592000 seconds = 1 month
    # 31536000 seconds= 1 year

    # Optional Cache-Control header:
    # add_header Cache-Control "public, max-age=3600";

    try_files $uri =404;
}