Webサイト高速化のために行った6つのこと(2)
2017/02/13 23:45
  • 前回はGoogle PageSpeed Insightsを使ってサイトの現状を把握すること、
    そして静的コンテンツの圧縮方法を紹介しましたが、今回はその第二弾です。

    1.圧縮を有効にする(html, css, jsなどの静的コンテンツ)
    2.ブラウザのキャッシュを有効にする(静的コンテンツにキャッシュを導入する)(当記事)
    3.CSSを縮小する
    4.HTMLを縮小する
    5.スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する(※一部)
    6.読み込み中のときにloading indicatorを表示する(これはユーザー体験を高めるためのおまけ)

    この記事ではブラウザのキャッシュを有効にするためのサーバー設定を紹介します。

    2.ブラウザのキャッシュを有効にする(静的コンテンツにキャッシュを導入する)

    Header ディレクティブで Cache-Control を設定します。

        <Files ~ ".(gif|jpe?g|png|ico|ttf|js|css)$">
            Header set Cache-Control "max-age=2592000, public"
        </Files>
    

    まず、 Files ディレクティブでキャッシュ対象のファイルタイプ(拡張子)を指定します。
    ぼくは画像系, フォント, JS, CSSをキャッシュ対象としました。今後 woff とかも増えるかも。

    また、ぼくはまとめて書きましたが、ファイルタイプごとにキャッシュの有効期限を設定することも可能です。
    その場合はFiles~を分割するだけ。簡単ですね。

    max-age でキャッシュの有効期限を指定します。数字は秒数。
    時間に直すと720時間、つまり30日間キャッシュさせることになります。

    サーバーを再起動して画像にアクセスしてみると、Response Headerの項目に以下が記載されるようになります。
    この記載があれば、正しくキャッシュされていることになります。
    もしない場合は、何らかの設定が間違っている可能性があるため、要確認です。

    Cache-Control:max-age=2592000, public
    

    キャッシュが有効な間にCSSなどの静的ファイルに変更があった場合の対処法

    静的コンテンツはしっかりキャッシュされていますので、
    ファイルをアップロードしただけでは変更は反映されません。

    その場合は、ファイルのリクエスト時に適当な識別子(パラメータ)を渡してあげましょう。

    <link rel="stylesheet" href="/static/css/style.css?2017021202">
    

    これで別ファイルと認識されるようになりますので、変更が反映されるようになります。
    もっと本格的にキャッシュ機構を導入したい場合は、 mod_expiresmod_cache の導入を検討してみてもいいかもしれません。

    それでは素敵なキャッシュライフを!

    人気ブログランキングへ ブログランキング・にほんブログ村へ
    ↑応援よろしくお願いします!m(_ _)m

  • <2017/02/13 15:06>
  • サーバー
  • ブラウザキャッシュコンテンツ静的cachecontentcache-controlapachehtmlcssJSJavaScriptmax-age縮小圧縮
  • 新しい記事へ
    Webサイト高速化のために行った6つのこと(3)

    古い記事へ
    Webサイト高速化のために行った6つのこと(1)

profile picture

自己紹介的な何か

@wkmettyでついったーやってます。時々。 6年間勤めたゲーム会社を2018年2月に退職しフリーランスのプログラマに。 WordPress Core, WP-CLI コントリビューター。 お仕事募集中です。