What is caching best practice? (settings in .htaccess)

[Gemini23]

Trying to get ensure caching is up to date and provide the best user experience.

What is the benefit of text/html 1 hour? (Google recommended)

Is the following 'okay'?
Would this cause the cache to be 'overwritten and the URL content reloaded IF the content was changed?

Or - any better suggestion(s)?

# EXPIRES CACHING
<IfModule mod_expires.c>
ExpiresActive On
# Shorter caching for HTML as it is likely to change frequently
ExpiresByType text/html "access 1 hour"
# Longer caching for static assets as they change infrequently
ExpiresByType image/gif "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 year"
ExpiresByType text/javascript "access 1 year"
ExpiresByType application/javascript "access 1 year"
ExpiresByType application/x-javascript "access 1 year"
ExpiresByType application/pdf "access 1 year"
ExpiresByType image/x-icon "access 1 year"
# Default caching period for any unspecified content types
ExpiresDefault "access 1 month"
</IfModule>
# EXPIRES CACHING END

# ETAG AND CACHE CONTROL HEADERS
<IfModule mod_headers.c>
# Disable ETag header
Header unset ETag
FileETag None

# Set Cache-Control headers
Header set Cache-Control "max-age=31536000, public"

# Remove Last-Modified header
Header unset Last-Modified
</IfModule>

[oldog]

# Enable compression
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

# Enable ETag configuration
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None

# Leverage browser caching
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "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"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

<IfModule mod_headers.c>
# 1 Month for most static assets
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

# 1 Year for HTML (useful for immutable files)
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
</IfModule>

# Avoid caching for dynamic content
<FilesMatch "\.(php|cgi|pl|htm|html)$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
Header set Pragma "no-cache"
</IfModule>
ExpiresActive Off
</FilesMatch>

[Gemini23]

Thanks Old Dog - would this cause a 'refresh' if content was changed on a page?

[lucy24]

There's no universal answer, because it depends on the individual site. If images never change once they've gone live, then by all means set vastly long caching times. If things do change regularly--presumably your pages do--then set a caching time that's a little less than your typical change frequency. (As an extreme example: My test site is set to no caching at all, to ensure I never have to manually refresh if I've made two changes in five minutes.)

“Cache” means the user-agent doesn't send in a fresh request, but looks into its own cache--assuming you're not dealing with a human user who empties their browser cache daily. And it isn't retroactive; if you change your mind and set a shorter caching time, the visitor won't know until their existing cache expires.

Buried in the Apache docs

https://httpd.apache.org/docs/2.4/mod/mod_expires.html#expiresbytype

is a brief explanation of the difference between “Access” and “Modified“. Again, which to use depends on the site.

[Gemini23]

Thanks Lucy - IF any images are replaced then they will have a different URL. Generally speaking the website's content remains static... maybe 12K URLs (posts/products) with probably less than 100 that will have content changed or modified.

[tangor]

I've used no cache since the beginning. I want every load to be "new", just in case. :)

[oldog]

"Dog - would this cause a 'refresh' if content was changed on a page?"

Yes

[phranque]

a refresh would only occur after the cache was cleared or the cached resource expires.