Woff2 Server Side Caching & Google Pagespeed Google Pagespeed complains about the loading and caching of WOFF2 fonts on our websites. We cache media and woff2 fonts for 1 month or 30 days:
# ----------------------------------------------------------------------
# | Cache expiration |
# ----------------------------------------------------------------------
# Serve resources with far-future expiration date.
#
# (!) If you don't control versioning with filename-based cache busting, you
# should consider lowering the cache times to something like one week.
#
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires
# https://nginx.org/en/docs/http/ngx_http_headers_module.html#expires
map $sent_http_content_type $expires {
default 1M;
# No content
"" off;
# CSS
~*text/css 1y;
# Data interchange
~*application/atom\+xml 1h;
~*application/rdf\+xml 1h;
~*application/rss\+xml 1h;
~*application/json 0;
~*application/ld\+json 0;
~*application/schema\+json 0;
~*application/geo\+json 0;
~*application/xml 0;
~*text/calendar 0;
~*text/xml 0;
# Favicon (cannot be renamed!) and cursor images
~*image/vnd.microsoft.icon 1w;
~*image/x-icon 1w;
# HTML
~*text/html 0;
# JavaScript
~*application/javascript 1y;
~*application/x-javascript 1y;
~*text/javascript 1y;
# Manifest files
~*application/manifest\+json 1w;
~*application/x-web-app-manifest\+json 0;
~*text/cache-manifest 0;
# Markdown
~*text/markdown 0;
# Media files
~*audio/ 1M;
~*image/ 1M;
~*video/ 1M;
# WebAssembly
~*application/wasm 1y;
# Web fonts
~*font/ 1M;
~*application/vnd.ms-fontobject 1M;
~*application/x-font-ttf 1M;
~*application/x-font-woff 1M;
~*application/font-woff 1M;
~*application/font-woff2 1M;
# Other
~*text/x-cross-domain-policy 1w;
}
expires $expires;
So what could be the issue? Is there a longer recommended caching time for web fonts perhaps?
Google Pagespeed is complaining about the caching of WOFF2 fonts on the website. The current caching time is set to 1 month or 30 days. The issue could be that the caching time is too long for web fonts.
One solution could be to set a shorter caching time for web fonts. For example, a caching time of 7 days could be used instead of 30 days. This would ensure that the fonts are still cached for a reasonable amount of time, but not for too long.
To implement this solution, the following code could be added to the Nginx configuration file:
# Web fonts
~*font/ 7d;
~*application/vnd.ms-fontobject 7d;
~*application/x-font-ttf 7d;
~*application/x-font-woff 7d;
~*application/font-woff 7d;
~*application/font-woff2 7d;
This code sets the caching time for web fonts to 7 days. After making this change, the website should be retested with Google Pagespeed to see if the issue has been resolved.
Made I recommended one year
# Web fonts
~*font/ 1y;
~*application/vnd.ms-fontobject 1y;
~*application/x-font-ttf 1y;
~*application/x-font-woff 1y;
~*application/font-woff 1y;
~*application/font-woff2 1y;
and reloaded Nginx , but somehow Lighthouse and Google Pagespeed site still see 30 days for fonts and webP files. When I checked with sudo nginx -T I did see that conf.d/media.conf was loading with 1y for fonts.
Still 30 days:
curl -I https://site.com/published/en.site.com/fonts/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2
HTTP/2 200
server: nginx
date: Sun, 11 Jun 2023 08:13:32 GMT
content-type: application/octet-stream
content-length: 16740
last-modified: Sun, 11 Jun 2023 06:47:39 GMT
etag: "64856e0b-4164"
expires: Tue, 11 Jul 2023 08:13:32 GMT
cache-control: max-age=2592000
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
x-content-type-options: nosniff
x-content-type-options: application/json
strict-transport-security: max-age=31536000; includeSubDomains
accept-ranges: bytes
Perhaps due to content-type: application/octet-stream ... and mime.types missing woff2:
/etc/nginx$ cat mime.types |grep woff
application/font-woff woff;
only woff aded..
Found answer at https://stackoverflow.com/questions/52738265/nginx-missing-content-type-for-woff2
I added
...
application/font-woff2 woff2;
...
to mime.types and now 1 year caching of woff2 fonts works
curl -I https://site.com/published/en.site.com/fonts/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2
HTTP/2 200
server: nginx
date: Sun, 11 Jun 2023 08:25:11 GMT
content-type: application/font-woff2
content-length: 16740
last-modified: Sun, 11 Jun 2023 06:47:39 GMT
etag: "64856e0b-4164"
expires: Mon, 10 Jun 2024 08:25:11 GMT
cache-control: max-age=31536000
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
x-content-type-options: nosniff
x-content-type-options: application/json
strict-transport-security: max-age=31536000; includeSubDomains
accept-ranges: bytes
Please sign in or create an account to participate in this conversation.