Firebaseホスティングでブラウザキャッシングを利用する方法

Question

私は自分の個人的なブログをGoogleのfirebaseでホストしています。私のブログはjekyllに基づいています。 Firebaseはプロジェクトの所有者がhttpヘッダーを変更できる場所からfirebase.jsonファイルを提供します。

私は私のCSSファイルhttps://blogprime.com/assets/css/init.cssとhttps://blogprime.com/assets/font/fontname.woff（HTTPキャッシュ制御が動作していない）で、私のフォント

私のイメージは内部で:: https://blogprime.com/assets/img/imagename.entension（作業のhttpキャッシュ制御）が格納されています。

イメージとcssの両方のフォントがルートから2つの深いdirですが。この私のイメージとすべてのものを追加する前に

今HERESに私の.jsonファイルのコード..

{"hosting": 
    {"public": "public", 
    "headers": [ 
     {"source" : "**/*.@(eot|otf|ttf|ttc|woff|css)", 
     "headers" : [ 
      {"key" : "Access-Control-Allow-Origin", 
      "value" : "*"}] 
     }, 
     {"source" : "**/*.@(jpg|jpeg|gif|png)", 
     "headers" : [ 
      {"key" : "Cache-Control", 
      "value" : "max-age=30672000" 
      }] 
     }, 
     {"source" : "404.html", 
     "headers" : [ 
      {"key" : "Cache-Control", 
      "value" : "max-age=300" 
      }] 
     }] 
    } 
} 

は、キャッシュの寿命の1時間を持っていた....が、今だけのフォントファイルと一緒に私のCSSファイルには、1時間を持っていますキャッシュ寿命。

あなたのcssファイルの「レバレッジブラウザのキャッシュ」を修正する方法を教えてください。私は"source"： " /*.@(eot|otf|ttf|ttc|woff|css)",***というディレクトリリンク構造に問題があると思います。私は本当にそれを修正する方法を知りません。あなたは、GoogleのPageSpeedのテストを確認することができます

..

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblogprime.com%2Fwordpress%2Fdns-prefetch-in-wordpress.html

Answer 1

は、私はちょうど私のポートフォリオのウェブサイト99/100を作ります。

Googleは言う：

我々は静的な資産のために、好ましくは1 年までの1週間の最小キャッシュ時間をお勧めします。

"headers": [ { 
 
     "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)", 
 
     "headers" : [ { 
 
     "key" : "Access-Control-Allow-Origin", 
 
     "value" : "*" 
 
     } ] 
 
    }, { 
 
     "source" : "**/*.@(js|css)", 
 
     "headers" : [ { 
 
     "key" : "Cache-Control", 
 
     "value" : "max-age=604800" 
 
     } ] 
 
    }, { 
 
     "source" : "**/*.@(jpg|jpeg|gif|png)", 
 
     "headers" : [ { 
 
     "key" : "Cache-Control", 
 
     "value" : "max-age=604800" 
 
     } ] 
 
    }, { 
 
     // Sets the cache header for 404 pages to cache for 5 minutes 
 
     "source" : "404.html", 
 
     "headers" : [ { 
 
     "key" : "Cache-Control", 
 
     "value" : "max-age=300" 
 
     } ] 
 
    } ]

それは私の作品、これを使用してください。