会社の Web サイト の内容を少し見直し, ついでに諸々調整をしました。具体的には事業内容を整理, 子ページができたのでデザインの一部修正等々です。
見直し完了後に PageSpeed Insights の指摘事項を修正する過程で Cache-Control ヘッダを付与する必要がでてきました。そのあたりの話です。
PageSpeed Insights の指摘事項
このブログでも同様の問題が指摘されています。アセット類のファイルに対して “キャッシュの設定が行われていない” ために発生する問題でした。
middleman-s3_sync を使って Cache-Control ヘッダを設定する方法
会社 Web サイトは AWS S3 + CloudFront 環境で運用されています。S3 の管理画面に入って個別または一括でヘッダ情報を追加することができます。ただし, 管理画面からの設定を行う場合, Middleman でサイトを更新する度に管理画面から設定を変更する必要があります。これは流石に不便です。
そこで middleman-s3_sync から Cache-Control ヘッダを設定する方法をとります。
具体的には config.rb に対して次の設定を追加します。
# middleman-s3_sync の設定
activate :s3_sync do |s3|
s3.region = 'ap-northeast-1'
s3.index_document = 'index.html'
s3.error_document = '404/index.html'
end
default_caching_policy max_age: (60 * 60 * 24 * 365), public: true, must_revalidate: true
caching_policy 'text/html', max_age: 60 * 10, public: true, must_revalidate: true
caching_policy 'text/plain', max_age: 60 * 10, public: true, must_revalidate: true
caching_policy 'application/xml', max_age: 60 * 10, public: true, must_revalidate: true
default_caching_policy ですべてのファイルに対して cache の設定を行い, html, txt, xml の場合のみ max_age を変更するように設定しています。
設定状況を S3 の管理画面から確認してみます。まず index.html (トップページ) の場合:
max_age が 600 秒(10分) に設定されていることが確認できました。
続いて, logo.svg の設定状況です:
max_age が 31536000 秒(1年) に設定されていることが確認できました。
1 年の cache は問題にならないのか
例えば CSS を一部書き直した様な場合に 1 年の cache が設定されている場合反映されないかも… という心配が出てきそうですが, Middleman の asset_hash を利用すれば CSS, JS, 画像類については問題にならないです。
もちろんアセットではないファイルを追加する場合は cache 設定を見直す必要があります。
最後に
Cache-Control の設定については, Middleman ではない環境の場合でも対応する方法はあります。Middleman を中心としたエコシステムの中では比較的に簡単にできるので便利だなぁ〜と改めて思いました。
hugo の場合: HowTo: Deploying Hugo on S3 and Cloudfront - tips & tricks - Hugo Discussion