Browser Caching or Caching Static Assets on Phoenix

Phoenix Forum Questions / Help
1

Hi,

I just run my phoenix app/website through both Google Page Speed Insights and GTMetrix.com

They’re both recommending to “Add Expiry Headers” to the Static Assets:

Screen Shot 2017-03-31 at 11.26.55.png761×256 22.8 KB

More specifically: to add a “far-future expiration date”.

I looked through the Plug Documentation, and it seems to me that it was supposed to be working as is. I tried dabbling with the gzip :true option just for the sake of it.

Apparently ($ curl -vI https://liberty.ai/images/logo-liberty-app@1x.png) the Max-Age is set to four hours (14400/60*60), is there any way to change it?

< Cache-Control: public, max-age=14400
Cache-Control: public, max-age=14400
< Strict-Transport-Security: max-age=31536000
Strict-Transport-Security: max-age=31536000
< Etag: E640E7
Etag: E640E7
1 Like
2

your assets are not ‘digested’ how do you reference them in your layout file?

like this?
<link rel="stylesheet" href='<%= static_path(@conn, "/css/app.css") %>'>

and do you have ‘Phoenix static buildpack’ in your buildpacks? http://www.phoenixframework.org/docs/heroku#section-adding-the-phoenix-static-buildpack

1 Like
3

Hi,

  1. That’s the way I’m refering them.

  2. I have the buildpack installed.

 heroku buildpacks
=== prod-customer-acquisition Buildpack URLs
1. https://github.com/HashNuke/heroku-buildpack-elixir.git
2. https://github.com/gjaldon/heroku-buildpack-phoenix-static.git
1 Like
4

I tried editing Plug.Static on the endpoint.ex:

    at: "/", from: :customer_acquisition, gzip: false,
    cache_control_for_etags: "public, max-age=31536000",
    only: ~w(css fonts images js favicon.ico robots.txt)```

But it didn't work.
1 Like
5

Oh Lord.

CloudFlare has an option to set the Expiry Date for Browser Caching.

CloudFlare was “overriding” the server settings.

I’m sorry about this.

2 Likes
6

your assets will get ‘Cache-Control: public, max-age=31536000’ when they are served through the static plug (with digest)… so don’t worry about that

problem is to get your assets digested and that the layout/rendering uses the digested assets…
bit difficult to identify… check that you are running in PROD, npm/yarn is successful and cache_static_manifest is correct etc.

also debug directly on the heroku url, not through cloudflare.

1 Like
7

np probs, your assets should still be digested for a multitude of reasons… so make sure that happens;-)

1 Like
8

Thank you @outlog, I updated the CloudFlare setting to a month and it works :slight_smile:

1 Like
9

just for other people, fixing the digest issue was making sure the cache_static_manifest: config was correct… (guess some docs are outdated)

remote:        Running default compile
remote:        16:40:31 - info: compiled 6 files into 2 files, copied 13 in 2.0 sec
remote:        Check your digested files at "priv/static"
remote:        Clean complete for "priv/static"
remote:        Caching assets
remote: sending incremental file list
remote: cache_manifest.json

means it should be:
cache_static_manifest: "priv/static/cache_manifest.json"

2 Likes