1182126 - Set an expiry date or max age HTTP header for font resources

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Performance, defect)

Description

[Luke Crouch [:groovecoder]]

https://developers.google.com/speed/pagespeed/insights/?utm_source=analytics&tab=desktop&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2F reports that:

https://mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.woff
https://mozorg.cdn.mozilla.net/…/fonts/OpenSans-LightItalic-webfont.woff
https://mozorg.cdn.mozilla.net/…dia/fonts/OpenSans-Semibold-webfont.woff

All have an expiry time/max age of 60s. We should set it higher to get better page loading performance.

Comment 1

[Jannis Leidel [:jezdez]]

So first of all, this is an issue that not only happens to our styles (base/fonts/opensans.styl) but also happens to files in the Tabzilla CSS: https://mozorg.cdn.mozilla.net/media/css/tabzilla-min.css

I'm not sure why we need to use the mozorg.cdn.mozilla.net to be honest, I guess that's to make sure the files are properly cached from one central Mozilla source instead of ten of all the various Mozilla websites. And I guess the low expiry could be there so the file serving works without having to use a cache busting hash in the URL.

On the other hand this could be an issue with the httpd or load balancer setup of not setting long expiry values for font files correctly. I'm not sure.

Options:

1. Ask webops to check if the mozorg.cdn.mozilla.net setup is correct and fix it if possible.

2. Host font files on our own CDN (developer.cdn.mozilla.net) and stop depending on mozorg.cdn.mozilla.net. That would probably also mean to stop serving Tabzilla as well.

Leaving it to Stephanie to make a decision :)

Comment 2

[Jannis Leidel [:jezdez]]

:pmac Do you know what's wrong with the mozorg CDN?

Comment 3

[Jannis Leidel [:jezdez]]

:craigcook Or maybe you can shed some light on this?

Comment 4

[Paul [:pmac] McLanahan]

The short answer is that this is the default cache expiry for static files on bedrock. We could make it longer. We use hashed file names in bedrock itself so that we can set effectively infinite cache timeouts for most files, but sites outside of bedrock that don't have access to the manifest mapping of original file names to hashed file names can't do that.

The best solution for you is to host the files yourself. Tabzilla is about to be replaced by a much more simple and static thing (https://bugzilla.mozilla.org/show_bug.cgi?id=1151579) so you'll need to host your own fonts at that point anyway since new Tabzilla won't require them.

Another option is to just use our hashed version of the tabzilla CSS, which is very unlikely to change now that we're working on the new thing:

https://mozorg.cdn.mozilla.net/media/css/tabzilla-min.c4e071344612.css

But that does carry some risk. It should stay there as we don't delete these generated files, and the CDN should cache them for 10 years, but I can understand if you're reluctant to use that. It could be a decent interim solution if you need a quick one though.

Hope this helps. We're happy to make whatever changes you need though. If you have a recommendation for a better default cache timeout I'm quite happy to change that as well.

Comment 5

[Luke Crouch [:groovecoder]]

https://developers.google.com/speed/docs/insights/LeverageBrowserCaching:

"We recommend a minimum cache time of one week and preferably up to one year for static assets, or assets that change infrequently."

Since I assume these font assets don't change much at all, could we set the cache timeout to 1 week?

Comment 6

[Jannis Leidel [:jezdez]]

:groovecoder Could we just start hosting those files on our own once pipeline is merged?

Comment 7

[Luke Crouch [:groovecoder]]

Yeah, I like that best as a long-term, across-the-site fix for proper browser caching. I only filed the bug for these assets because they are the only ones reported by Google Analytics with such a short expiration.

:pmac - how long would it take to make the default cache timeout change on your side? Can you do that while we work on django-pipeline to host the files on our own?

Comment 8

[Paul [:pmac] McLanahan]

Yup. I'll set the font files to a month by default. Cool? The simple and static tabzilla release is imminent by the way:

https://github.com/mozilla/tabzilla

There will be an email to the public webdev list when it's fully ready.

Comment 9

[Paul [:pmac] McLanahan]

Attachment: Link to Github pull-request: https://github.com/mozilla/bedrock/pull/3128

This PR sets cache-control header for all files under the /media/fonts/ URL to 30 days. It also increases the default expiry for all non-immutable files to 6 hours instead of 1 minute.

Comment 10

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/17208e0327bef65a787b22c1e9b44385c338ceda
Bug 1182126: Increase fonts cache header to one month.

Also increase default cache header expiry to 6 hours from 1 minute.
The majority of files used on bedrock are immutable (include the
file content hash) and will be unaffected by this change.

https://github.com/mozilla/bedrock/commit/d6c6212fbd424733a46898bd4200f4734c010b63
Merge pull request #3128 from pmclanahan/increase-fonts-cache-expire-1182126

Bug 1182126: Increase fonts cache header to one month.

Comment 11

[Luke Crouch [:groovecoder]]

Thanks :pmac! As of this change, GA speed suggestions no longer mentions these assets. Do you know when this was deployed, so I can check before/after page speed numbers in GA?

Comment 12

[Paul [:pmac] McLanahan]

Looks like this past Monday (Jul 20) at around 1pm Eastern.

https://rpm.newrelic.com/accounts/263620/applications/2639284/deployments/2277834#tab-view_deployment=change_log