Nginxのブラウザキャッシュを有効にする方法(AWS+網元+wordpress編)

このエントリーをはてなブックマークに追加

PageSpeed Insightsでブラウザのキャッシュの活用という項目で引っかかったので、その対応をまとめます。結構他にも引っかかったのですが、僕的にはこれが一番手間取ったので、忘れないように記事にしておきます。

手順は下記のとおり

最初にざっくり手順をご紹介します。これ見ただけで出来る人はこのまま手順とおりにやっていただければ大丈夫だと思います。

1,サーバーに接続

1-1,pemを登録したディレクトリに移動

1-2,ssh -i 自分の.pem ec2-user@自分の

2,sudo vi /etc/nginx/conf.d/default.conf

3,server {
# 〜〜 省略(いろいろ書いてある) 〜〜

location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico)$ {
expires 7d;
}

# 〜〜 省略(いろいろ書いてある) 〜〜
}

4,sudo service nginx restart

5,exit

これでOK

ブラウザキャッシュをやった経緯

PageSpeed Insightsでサイトの表示速度を調べたら、怒られました。基本的には、「画像を最適化する」、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」、「ブラウザのキャッシュを活用する」の項目が出てきました。

ちなみに、「画像を最適化する」は既存の画像をtynypngで圧縮すればいいし、今後の対応は、gulpで圧縮自動化で作業が楽になりますね。

この記事を参考にgulpで自動化してみてください。

compassをgulpでコンパイルしてさらにCSS圧縮まで自動化しよう

今回の対応は、ブラウザのキャッシュを活用する

今回はここの対応をする感じです。結果からいうとPageSpeed Insightsで一番点数が変わりました。

ブラウザのキャッシュを活用するでgoogle先生に言われたこと

サーバーでブラウザのキャッシュを有効にします。静的なリソースのキャッシュの有効期間は 1 週間以上にしてください。

ほうほう、なるほどいろいろ小難しいこと書いてあるけど、要は上記の対応をなんとかしろってことなんですね。

このブログの環境

以前に記事にした通り、AWS+網元+wordpressの環境で作られています。正直、僕はサーバのことは専門外なのでそこまで詳しくはありません。なので、AWS+網元+wordpressの環境でブラウザのキャッシュを活用するためにいろいろ調べながら作業をしたのでそれのまとめです。

なので、AWS+網元+wordpressの環境意外の人には参考にならないかも知れないですね・・・。

1.AWSのサーバに接続

ターミナルなどで、AWSの自分のサーバに接続しないことには今回の作業はできません。

1-1.pemを登録したディレクトリに移動

おそらくAWSでインスタンスを作った時に、なんとか.pemっていうのをご自分のPCのどこかに保存をしているはずです。そのディレクトリまで移動してください。

1-2.サーバに接続

ssh -i 自分の.pem ec2-user@自分の

自分の.pemはどこかに保存されているpemを入力してくださいね。

さらにec2-user@以下については、AWSのインスタンスで調べることができます。

AWSにログインをしたら・・・

EC2 > Instances > 使用するインスタンスを選択

すると、Public DNSというのが表示されます。それが、先ほどの「ec2-user@以下」になります。

Public DNSというのが表示

こんなメッセージがでていれば接続完了です。

接続完了

2.Nginxのdefault.confに移動

sudo vi /etc/nginx/conf.d/default.conf

上記をコピペでいけます。

3.default.confを書き換える

server {
    # 〜〜 省略(いろいろ書いてある) 〜〜
 
    location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico)$ {
        expires 7d;
    }
 
    # 〜〜 省略(いろいろ書いてある) 〜〜
}

server{}の中身に上記のように設定を追記してください。

4.Nginxの再起動

sudo service nginx restart

上記コマンドでNginxを再起動してください。でないとブラウザキャッシュの設定が適用されません。

5.サーバの接続解除

ひととおり設定をしてNginxの再起動までできたら、サーバの接続を解除してしまってもいいです。

exit

まとめ

以上が手順になります。

これで、一応ブラウザキャッシュの活用の設定はできたかなと思います。前述したようにAWS + 網元 + wordpressの時の設定なので、みなさんに当てはまるものではないのかなと思います。

ただ、ブラウザキャッシュの設定をすることでPageSpeed Insightsの得点は結構上がります。ただ、今回やってみた結果、PageSpeed InsightsのほうでNginxの設定以外のものもブラウザキャッシュの活用を設定しようという警告がでます。これについては、僕もまだ対応していません。今後も調べながら、ページを速度をあげられるようにしていきます。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ