Adding netlify.toml to add caching & hint headers #112
Conversation
| echo "CSS Path: ${CSS_PATH}" | ||
| echo "JS Path: ${JS_PATH}" | ||
|
|
||
| sed -i s,CSS_PATH,${CSS_PATH},g netlify.toml |
There was a problem hiding this comment.
What this'll do is update our netflify.toml after build with the CSS/JS paths. So we can tell the browser in the HTTP header which files to expect.
I'm happy to pull this out if you're not a fan.
| [build.processing.html] | ||
| pretty_urls = true | ||
| [build.processing.images] | ||
| compress = false |
There was a problem hiding this comment.
We could probably remove these build rules if you'd like, but I do kind of like being explicit as to what processing we're doing :)
| X-Content-Type-Options = "nosniff" | ||
| Strict-Transport-Security = "max-age=15552000; includeSubDomains" | ||
| Referrer-Policy = "no-referrer-when-downgrade" | ||
| Cache-Control = "public, max-age=604800, s-max-age=604800" |
There was a problem hiding this comment.
The cache for most files is 7 days. Which I think is about right for the bridgetown update cycle.
| "<CSS_PATH>; rel=preload; as=style", | ||
| "<JS_PATH>; rel=preload; as=script", | ||
| "<https://NETLIFY_IMAGES_CDN_DOMAIN>; rel=preconnect" | ||
| ] |
There was a problem hiding this comment.
When a user visits the homepage they'll get the HTTP hint to download the CSS/JS & preconnect to the CDN.
| [[headers]] | ||
| for = "/*.(png|jpg|js|css|svg|woff|ttf|eot|ico|woff2)" | ||
| [headers.values] | ||
| Cache-Control = "public, max-age=31536000, s-max-age=31536000" |
There was a problem hiding this comment.
Things like fonts/images aren't likely to change, so 1 year is an acceptable expiry time.
| @@ -9,13 +9,12 @@ | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> | |||
|
|
|||
| <link rel="preload" href="{% webpack_path css %}" as="style" /> | |||
| <link rel="stylesheet" href="{% webpack_path css %}" /> | |||
There was a problem hiding this comment.
I moved these about a little :)
Requesting the preloading the stylesheet, then requesting it right after seemed to not make a big performance boost. I also moved the future page prefetches below the JS so that'll start downloading before we worry about the next pages.
| @@ -0,0 +1,40 @@ | |||
| [build] | |||
There was a problem hiding this comment.
Weirdly if you have a different base, you need two netlify.tml files -.- Took me so long to figure out why the headers weren't being picked up on.
MikeRogers0
changed the title
|
@MikeRogers0 I'm sorry I haven't gotten a chance to review this yet. Will do ASAP! |
When experimenting with review apps on Netlify, I found I'd quite often needed these variables set to have reliable deploys.
|
Deploy error is:
I'll come back to this later :) |
|
@jaredcwhite Am I ok to close this? |
|
@MikeRogers0 Deploy preview feels very snappy! I still don't quite grok all the config stuff, but since it works, let's go for it. |
This is a 🔦 documentation change.
Summary
#109 Pulled from here. Originally I thought it could be neat to add lots of Early Hints headers, but I reduced it down a bunch to keep things easy to review.
This adds:
🎥 Here is a video of the difference
Context
#103
If you liked this PR, please consider buying me a coffee :)