Caching static assets on Netlify
By default Netlify don’t cache files which might be good for HTML but not so good for fonts or images. I could clearly see font flickering on my site with the default configuration, and it’s not the best user experience. Luckily, we can define custom headers.
Create the _headers file in your public folder (
static for Gatsby sites):
# Cache fonts forever
# Cache images for a week
Here, we’re caching font forever, and images for a week. This make the experince noticably better, and removes font flickering, and unnecessary requests to images that arn’t going to update often.
Gatsby’s gatsby-plugin-netlify enables caching for Gatsby build files but it also overwrites user’s _headers file. We need to use the plugins’s
Update Gatsby config file, gatsby-config.js:
The format is very similar to the _headers file above.